/* Butikens startsida: hyllorna (/butiken). Ryggarna är länkar; hyllplan.js drar ut boken. Inga inline-stilar (CSP):
   färg och storlek är klasser som src/butiken/hyllplan.tsx väljer ur SKU:n. Raka hörn, som resten av butiken. */

:root { --hp-back: #E4D3AE; --hp-board: #8a5a3a; --hp-edge: #3a2018; }
:root[data-theme=dark] { --hp-back: #2c201a; --hp-board: #5e3b25; --hp-edge: #110b09; }

/* Bredare än textspalten, men aldrig bredare än fönstret. */
html { overflow-x: clip; }
/* Ingen transform: den skulle göra panelen (position: fixed på smala skärmar) relativ till den här rutan. */
.hyllplan { --hp-w: min(1360px, calc(100vw - 48px)); width: var(--hp-w); margin-left: calc(50% - var(--hp-w) / 2); padding: 28px 0 30px; }

.hp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: 26px; }
.hp-head h1 { margin: 0; }
.hp-lead { margin: 8px 0 0; color: var(--muted); max-width: 640px; line-height: 1.6; }
.hp-search { flex: 0 1 460px; min-width: 280px; display: flex; gap: 8px; }
.hp-search input { flex: 1; min-height: 52px; font-size: 19px; }
.hp-search .btn { min-height: 52px; }
.hp-empty { padding: 28px; background: var(--card); border-top: 3px solid var(--maroon); }

.hp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 32px; align-items: start; }

/* Hyllor och författare. */
.hp-side h2 { font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); margin: 0 0 8px; }
.hp-side h2:not(:first-child) { margin-top: 28px; }
.hp-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hp-side a {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px; padding: 4px 12px;
  text-decoration: none; font-size: 19px; line-height: 1.25; border-left: 3px solid transparent;
}
.hp-side a span:last-child { color: var(--soft); font-size: 16px; }
.hp-side a:hover { background: var(--card); }
.hp-side a[aria-current] { background: var(--card); border-left-color: var(--maroon); color: var(--maroon); font-weight: 600; }
@media (min-width: 761px) { .hp-side { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; } }

/* Hyllan: ryggar på en bräda. */
.hp-shelves { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.hp-shelf[hidden] { display: none; }
.hp-shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; border-bottom: 1px solid var(--accent-line); padding-bottom: 6px; margin-bottom: 10px; }
.hp-shelf-head h2 { margin: 0; font-size: clamp(26px, 2.6vw, 32px); }
.hp-shelf-head a { font-size: 16px; letter-spacing: .06em; color: var(--maroon); }
.hp-books {
  list-style: none; margin: 0; padding: 34px 18px 0; display: flex; gap: 3px; align-items: flex-end;
  overflow-x: auto; overflow-y: hidden; background: var(--hp-back); border: 1px solid var(--hp-edge); border-bottom: 0;
}
.hp-books li { flex: 0 0 auto; display: flex; align-items: flex-end; }
.hp-board { height: 16px; background: var(--hp-board); border: 1px solid var(--hp-edge); border-top: 3px solid var(--hp-edge); }

.hp-spine {
  position: relative; display: block; overflow: hidden; color: #F6EEDC; text-decoration: none; background: var(--c, #6E2433);
  border-left: 3px solid rgba(255, 255, 255, .18); border-right: 2px solid rgba(0, 0, 0, .35);
  transition: transform .2s;
}
.hp-spine:hover { transform: translateY(-8px); }
.hp-spine:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hp-spine.is-out { transform: translateY(-22px); outline: 2px solid var(--gold); outline-offset: 2px; }
.hp-w0 { width: 42px; } .hp-w1 { width: 50px; } .hp-w2 { width: 60px; }
.hp-h0 { height: 190px; } .hp-h1 { height: 208px; } .hp-h2 { height: 226px; } .hp-h3 { height: 244px; }
.hp-spine img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.hp-t, .hp-a { position: absolute; left: 0; right: 0; writing-mode: vertical-rl; margin: 0 auto; width: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-t { top: 12px; bottom: 56px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 18px; line-height: 1.2; }
.hp-a { bottom: 10px; max-height: 42px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.hp-c0 { --c: #6E2433; } .hp-c1 { --c: #2f5d62; } .hp-c2 { --c: #4b3a6b; } .hp-c3 { --c: #3a2018; }
.hp-c4 { --c: #8a5a2b; } .hp-c5 { --c: #a8452f; } .hp-c6 { --c: #2d5a8a; } .hp-c7 { --c: #3d6b3a; }
.hp-c8 { --c: #1f3a4d; } .hp-c9 { --c: #5a2a2a; } .hp-c10 { --c: #2f6b4f; } .hp-c11 { --c: #6b4a1f; }

/* Den utdragna boken. */
.hp-panel {
  position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow-y: auto; background: var(--card); border-top: 3px solid var(--maroon);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 360px;
}
.hp-panel-empty { margin: auto; max-width: 240px; text-align: center; color: var(--muted); line-height: 1.5; }
.hp-pos-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hp-pos { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon); }
.hp-close { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--ink); color: var(--ink); font: inherit; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hp-close:hover { background: var(--ink); color: var(--cream); }
.hp-flip { display: flex; align-items: center; gap: 10px; }
.hp-step { flex: 0 0 46px; height: 56px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.hp-step:hover { background: var(--ink); color: var(--cream); }
.hp-cover {
  text-decoration: none;
  flex: 1; min-width: 0; aspect-ratio: 2 / 3; position: relative; overflow: hidden; background: var(--c, #6E2433); color: #F6EEDC;
  border-left: 10px solid rgba(0, 0, 0, .28); box-shadow: 4px 4px 0 var(--hp-edge); display: flex; flex-direction: column; padding: 18px 14px;
}
.hp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hp-cover-t { position: relative; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 28px; line-height: 1.05; }
.hp-cover-a { position: relative; margin-top: auto; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.hp-cover-stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 14px, transparent 14px 30px); }
.hp-panel h2 { font-size: 30px; margin: 4px 0 0; }
.hp-panel h2 a { text-decoration: none; }
.hp-panel .hp-by { margin: 0; color: var(--muted); }
.hp-panel .hp-facts { margin: 0; color: var(--soft); font-size: 17px; }
.hp-panel .hp-text { margin: 0; line-height: 1.55; }
.hp-panel .hp-note { margin: 0; font-size: 17px; color: var(--muted); }
.hp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.hp-price { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 36px; line-height: 1; }
.hp-buy form { margin: 0; }
.hp-added { margin: 0; color: var(--ok); font-size: 17px; }
.hp-panel .hp-page { font-size: 17px; }

@media (prefers-reduced-motion: reduce) { .hp-spine { transition: none; } }

/* Smalare fönster: hyllorna får bredden, den utdragna boken blir ett ark från nederkanten. */
@media (max-width: 1120px) {
  .hp-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .hp-panel {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; max-height: 64vh; overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); min-height: 0;
  }
  .hp-panel .hp-flip { max-width: 300px; margin: 0 auto; width: 100%; }
  /* Utan vald bok finns inget ark att visa. */
  .hp-panel:has(> .hp-panel-empty) { display: none; }
}
@media (max-width: 760px) {
  .hyllplan { --hp-w: calc(100vw - 32px); }
  .hp-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hp-side ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .hp-side a { border: 1px solid var(--accent-line); padding: 4px 12px; font-size: 17px; gap: 8px; }
  .hp-side a[aria-current] { border-color: var(--maroon); }
  .hp-side h2:not(:first-child) { margin-top: 18px; }
}

/* Favoriter: hjärtat i den utdragna boken, på bokens sida och på favoritsidan. */
.hp-head-side { flex: 0 1 460px; min-width: 280px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.hp-head-side .hp-search { flex: none; min-width: 0; }
.hp-favlink { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; text-decoration: none; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); }
.hp-favlink:hover { text-decoration: underline; }
.hp-favlink svg { fill: none; }
.hp-heart, .fav-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font: inherit; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--maroon); border: 1px solid var(--accent-line); border-radius: 0; cursor: pointer;
}
.hp-heart svg, .fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.hp-heart:hover, .fav-btn:hover { border-color: var(--maroon); }
.hp-heart.is-on, .fav-btn.is-on { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.hp-heart.is-on svg, .fav-btn.is-on svg { fill: currentColor; }
.fav-btn { margin-top: 12px; }
.hp-heart:focus-visible, .fav-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Hyllor som hämtas när man scrollar dit. */
.hp-books--lazy { min-height: 244px; align-items: center; }
.hp-wait { padding: 0 8px; color: var(--soft); }

.fav-page { padding: 28px 0 40px; }
.fav-page h1 { margin: 0; }
.fav-empty { padding: 24px; background: var(--card); border-top: 3px solid var(--maroon); }
.fav-page .book-card { position: relative; }
.fav-remove { display: block; width: 100%; min-height: 44px; margin-top: 6px; font: inherit; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--maroon); border: 1px solid var(--accent-line); cursor: pointer; }
.fav-remove:hover { border-color: var(--maroon); }

/* Listor som hyllor (sök, genre, författare): raderna i resultatspalten, den utdragna boken bredvid. Utan JavaScript
   (ingen .js på <html>) visas galleriet i stället. */
.hp-layout--list { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.hp-layout--list .hp-shelves { gap: 22px; }
html:not(.js) .hp-onlyjs { display: none; }
.hp-nojs { display: none; }
html:not(.js) .hp-nojs { display: block; }
@media (max-width: 1120px) {
  .hp-layout--list { grid-template-columns: minmax(0, 1fr); }
}

/* Hopfällda hyllor och författare på mobil (bara med JavaScript): en knapp med vald hylla, listorna först när man öppnar. */
.hp-fold-toggle { display: none; }
@media (max-width: 1120px) {
  .js .hp-fold-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
    padding: 12px 16px; background: var(--card); color: var(--maroon); border: 1px solid var(--line); cursor: pointer;
    font-family: inherit; font-size: 15px; letter-spacing: .13em; text-transform: uppercase; text-align: left;
  }
  .js .hp-fold-toggle::after { content: '+'; font-size: 20px; line-height: 1; letter-spacing: 0; }
  .js .hp-fold.open .hp-fold-toggle::after { content: '−'; }
  .js .hp-fold-count { margin-left: auto; font-size: 13.5px; background: var(--wine); color: var(--paper); padding: 2px 8px; white-space: nowrap; }
  .js .hp-fold:not(.open) .hp-fold-body { display: none; }
  .js .hp-fold.open .hp-fold-body { margin-top: 12px; }
}

/* Märken (Ny, Signerad, Förstaupplaga, Bokpaket): ett band överst på ryggen, och som etiketter i den utdragna boken och på korten. */
.hp-badge {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 3px 0 4px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; background: var(--gold); color: #2a1a10; overflow: hidden; white-space: nowrap;
}
.hp-badge--ny { background: #F6EEDC; }
.hp-badge--sig { background: var(--gold); }
.hp-badge--forsta { background: #c9a44a; }
.hp-badge--paket { background: #d9cdb2; }
.hp-badge--sankt { background: var(--wine); color: var(--paper); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hp-chip { display: inline-block; padding: 3px 10px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: #2a1a10; }
.hp-chip--ny { background: var(--wine); color: var(--paper); }
.hp-chip--sankt { background: var(--wine); color: var(--paper); }
.book-card-chips { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.book-card-chips .hp-chip { font-size: 12px; padding: 2px 8px; }
.book-card-media { position: relative; }

/* Scenen följer antalet: skyltfönster (1-3 böcker, framsidorna ut), författarhylla (4-9) och vägg (fler, rader om 8). */
.hp-spine.hp-front { width: 150px; height: 224px; border-left-width: 6px; border-radius: 0; box-shadow: 6px 6px 0 var(--hp-edge); }
.hp-front .hp-t { writing-mode: horizontal-tb; position: relative; top: auto; bottom: auto; width: auto; margin: 14px 10px 0; white-space: normal; font-size: 22px; }
.hp-front .hp-a { writing-mode: horizontal-tb; width: auto; max-height: none; left: 10px; right: 10px; }
.hp-front .hp-badge { top: auto; bottom: 0; }
.hp-scene--window .hp-books { padding: 34px 28px 0; gap: 28px; justify-content: center; background: linear-gradient(var(--hp-back), color-mix(in srgb, var(--hp-back) 80%, #fff)); }
.hp-scene--window .hp-spine:hover { transform: translateY(-6px); }
.hp-scene--shelf .hp-books { justify-content: center; }
.hp-long .hp-t { font-size: 15px; }

/* Hyllremsan: en rad ryggar på en bräda, utan panel. */
.hp-strip { max-width: 100%; }
.hp-strip .hp-books { padding-top: 34px; }

/* Sortera hyllan (listhyllorna). */
.hp-sort { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin: 0 0 -8px; }
.hp-sort label { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.hp-sort select { min-height: 44px; font-size: 17px; max-width: 220px; }

/* Gång: en genre med många böcker är två hyllor över varandra (nedre hyllan fylls av samma svar som den övre). */
.hp-aisle-sign { margin: 0 0 8px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.hp-books--low:empty { display: none; }
.hp-books--low:empty + .hp-board { display: none; }
.hp-books--low { margin-top: 14px; }

/* Antal hjärtan i hela butiken, bredvid hjärtat. */
.fav-n { font-variant-numeric: tabular-nums; }
.fav-n:not(:empty) { margin-left: 2px; padding-left: 10px; border-left: 1px solid currentColor; }


/* Framåtvända böcker på hyllan (en av sex med omslagsfoto), och bläddringen längst ned i listan. */
.hp-books .hp-front { align-self: flex-end; }
.hp-more { margin: 18px 0 0; text-align: center; color: var(--soft); font-size: 17px; }

/* Hyllkänsla (2026-10-04): trä i brädan, skugga under den, ljus uppifrån på hyllbotten och rundning på ryggarna. Bara färg och skugga - kanterna är lika hårda. */
:root { --hp-grain: rgba(0, 0, 0, .07); --hp-light: rgba(255, 255, 255, .06); --hp-shadow: rgba(30, 14, 8, .38); }
:root[data-theme=dark] { --hp-grain: rgba(0, 0, 0, .25); --hp-light: rgba(255, 255, 255, .03); --hp-shadow: rgba(0, 0, 0, .6); }
.hp-board {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--hp-grain) 46px 47px, transparent 47px 131px),
    repeating-linear-gradient(0deg, var(--hp-grain) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, color-mix(in srgb, var(--hp-board) 82%, #fff) 0, var(--hp-board) 35%, color-mix(in srgb, var(--hp-board) 78%, #000) 100%);
  box-shadow: 0 12px 14px -9px var(--hp-shadow);
}
.hp-books {
  background: linear-gradient(180deg, color-mix(in srgb, var(--hp-back) 78%, #000) 0, var(--hp-back) 38%, color-mix(in srgb, var(--hp-back) 94%, #fff) 100%);
  box-shadow: inset 0 18px 20px -14px var(--hp-shadow);
}
.hp-spine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--hp-light) 0, rgba(255, 255, 255, .1) 14%, transparent 34%, rgba(0, 0, 0, .06) 62%, rgba(0, 0, 0, .24) 100%);
}
.hp-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(255, 255, 255, .08) 7%, transparent 22%); }
.hp-spine { box-shadow: 3px 0 5px -2px rgba(0, 0, 0, .35); }
.hp-spine:hover { box-shadow: 4px 10px 12px -6px var(--hp-shadow); }
.hp-spine.is-out { box-shadow: 5px 16px 16px -8px var(--hp-shadow); }
.hp-spine.hp-front { box-shadow: 6px 6px 0 var(--hp-edge); }
.hp-panel { box-shadow: 0 10px 22px -14px var(--hp-shadow); }

/* Tipsen i den tomma panelen (visas tills man dragit ut en bok första gången). */
.hp-panel-empty { margin: auto; max-width: 260px; text-align: center; color: var(--muted); line-height: 1.5; }
.hp-panel-empty p { margin: 0; }
.hp-tips { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); text-align: left; font-size: 16px; color: var(--soft); display: grid; gap: 6px; }
.hp-tips li::before { content: '\2022'; color: var(--gold-text); margin-right: 8px; }

/* Ryggens riktiga färg läses ur omslaget (hyllplan.js sätter --c); hp-c0..11 är bara startfärgen för böcker utan omslagsfoto. */

/* Inga rullningslister: raderna fylls efter bredd på listsidor, startsidans hyllor bläddras med pilarna (eller svepet på mobil). */
.hp-books { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.hp-books::-webkit-scrollbar { display: none; height: 0; }
.hp-rail { position: relative; }
.hp-pg {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 40px; height: 72px; padding: 0; font: inherit; font-size: 30px; line-height: 1;
  background: rgba(30, 20, 16, .82); color: var(--paper); border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; cursor: pointer;
}
.hp-pg:hover { background: var(--wine); }
.hp-pg:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hp-pg[hidden] { display: none; }
.hp-pg--prev { left: 4px; } .hp-pg--next { right: 4px; }
.hp-strip .hp-books > li[hidden] { display: none; }

/* Mobil: den utdragna boken är ett lågt ark (omslaget litet till vänster, texten till höger) i stället för ett som täcker skärmen,
   så hyllan syns ovanför och man kan bläddra utan att stänga. Gäller alla listor: start, sök, samlingar, Goodreads, favoriter.
   Samma ark på surfplatta (upp till 1120 px), med större omslag och bredare marginaler. */
@media (max-width: 1120px) {
  /* Den valda ryggen ska stå ovanför arket, inte bakom det (scrollIntoView räknar med marginalen). */
  .hp-spine { scroll-margin-bottom: 50vh; }
  .hp-panel { max-height: 46vh; padding: 12px 16px 16px; gap: 4px 14px; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-content: start; }
  .hp-panel > * { grid-column: 2; min-width: 0; }
  .hp-panel > .hp-pos-row { grid-column: 1 / -1; }
  .hp-panel > .hp-flip { grid-column: 1; grid-row: 2 / span 7; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: none; margin: 0; }
  .hp-panel .hp-cover { grid-column: 1 / -1; grid-row: 1; flex: none; width: 100%; padding: 8px 6px; border-left-width: 6px; box-shadow: 3px 3px 0 var(--hp-edge); }
  .hp-panel .hp-cover-t { font-size: 15px; }
  .hp-panel .hp-cover-a { font-size: 10px; letter-spacing: .08em; }
  .hp-panel .hp-step { grid-row: 2; flex: none; height: 40px; font-size: 22px; }
  .hp-panel h2 { font-size: 22px; margin: 0; line-height: 1.15; }
  .hp-panel .hp-facts { font-size: 15px; }
  .hp-panel .hp-text { font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hp-panel .hp-buy { padding-top: 8px; gap: 8px 12px; }
  .hp-panel .hp-price { font-size: 28px; }
  .hp-panel .hp-page { font-size: 15px; }
  /* Hjärtat bara som ikon och antal (etiketten finns kvar för skärmläsare), kundvagnsknappen på en egen rad. */
  .hp-panel .hp-heart { position: relative; padding: 0 12px; }
  .hp-panel .hp-heart .fav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hp-panel .hp-buy form { flex: 1 0 100%; }
  .hp-panel .hp-buy form .btn { width: 100%; }
}

/* Surfplatta (761-1120 px): hyllorna får hela bredden (listorna över hyllor och författare är hopfällda som på mobil, och visas som rader av
   knappar när de öppnas), och den utdragna boken är ett lågt ark med större omslag. */
@media (min-width: 761px) and (max-width: 1120px) {
  .hp-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hp-side ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .hp-side a { border: 1px solid var(--accent-line); padding: 4px 12px; font-size: 17px; gap: 8px; }
  .hp-side a[aria-current] { border-color: var(--maroon); }
  .hp-side h2:not(:first-child) { margin-top: 18px; }
  .hp-spine { scroll-margin-bottom: 52vh; }
  .hp-panel { max-height: 48vh; padding: 16px max(28px, calc(50vw - 420px)) 20px; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 22px; }
  .hp-panel > .hp-flip { gap: 8px; }
  .hp-panel .hp-cover-t { font-size: 17px; }
  .hp-panel .hp-step { height: 44px; }
  .hp-panel h2 { font-size: 28px; }
  .hp-panel .hp-facts { font-size: 16px; }
  .hp-panel .hp-text { -webkit-line-clamp: 4; font-size: 17px; }
  .hp-panel .hp-heart .fav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hp-panel .hp-buy form { flex: 0 1 auto; }
  .hp-panel .hp-buy form .btn { width: auto; }
}

/* Medan ett ark ligger över sidans nederkant (mobil och surfplatta) får sidan lika mycket luft nedtill. */
@media (max-width: 1120px) {
  html.hp-open body { padding-bottom: 52vh; }
}

/* Ryggen väntar på sin riktiga färg (ur omslagsfotot): neutral tills hyllplan.js målat den, och färgen tonas in i stället för att blinka. */
.hp-spine { transition: transform .2s, background-color .35s; }
.hp-pending { --c: #4d4038; }

/* Stor skärm (1500 px och uppåt): hyllorna använder bredden i stället för att stå som en smal remsa mitt på sidan - bredare sida, större ryggar
   och en bredare utdragen bok. Listsidor (sök, genre, författare) lämnar textspalten på 1140 px. */
@media (min-width: 1500px) {
  .hyllplan { --hp-w: min(1880px, calc(100vw - 120px)); }
  .hp-layout { grid-template-columns: 230px minmax(0, 1fr) 420px; gap: 36px; }
  .hp-layout--list { grid-template-columns: minmax(0, 1fr) 420px; }
  main.wrap:has(.listing .hp-layout--list) { max-width: min(1760px, calc(100vw - 96px)); }
  .hp-w0 { width: 48px; } .hp-w1 { width: 58px; } .hp-w2 { width: 70px; }
  .hp-h0 { height: 224px; } .hp-h1 { height: 246px; } .hp-h2 { height: 268px; } .hp-h3 { height: 290px; }
  .hp-spine.hp-front { width: 180px; height: 268px; }
  .hp-t { font-size: 21px; }
  .hp-a { font-size: 13px; }
  .hp-books { padding: 40px 24px 0; }
  .hp-shelf-head h2 { font-size: 34px; }
  .hp-side a { font-size: 20px; }
  .hp-panel { padding: 30px; gap: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .hp-panel h2 { font-size: 34px; }
  .hp-panel .hp-facts { font-size: 18px; }
  .hp-panel .hp-text { font-size: 18px; }
}
@media (min-width: 2100px) {
  .hyllplan { --hp-w: min(2260px, calc(100vw - 240px)); }
  .hp-layout { grid-template-columns: 260px minmax(0, 1fr) 480px; gap: 44px; }
  .hp-layout--list { grid-template-columns: minmax(0, 1fr) 480px; }
  main.wrap:has(.listing .hp-layout--list) { max-width: min(2100px, calc(100vw - 240px)); }
  .hp-w0 { width: 56px; } .hp-w1 { width: 68px; } .hp-w2 { width: 82px; }
  .hp-h0 { height: 262px; } .hp-h1 { height: 288px; } .hp-h2 { height: 314px; } .hp-h3 { height: 340px; }
  .hp-spine.hp-front { width: 210px; height: 314px; }
  .hp-t { font-size: 24px; }
  .hp-a { font-size: 15px; }
  .hp-books { padding: 46px 28px 0; }
  .hp-panel h2 { font-size: 38px; }
}


/* Märket sitter ovanför ryggen (utanför den), så att det inte täcker titeln; det följer med när ryggen lyfts. */
.hp-books li { position: relative; }
.hp-badge {
  top: auto; right: auto; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); padding: 3px 7px; pointer-events: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .28); transition: transform .2s;
}
.hp-spine:hover + .hp-badge { transform: translateX(-50%) translateY(-8px); }
.hp-spine.is-out + .hp-badge { transform: translateX(-50%) translateY(-22px); }
/* Fotot visas helt: inget beskärs, så att bokens alla hörn syns (duken får vara kvar). */
.hp-front > img { transform: none; object-fit: cover; object-position: 50% 50%; }

/* Utklipp (bokhylla roll "cutout": boken utan röd duk, genomskinlig bakgrund): boken står fri på hyllan, utan ram och bakgrund. */
.hp-spine.hp-cut { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.hp-cut::after { display: none; }
.hp-cut > img { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(5px 4px 4px var(--hp-shadow)); }
.hp-cover.hp-cover--cut { background: transparent; border-left: 0; box-shadow: none; padding: 0; }
.hp-cover--cut img { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(6px 6px 6px var(--hp-shadow)); }