/*
 * Redesign-skiss: annamariaeiderbrant.com i formspråket från abomestudio.com.
 * Handskriven CSS, inget ramverk. Publiceras INTE på huvuddomänen – fas 1-klonen
 * i /site är oförändrad.
 *
 * Abomés drag som återskapas här:
 *  - centrerad logotyp, VERSAL meny med luftig sparsning till vänster och höger,
 *    undermeny som fälls ut vid hover
 *  - bildstyrt raster (3 kolumner) med generösa mellanrum och versala titlar
 *  - produktsida: brödsmula, stor bild till vänster, text + kantad knapp till höger
 *  - kantade knappar (linje, inverteras vid hover), diskret sidfot med hårlinje,
 *    länklista och Instagram-ikon
 *
 * Avvikelser från Abomé, efter önskemål:
 *  - blekt grön-vit bakgrund (#F3F6EA) istället för Abomés rena vitt, överallt
 *  - mycket större text (läsbarhet för äldre läsare): brödtext 22 px, menyer 19 px,
 *    ingen text under 18 px
 *  - startsidan är en helskärmsbild utan sidfot och utan scroll
 *  - menyraden på undersidorna är olivgrön (#665C2E) med vit text; startsidans är genomskinlig
 */

:root {
  --bg: #F3F6EA;
  --bg-rgb: 243, 246, 234;   /* samma färg som RGB, för genomskinliga lager (huvudet) */
  --wash: #e4e9d4;        /* något mörkare, för bildytor och passepartout */
  --line: #cbd1b9;
  --ink: #373b2d;         /* all text, ikoner och linjer i gränssnittet (10,5:1 mot --bg) */
  --mute: #373b2d;        /* samma färg – sekundär text skiljs med storlek/versaler, inte med ljusare färg */
  --hdr: 132px;
  --pad: 26px;
  --wrap: 1120px;
  --gap: 32px;
  --font: "Sabon LT Std", "Sabon LT Pro", "Sabon Next LT Pro", "Sabon MT Pro", Sabon, "EB Garamond", Georgia, "Times New Roman", serif;   /* Sabon = Anna Marias val; EB Garamond är närmaste fria typsnitt */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 22px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; padding-top: calc(var(--hdr) + 36px); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--pad))); margin: 0 auto; }
.narrow { width: min(680px, calc(100% - 2 * var(--pad))); margin: 0 auto; }
.caps { font-size: 18px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; }
.mute { color: var(--mute); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg); padding: 10px 14px; font-size: 19px; }
.skip:focus { left: 8px; }

/* ---------- Sidhuvud ---------- */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  background: rgba(var(--bg-rgb), .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hdr-in {
  position: relative; height: 100%; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 232px; display: block;
}
.logo img { width: 100%; height: auto; }

.nav { display: flex; align-items: stretch; align-self: stretch; }
.nav > ul { display: flex; gap: 34px; align-items: stretch; }
.nav > ul > li { display: flex; align-items: center; }
.nav a.top {
  display: inline-block; padding: 8px 0 6px;
  font-size: 19px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  border-bottom: 2px solid transparent; transition: border-color .2s;
}
.nav a.top:hover, .nav a.top[aria-current="page"] { border-bottom-color: currentColor; }
.nav-r { margin-left: auto; }
.nav .lang { align-self: center; display: flex; align-items: center; gap: 4px; margin-left: 26px; padding-left: 24px; border-left: 1.5px solid var(--line); }
.nav .lang a {
  display: block; padding: 7px 10px 6px; font-size: 18px; letter-spacing: .06em; line-height: 1.2;
  border: 1.5px solid transparent; transition: border-color .2s;
}
.nav .lang a:hover { border-color: var(--line); }
.nav .lang a[aria-current] { border-color: var(--ink); font-weight: 700; }
.nav-l { margin-right: auto; }

/* Undermenyn ligger som en rad under huvudet; huvudets yta förlängs så den aldrig
   hamnar direkt över bilderna. Menyposten är lika hög som huvudet så att musen
   inte tappar hover på vägen ned. */
.nav li.has-sub { position: static; }
.hdr::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0;
  background: rgba(var(--bg-rgb), .97); transition: height .18s; pointer-events: none;
}
.hdr:has(.nav li:hover > .sub)::before, .hdr:has(.nav li:focus-within > .sub)::before { height: 70px; }
.nav .sub {
  position: absolute; left: var(--pad); top: 100%; display: flex; gap: 38px; padding: 12px 0 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav li:hover > .sub, .nav li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.nav .sub a {
  display: block; padding: 6px 0; white-space: nowrap;
  font-size: 18px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  color: var(--mute); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav .sub a:hover { color: var(--ink); border-bottom-color: currentColor; }

.burger { display: none; width: 52px; height: 52px; margin-left: -12px; position: relative; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink);
  transition: transform .22s, top .22s;
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 25px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--hdr) 0 0 0; z-index: 40; background: var(--bg);
  padding: 24px var(--pad) 40px; overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer a { display: block; padding: 11px 0; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.drawer .sub { padding: 2px 0 12px 20px; }
.drawer .sub a { font-size: 21px; color: var(--mute); padding: 8px 0; }
.drawer .drawer-lang { margin-top: 28px; padding-top: 22px; border-top: 1.5px solid var(--line); }
.drawer-lang ul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.drawer-lang a { display: block; padding: 12px 18px; font-size: 22px; letter-spacing: .03em; text-transform: none; border: 1.5px solid var(--line); }
.drawer-lang a[aria-current] { border-color: var(--ink); font-weight: 700; }
body.menu-open { overflow: hidden; }

/* ---------- Startsidan: helskärmsbild, ingen sidfot, ingen scroll ---------- */

html.home, html.home body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.home body { height: 100vh; height: 100dvh; min-height: 0; }
.hero { position: fixed; inset: 0; z-index: 0; padding: 0; background: var(--wash); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-fg {
  position: absolute; inset: var(--hdr) 0 0 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3.5vh, 44px) clamp(12px, 4vw, 64px);
}
.hero-fg img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
html.home .hdr { background: rgba(var(--bg-rgb), .55); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
html.home .hdr::before { background: rgba(var(--bg-rgb), .72); }
html.home .nav .sub a { color: var(--ink); }

/* ---------- Sidhuvud på undersidorna: olivgrön list med vit text (startsidan behåller sitt genomskinliga) ---------- */

:root { --olive: #665C2E; --on-olive: #fff; }
html:not(.home) .hdr { background: var(--olive); color: var(--on-olive); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not(.home) .hdr::before { background: var(--olive); }
html:not(.home) .hdr .nav .sub a { color: var(--on-olive); }
html:not(.home) .hdr .nav .lang { border-left-color: rgba(255, 255, 255, .4); }
html:not(.home) .hdr .nav .lang a:hover { border-color: rgba(255, 255, 255, .55); }
html:not(.home) .hdr .nav .lang a[aria-current] { border-color: var(--on-olive); }
html:not(.home) .hdr .burger span { background: var(--on-olive); }
html:not(.home) .hdr :focus-visible { outline-color: var(--on-olive); }

/* ---------- Bildkarusell: stilla – bilden tonas ut och nästa tonas in, inget glider ---------- */

body.page-car main { padding-top: calc(var(--hdr) + 22px); }
.car { --stage: max(320px, calc(100vh - var(--hdr) - 190px)); --stage: max(320px, calc(100dvh - var(--hdr) - 190px)); position: relative; margin-top: 16px; }
.slide { padding: 0 108px; margin-bottom: 56px; scroll-margin-top: 260px; }   /* direktlänk (#bild) ska inte skrolla sidan under menyn */             /* utan JS står bilderna helt enkelt under varandra */
.stage { height: var(--stage); display: flex; align-items: center; justify-content: center; }
.stage img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.car-cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 22px; }
.car-name { grid-column: 2; text-align: center; }
.car-title { font-size: 21px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1.3; }
.car-meta { font-size: 20px; color: var(--mute); line-height: 1.4; margin-top: 2px; }
.car-title, .car-meta, .tile .cap b { overflow-wrap: break-word; hyphens: auto; }   /* långa ord (Månskenspromenad) ska aldrig ge sidoscroll på smala skärmar */
.car-buy { grid-column: 3; text-align: right; }
.car-buy .btn { min-width: 0; }

/* Med JS ligger alla bilder i samma ruta; bara den aktiva syns. Först tonas den gamla ut (snabbt),
   sedan tonas den nya in (långsamt) – som en mjuk andning, utan rörelse i sidled. */
.js .slide { margin-bottom: 0; }
.js .car-track { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.js .slide.is-active { opacity: 1; visibility: visible; transition: opacity .85s ease .3s, visibility 0s; }
.js .car-track.no-anim .slide { transition: none; }

/* Pilar: tunna linjer utan cirkel eller ram */
.car-btn { display: none; position: absolute; top: calc(var(--stage) / 2); transform: translateY(-50%); z-index: 2; width: 76px; height: 132px; place-items: center; color: var(--ink); opacity: .6; transition: opacity .5s ease; }
.js .car-btn { display: grid; }
.car-btn svg { width: 28px; height: 56px; overflow: visible; }
.car-btn svg path { vector-effect: non-scaling-stroke; }
@media (hover: hover) { .car-btn:hover { opacity: 1; } }
.car-btn:focus-visible { opacity: 1; outline-offset: -6px; }
.car-btn.prev { left: 20px; }
.car-btn.next { right: 20px; }

/* ---------- Rastret ---------- */

.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px var(--gap); width: min(var(--wrap), calc(100% - 2 * var(--pad))); margin: 0 auto;
}
/* Konst & Textil: alla fyra kategorier på samma rad så att inget döljs under skärmkanten */
.grid.hub { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; width: min(1240px, calc(100% - 2 * var(--pad))); }
/* Hela sidan (bilder, knapp och sidfot) ska rymmas utan scroll: bilderna krymper om fönstret är lågt, och sidfoten ligger tätt under dem */
@supports (width: clamp(1px, 2px, 3px)) {
  .grid.hub { width: clamp(760px, calc((100vh - 590px) * 3.2 + 84px), min(1240px, calc(100% - 2 * var(--pad)))); }
  @supports (height: 100dvh) { .grid.hub { width: clamp(760px, calc((100dvh - 590px) * 3.2 + 84px), min(1240px, calc(100% - 2 * var(--pad)))); } }
}
.page-hub .ftr { margin-top: 56px; padding-bottom: 20px; }
.page-hub .ftr .fine { margin-top: 28px; }
.page-hub .ftr .ig { margin-top: 6px; }
.page-head.compact { padding: 22px 0 28px; }

.tile { display: block; }
.tile .ph { position: relative; aspect-ratio: 4 / 5; background: var(--wash); overflow: hidden; }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .9s cubic-bezier(.2, .6, .2, 1); }
.tile:hover .ph img { opacity: .9; transform: scale(1.015); }
.tile .ph.coaster { background: var(--wash); }
.tile .ph.coaster img { object-fit: contain; height: auto; position: absolute; inset: 0; margin: auto; padding: 1%; box-sizing: border-box; }   /* bilden har egen marginal för skuggan */
.tile .cap { margin-top: 16px; text-align: center; }
.tile .cap b { display: block; font-weight: 400; font-size: 19px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; }
.tile .cap i { display: block; font-size: 19px; color: var(--mute); line-height: 1.35; margin-top: 3px; }

/* ---------- Text & knappar ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 260px; min-height: 62px; padding: 12px 32px;
  border: 1.5px solid var(--ink);
  font-size: 18px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background .2s, color .2s;
}
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--bg); } }
.btn.wide { display: flex; width: 100%; }

.crumbs { padding: 6px 0 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); line-height: 1.5; }
.crumbs a { white-space: nowrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.crumbs .sep { margin: 0 .3em 0 .7em; }
.crumbs { overflow-wrap: anywhere; }

.page-head { text-align: center; padding: 52px var(--pad) 64px; }
.page-head h1 { font-size: 22px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; font-weight: 700; }
.page-head p { max-width: 660px; margin: 24px auto 0; font-size: 22px; line-height: 1.7; color: var(--mute); }

.prose p { font-size: 22px; line-height: 1.75; margin-bottom: 1.3em; }
.prose a { border-bottom: 1.5px solid currentColor; }
.prose a:hover { opacity: .65; }
.center { text-align: center; }

/* ---------- Produktsida ---------- */

.pdp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 30px; }
.pdp .crumbs { grid-column: 1 / -1; }
.pdp-img { grid-column: 1 / 7; background: var(--wash); }
.pdp-img img { width: 100%; }
.pdp-info { grid-column: 7 / 13; padding-top: 6px; }
.pdp-info h1 { font-size: 24px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; margin-bottom: 6px; font-weight: 700; }
.pdp-info p.kicker { font-size: 18px; line-height: 1.6; margin: 0 0 26px; }
.pdp-info p { font-size: 22px; line-height: 1.7; margin-bottom: 1.2em; }
.pdp-info h2 { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin: 32px 0 8px; }
.pdp-info em { display: block; font-size: 21px; color: var(--mute); margin: 28px 0 32px; line-height: 1.65; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 88px 0 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.pager a { padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.pager a:hover { border-bottom-color: currentColor; }

/* ---------- Om, Kontakt, Utställningar ---------- */

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.split .l { grid-column: 1 / 6; }
.split .r { grid-column: 7 / 13; }
.block { margin-top: 96px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.shot { background: var(--wash); }
.shot img { width: 100%; }
.h-caps { font-size: 22px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; margin-bottom: 22px; font-weight: 700; }
/* Bilderna fördelas i build-skriptet på kolumner som blir lika höga – inga tomma ytor längst ned */
.masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.masonry .mcol { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--gap); align-content: stretch; }   /* kortare kolumner växer några procent så att alla slutar på samma linje */
.masonry figure { margin: 0; display: flex; min-width: 0; }
.masonry figure a.zoom { flex: 1; min-width: 0; }
.masonry figure img { height: 100%; object-fit: cover; }
/* Brickor: varje bricka i sitt eget format (liggande brickor liggande), bildtext under bilden */
.masonry.trays .mcol, .masonry.nat .mcol { align-content: start; }   /* egna proportioner, kolumnerna sträcks inte */
.masonry.nat figure img { height: auto; object-fit: initial; }
.masonry.trays figure { display: block; }
.masonry.trays .tile .ph { aspect-ratio: auto; }
.masonry.trays .tile .ph img { height: auto; object-fit: initial; }
/* Bildtext: ett band längst ned på bilden som tonas in vid hover/fokus (alltid synlig på pekskärm) */
.capfig { position: relative; margin: 0; }
.capfig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px 16px;
  background: rgba(102, 92, 46, .92); color: #fff; font-size: 19px; line-height: 1.4; text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.capfig:hover figcaption, .capfig:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .capfig figcaption { opacity: 1; transform: none; } }
/* Mobil: bildtexten ligger under bilden (på de små rutorna täckte bandet halva bilden) */
@media (max-width: 900px) {
  .capfig figcaption { position: static; opacity: 1; transform: none; transition: none; pointer-events: auto; background: none; color: var(--ink); padding: 8px 2px 0; font-size: 15px; line-height: 1.35; }
  .masonry figure.capfig { flex-direction: column; }
  .masonry figure.capfig a.zoom { flex: 1 1 auto; }
}
.capfig a.zoom::after { top: 12px; bottom: auto; }   /* plustecknet uppe till höger så det inte hamnar under bildtexten */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--wash); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Sidfot ---------- */

.ftr { margin-top: 128px; padding: 0 var(--pad) 48px; text-align: center; }
.ftr .fine { margin-top: 44px; font-size: 18px; letter-spacing: .06em; line-height: 1.7; color: var(--mute); }
.ftr .fine a:hover { color: var(--ink); text-decoration: underline; }
.ftr .ig { display: inline-block; margin-top: 20px; padding: 8px; }
.ftr .ig svg { width: 28px; height: 28px; display: block; }

/* ---------- Mobil ---------- */

@media (max-width: 1320px) {
  :root { --hdr: 88px; }
  .burger { display: block; }
  .nav { display: none; }
  .logo { width: 156px; }
}
@media (max-width: 900px) {
  :root { --pad: 16px; --gap: 14px; }
  body { font-size: 21px; }
  main { padding-top: calc(var(--hdr) + 20px); }
  body.page-car main { padding-top: calc(var(--hdr) + 14px); }
  .car { --stage: max(300px, calc(100vh - var(--hdr) - 300px)); --stage: max(300px, calc(100dvh - var(--hdr) - 300px)); }
  .slide { padding: 0 var(--pad); }
  .car-cap { display: block; text-align: center; padding-top: 14px; }
  .car-name { padding: 0 56px; }
  .car-buy { text-align: center; margin-top: 16px; }
  .car-btn { top: calc(var(--stage) + 14px); transform: none; width: 56px; height: 84px; }
  .car-btn svg { width: 22px; height: 44px; }
  .car-btn.prev { left: var(--pad); }
  .car-btn.next { right: var(--pad); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
  .grid.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); width: calc(100% - 2 * var(--pad)); }
  .page-hub .ftr { margin-top: 56px; }
  .tile .cap { margin-top: 10px; }
  .tile .cap b { font-size: 18px; letter-spacing: .04em; }
  .tile .cap i { font-size: 18px; }
  .btn { min-width: 240px; }
  .page-head { padding: 36px var(--pad) 40px; }
  .page-head p, .prose p, .pdp-info p { font-size: 21px; }
  .pdp { row-gap: 22px; }
  .pdp-img, .pdp-info { grid-column: 1 / -1; }
  .pager { padding-top: 56px; flex-wrap: wrap; }
  .split .l, .split .r { grid-column: 1 / -1; }
  .split .r { margin-top: 28px; }
  .block { margin-top: 56px; }
  .masonry { grid-template-columns: 1fr; }   /* utan JS; med JS fördelas bilderna på två kolumner */
  .ftr { margin-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .slide, .js .slide.is-active { transition: none; }
  * { transition: none !important; }
}

/* ---------- Stor bildvy – som "Zoom" på abomestudio.com: hela skärmen, bilden så stor det går ---------- */

a.zoom { position: relative; display: block; cursor: zoom-in; }
.stage a.zoom { display: flex; justify-content: center; height: 100%; max-width: 100%; }
.tile[data-zoom] { cursor: zoom-in; }
/* Ett diskret plustecken visar att bilden går att förstora (alltid synligt på pekskärm, annars vid hover/fokus) */
a.zoom::after, .tile[data-zoom] .ph::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat,
    rgba(var(--bg-rgb), .9);
  opacity: 0; transition: opacity .4s ease;
}
a.zoom:hover::after, a.zoom:focus-visible::after,
.tile[data-zoom]:hover .ph::after, .tile[data-zoom]:focus-visible .ph::after { opacity: 1; }
@media (hover: none) { a.zoom::after, .tile[data-zoom] .ph::after { opacity: .92; } }

body.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 400; background: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
/* Kolumn: bilden tar den plats som blir över, bildtexten under växer med sin text (långa faktarader ryms utan att täcka bilden) */
.lb { display: flex; flex-direction: column; }
.lb-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 56px 104px 0; display: flex; align-items: center; justify-content: center; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .35s ease; }
.lb-stage img.is-fading { opacity: 0; }
.lb-stage img.is-soft { opacity: .92; }
.lb button { color: var(--ink); }
.lb-close { position: absolute; top: 8px; right: 8px; width: 68px; height: 68px; display: grid; place-items: center; opacity: .75; transition: opacity .3s ease; }
.lb-close svg { width: 30px; height: 30px; overflow: visible; }
.lb-close svg path, .lb-btn svg path { vector-effect: non-scaling-stroke; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 76px; height: 132px; display: grid; place-items: center; opacity: .6; transition: opacity .5s ease; }
.lb-btn svg { width: 28px; height: 56px; overflow: visible; }
.lb-btn.prev { left: 12px; }
.lb-btn.next { right: 12px; }
@media (hover: hover) { .lb-close:hover, .lb-btn:hover { opacity: 1; } }
.lb-close:focus-visible, .lb-btn:focus-visible { opacity: 1; }
.lb.single .lb-btn { display: none; }
.lb-bar { position: relative; flex: none; padding: 16px var(--pad) 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.lb-cap { grid-column: 2; text-align: center; max-width: min(1000px, 66vw); }
.lb-title { font-size: 21px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1.3; }
.lb-meta { font-size: 20px; line-height: 1.4; margin-top: 2px; }
.lb-buy { grid-column: 3; text-align: right; }
.lb-buy .btn { min-width: 0; }
.lb-buy[hidden] { display: none; }

@media (max-width: 900px) {
  .lb-stage { margin: 60px 12px 0; }
  .lb-bar { display: block; text-align: center; padding: 12px 76px 18px; }
  .lb-cap { max-width: none; }
  .lb-title { font-size: 18px; letter-spacing: .06em; }
  .lb-meta { font-size: 18px; line-height: 1.35; max-height: 24vh; }
  .lb-links a { font-size: 18px; margin-top: 4px; }
  .lb-buy .btn { min-height: 46px; padding: 6px 14px; font-size: 16px; }
  .lb-buy { text-align: center; margin: 14px -60px 0; }
  .lb-btn { top: auto; bottom: 86px; transform: none; width: 56px; height: 92px; }
  .lb-btn svg { width: 22px; height: 44px; }
  .lb-btn.prev { left: 8px; }
  .lb-btn.next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb.is-open, .lb-stage img { transition: none; }
}

/* ---------- Kategorisidor: "Visa alla" och översikten ---------- */

.car-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.btn.btn-sm { min-width: 0; min-height: 50px; padding: 8px 26px; }
.car-top .btn { margin-left: auto; }   /* uppe till höger, även när den bryts till egen rad på mobil */
body.ov-lock { overflow: hidden; }

/* Översikten: alla verk i egen proportion (aldrig beskurna). Utan JS är den en vanlig sektion under karusellen. */
.ov { padding-top: 88px; }
.ov-close { display: none; }
.ov-in { width: min(1240px, calc(100% - 2 * var(--pad))); margin: 0 auto; }
.ov-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 32px; margin-top: 44px; }
.ov-grid a { display: block; }
.ov-grid img { height: 250px; width: auto; max-width: none; transition: opacity .3s ease; }
@media (hover: hover) { .ov-grid a:hover img { opacity: .82; } }
.ov-grid span { display: block; width: 0; min-width: 100%; margin-top: 10px; text-align: center; font-size: 18px; line-height: 1.35; }

.js .ov { display: none; position: fixed; inset: 0; z-index: 350; background: var(--bg); overflow-y: auto; padding: 84px 0 64px; overscroll-behavior: contain; }
.js .ov.is-open { display: block; animation: ov-in .35s ease both; }
.js .ov-close { display: grid; position: fixed; top: 8px; right: 8px; z-index: 2; width: 68px; height: 68px; place-items: center; color: var(--ink); opacity: .75; transition: opacity .3s ease; }
.ov-close svg { width: 30px; height: 30px; overflow: visible; }
.ov-close svg path { vector-effect: non-scaling-stroke; }
@media (hover: hover) { .ov-close:hover { opacity: 1; } }
.ov-close:focus-visible { opacity: 1; }
@keyframes ov-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .ov-grid { gap: 36px 16px; margin-top: 32px; }
  .ov-grid img { height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .js .ov.is-open { animation: none; } }

/* ---------- Efter Anna Marias genomgång 2026-10-03 ---------- */

/* Såld: verket visas ändå, men utan köpknapp */
.sold-tag { display: inline-block; padding: 12px 26px; border: 1.5px solid var(--ink); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.lb-meta { white-space: pre-line; }                       /* flera rader (art.nr, mått) i den stora bildvyn */
.car-meta { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Produktsida: mått och art.nr under titeln */
.pdp-info p.pdp-meta { font-size: 21px; line-height: 1.5; margin: 0 0 8px; }

/* Bild med synlig bildtext under (Konstnären, Ringparksstugan) */
.fig-under { margin: 0; }
.fig-under figcaption { margin-top: 14px; font-size: 19px; line-height: 1.5; text-align: center; }
.fig-under.sea, .fig-under.ring { width: min(560px, 100%); margin: 0 auto; }
.fig-under.ring { margin-top: 32px; }
.fig-under .shot, .fig-under a.zoom { background: var(--wash); }
/* Två bilder sida vid sida (Saltsjöbladets framsida och sid. 8 på Utställningar) */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 960px; margin: 36px auto 0; align-items: start; }
@media (max-width: 700px) { .pair { grid-template-columns: 1fr; } }

/* Konstnären: bredare textkolumn ("för smal kolumn") */
.split.about .l { grid-column: 1 / 6; }
.split.about .r { grid-column: 6 / 13; }
.narrow.wide { width: min(780px, calc(100% - 2 * var(--pad))); }
.prose p { hyphens: manual; }

/* Beställningsinformation under Konst Original och Brickor */
.order { margin-top: 120px; }
.order p { font-size: 22px; line-height: 1.7; margin: 0 0 1em; }
.order p.small { font-size: 20px; margin-top: 14px; }
.order .h-caps.sub-h { margin-top: 64px; }
.order-link { margin-top: 8px; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.order-link a { border-bottom: 1.5px solid transparent; padding-bottom: 2px; }
.order-link a:hover { border-bottom-color: currentColor; }
.ptab { width: 100%; border-collapse: collapse; margin: 22px 0 6px; font-size: 21px; line-height: 1.4; }
.ptab th, .ptab td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 400; }
.ptab th:first-child, .ptab td:first-child { text-align: left; }
.ptab thead th { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); }
.olist { margin: 6px 0 22px; }
.olist li { padding: 7px 0; font-size: 22px; line-height: 1.5; border-bottom: 1px solid var(--line); }

/* Köpvillkor & GDPR: luftigt, tydliga avsnitt (Anna Maria: "mellanrum") */
.terms { font-size: 21px; line-height: 1.7; }
.terms h1 { margin-bottom: 48px; }
.terms h2 { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; line-height: 1.4; margin: 64px 0 18px; }
.terms h3 { font-size: 21px; font-weight: 700; line-height: 1.45; margin: 44px 0 12px; }
.terms h4 { font-size: 21px; font-weight: 700; font-style: italic; line-height: 1.45; margin: 34px 0 10px; }
.terms p { margin: 0 0 1.3em; }
.terms ul { margin: 0 0 1.6em; }
.terms li { position: relative; margin: 0 0 1.3em; padding-left: 26px; }
.terms li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.terms a { border-bottom: 1.5px solid currentColor; overflow-wrap: anywhere; }
.terms a:hover { opacity: .65; }

@media (max-width: 900px) {
  .split.about .l, .split.about .r { grid-column: 1 / -1; }
  .order { margin-top: 84px; }
  .ptab { font-size: 19px; }
  .ptab th, .ptab td { padding: 10px 8px; }
  .ptab thead th { font-size: 17px; letter-spacing: .04em; }
  .terms { font-size: 20px; }
}

/* Konstnären: fotot från 1981 under porträttet; två knappar bredvid varandra (Boo kyrka) */
.split.about .l .fig-under { background: transparent; }
.split.about .l .fig-under.hat { margin: 36px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Kontakt: texten i mitten, teckningarna på sidorna – genomskinliga, utan färgad ruta */
.contact { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 280px); gap: 28px 56px; align-items: center; margin-top: 34px; width: min(1320px, calc(100% - 2 * var(--pad))); }
.contact .cfig a.zoom { background: none; }
.contact .cfig img { width: 100%; height: auto; }
.contact .cfig.a, .contact .cfig.c { justify-self: start; }
.contact .cfig.b, .contact .cfig.d { justify-self: end; }
.contact .ctext { max-width: 640px; margin: 0 auto; }
.contact .ctext p { text-wrap: balance; }
.contact .lines span { display: block; }
.contact .ctext h1, .contact .ctext h2 { margin-bottom: 14px; }
.contact .ctext .prose p { margin-bottom: .9em; }
@media (max-width: 900px) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gap); margin-top: 30px; }
  .contact .ctext { grid-column: 1 / -1; padding: 8px 0; }
  /* ordning på mobil: kontakttext, två figurer, ateljétext, två figurer */
  .contact .c1 { order: 1; } .contact .cfig.a { order: 2; } .contact .cfig.b { order: 3; }
  .contact .c2 { order: 4; } .contact .cfig.c { order: 5; } .contact .cfig.d { order: 6; }
  .contact .cfig.a, .contact .cfig.c { justify-self: center; }
  .contact .cfig.b, .contact .cfig.d { justify-self: center; }
  .contact .cfig { width: 100%; max-width: 220px; }
}
.prose.intro p { font-size: 21px; line-height: 1.65; margin-bottom: .9em; }

/* ---------- Startsidan: ansiktet (genomskinlig lagerbild) svävar mjukt över bakgrunden ---------- */
/* Två lager: bakgrunden (.hero-bg) och den friskurna gröna masken (.hero-fg img). Masken rör sig långsamt i en liten mjuk cirkel
   och gungar några tiondels grader – aldrig snabbare än att man knappt märker det. Avstängt för den som valt "minska rörelse". */
.hero-fg img {
  --orbit: clamp(6px, 1vmin, 13px);
  filter: drop-shadow(0 16px 24px rgba(40, 46, 20, .22));
  will-change: transform;
  animation: orbit 24s linear infinite, sway 34s ease-in-out infinite;
}
@keyframes orbit { from { transform: rotate(0deg) translateX(var(--orbit)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--orbit)) rotate(-360deg); } }
@keyframes sway { 0%, 100% { rotate: -.9deg; } 50% { rotate: .9deg; } }
@media (prefers-reduced-motion: reduce) { .hero-fg img { animation: none; will-change: auto; } }

/* Bildvyn: långa faktarader får egen rullning, länkar under */
.lb-meta { max-height: 36vh; overflow-y: auto; }
.lb-links:empty { display: none; }
.lb-links { margin-top: 6px; }
.lb-links a { display: inline-block; margin: 6px 12px 0; font-size: 20px; line-height: 1.4; border-bottom: 1.5px solid currentColor; }
.lb-links a:hover { opacity: .65; }

/* Glasunderlägg: minibrickan ovanifrån (genomskinlig bild med skuggan inbakad) i tre kolumner, två på mobil. Brickan är 89 % av
   bildens bredd – bilden görs större än rutan så att själva brickan fyller den och skuggan får plats utanför. */
.coaster-order .coasters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; margin: 44px auto 52px; max-width: 1000px; }
.coaster-order .cst { text-align: center; }
.coaster-order .cst a.zoom { display: block; max-width: 300px; margin: 0 auto; background: none; }
.coaster-order .cst img { width: 112.4%; max-width: none; height: auto; margin: -6.2%; }
.coaster-order .cst p { margin: 14px 0 0; font-size: 20px; line-height: 1.35; }
.coaster-order .narrow p.small { margin-top: 14px; }
@media (max-width: 900px) { .coaster-order .coasters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; margin: 32px auto 40px; } .coaster-order .cst p { font-size: 18px; } }

/* Kontakt: de fyra teckningarna svävar som ansiktet på startsidan men i egen takt (aldrig i takt med varandra).
   2026-10-04: ca 1,5 gånger större rörelse och ca 25 % snabbare än första versionen, fortfarande mjukt. */
.contact .cfig img {
  --orbit: clamp(4px, .65vmin, 9px);
  will-change: transform;
  animation: orbit var(--dur, 21s) linear infinite var(--dir, normal), sway-c var(--sdur, 28s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--sdelay, 0s);
}
@keyframes sway-c { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
.contact .cfig.a img { --dur: 19s; --sdur: 28s; --delay: -4s;  --sdelay: -9s; }
.contact .cfig.b img { --dur: 23s; --sdur: 31s; --delay: -17s; --sdelay: -22s; --dir: reverse; }
.contact .cfig.c img { --dur: 22s; --sdur: 26s; --delay: -11s; --sdelay: -3s;  --dir: reverse; }
.contact .cfig.d img { --dur: 26s; --sdur: 32s; --delay: -23s; --sdelay: -15s; }
/* Teckningarna går att förstora, men plustecknet syntes bara vid hover: här syns det alltid (diskret) så att besökaren förstår att man kan klicka (Anna Maria 2026-10-06) */
.contact .cfig a.zoom::after { opacity: .6; }
.contact .cfig a.zoom:hover::after, .contact .cfig a.zoom:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .contact .cfig img { animation: none; will-change: auto; } }