/* Butiken: kartan och rundturen (/butiken). Hyllornas egna väggar använder ryggraden.css. */

/* Rundturen är bredare än textspalten (100vw med scrollbar): ingen sidledsscroll för det. */
html { overflow-x: clip; }

/* Rubriken finns för skärmläsare och sökmotorer; på skärmen förklarar rundturens egen tipsrad hur man går. */
.bt-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rundturen fyller skärmen: kant till kant, och från menyn ner till fönstrets nederkant.
   --bt-top (butiken.js) är var rundturen börjar på sidan, --bt-sbw scrollbarens bredd (100vw räknar med den). */
.bt-stage { position: relative; width: calc(100vw - var(--bt-sbw, 0px)); margin: 12px 0 0 calc(50% - 50vw + var(--bt-sbw, 0px) / 2); }

/* Själva rundturen. */
.bt-walk {
  position: relative; overflow: hidden;
  height: max(420px, calc(100vh - var(--bt-top, 0px)));
  height: max(420px, calc(100svh - var(--bt-top, 0px)));
  background: #e9e2d4; border: 1px solid var(--line);
  display: grid; place-items: center;
}
.bt-walk.bt-live { display: block; }
.bt-fallback { max-width: 28rem; padding: 0 20px; text-align: center; color: var(--muted); }
.bt-live .bt-fallback { display: none; }
.bt-loading::after {
  content: 'Ställer i ordning butiken …'; position: absolute; inset: auto 0 18px; text-align: center;
  color: var(--soft); font-size: 16px; letter-spacing: .06em;
}
.bt-loading .bt-fallback { visibility: hidden; }
.bt-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.bt-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.bt-leaving .bt-canvas { cursor: progress; }

.bt-here, .bt-hint, .bt-tip {
  position: absolute; margin: 0; pointer-events: none;
  background: rgba(42, 23, 18, .82); color: #f6eedc; font-size: 16px; line-height: 1.3;
}
.bt-here { left: 12px; top: 12px; padding: 7px 12px; max-width: calc(100% - 24px); }
.bt-here[hidden] { display: none; }
.bt-hint {
  left: 50%; bottom: 64px; transform: translateX(-50%); padding: 9px 16px; text-align: center;
  width: max-content; max-width: calc(100% - 24px); transition: opacity .6s ease;
}
.bt-hint--gone { opacity: 0; }
.bt-tip { padding: 5px 10px; font-size: 15px; white-space: nowrap; z-index: 2; }
.bt-tip[hidden] { display: none; }
.bt-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bt-btn {
  font: inherit; font-size: 15px; letter-spacing: .04em; cursor: pointer;
  background: rgba(246, 238, 220, .92); color: #3a2018; border: 1px solid rgba(58, 32, 24, .3); padding: 7px 12px;
}
.bt-btn:hover { background: #fffaf0; }
.bt-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .bt-hint { transition: none; } }

/* Kartan uppifrån. Klick på en hylla öppnar den; med rundturen igång går man dit först. */
.bt-map { margin-top: 36px; }
.bt-plan { display: block; width: 100%; max-width: 1100px; height: auto; font-family: 'EB Garamond', Georgia, serif; }
/* Minikartan i rundturens hörn: samma karta utan text, med pricken. */
.bt-minibox { position: absolute; right: 12px; top: 12px; width: min(34%, 240px); z-index: 2; }
.bt-mini {
  display: block; width: 100%; height: auto;
  background: rgba(246, 238, 220, .88); border: 1px solid rgba(58, 32, 24, .3); padding: 4px;
}
.bt-mini text, .bt-mini title { display: none; }
/* Större karta: hela kartan med hyllornas namn, så att man kan välja var man vill stå. */
.bt-minibox--big { width: min(78%, 720px); z-index: 4; }
.bt-minibox--big .bt-mini { background: rgba(246, 238, 220, .97); }
.bt-minibox--big .bt-mini text { display: inline; }
.bt-mini-toggle { position: absolute; left: 6px; bottom: 6px; font: inherit; font-size: 14px; letter-spacing: .03em; cursor: pointer;
  padding: 4px 9px; background: rgba(246, 238, 220, .95); color: #3a2018; border: 1px solid rgba(58, 32, 24, .35); }
.bt-mini-toggle:hover { background: #fffaf0; }
.bt-mini-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.bt-mini .bt-you-dot { stroke-width: 8; }
.bt-mini .bt-you-cone { fill: rgba(110, 36, 51, .35); }
.bt-floor { fill: #efe3c8; }
.bt-wall { fill: none; stroke: #3a2018; stroke-width: 8; }
.bt-plan--live .bt-floor { cursor: crosshair; }
.bt-shelf rect { fill: #fffaf0; stroke: rgba(58, 32, 24, .55); stroke-width: 2; transition: fill .15s; }
.bt-shelf .bt-front { fill: var(--maroon); stroke: none; }
.bt-shelf text, .bt-counter text, .bt-door text { fill: #3a2018; pointer-events: none; }
.bt-shelf:hover rect:first-of-type, .bt-shelf:focus-visible rect:first-of-type { fill: #f3dca0; }
.bt-shelf:focus-visible { outline: none; }
.bt-shelf:focus-visible rect:first-of-type { stroke: var(--maroon); stroke-width: 4; }
.bt-counter rect { fill: #d8c9ad; stroke: rgba(58, 32, 24, .4); stroke-width: 2; }
.bt-door circle { fill: #2f5d3a; }
.bt-door text { fill: #fff; font-weight: 600; }
.bt-you { pointer-events: none; }
.bt-you-cone { fill: rgba(110, 36, 51, .22); }
.bt-you-dot { fill: var(--maroon); stroke: #fffaf0; stroke-width: 5; }
.bt-legend { font-size: 15px; color: var(--soft); margin: 8px 0 0; }
.bt-legend-you { display: none; }
.bt-plan--live + .bt-legend .bt-legend-you { display: inline; }

:root[data-theme=dark] .bt-walk { background: #1b1310; }
:root[data-theme=dark] .bt-floor { fill: #2b201a; }
:root[data-theme=dark] .bt-wall { stroke: #efe4cc; }
:root[data-theme=dark] .bt-shelf rect { fill: #3a2a22; stroke: rgba(239, 228, 204, .45); }
:root[data-theme=dark] .bt-shelf:hover rect:first-of-type { fill: #5a4030; }
:root[data-theme=dark] .bt-shelf text, :root[data-theme=dark] .bt-counter text { fill: #efe4cc; }
:root[data-theme=dark] .bt-counter rect { fill: #4a3a2e; }

/* Hyllorna som lista. */
.bt-list { margin-top: 36px; }
.bt-list h2, .bt-real h2, .bt-map h2 { font-size: 30px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.bt-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.bt-list a { display: block; height: 100%; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bt-list a:hover { border-color: var(--accent-line); }
.bt-list strong { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; }
.bt-list span { display: block; font-size: 15.5px; color: var(--soft); }

/* Butiken på riktigt: bilderna från Instagram. */
.bt-real { margin-top: 36px; }
.bt-real > p { color: var(--muted); margin: 0 0 14px; }
.bt-real ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.bt-real a { position: relative; display: block; }
.bt-real img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.bt-play {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(42, 23, 18, .82); color: #f6eedc;
}

/* ------------------------------------------------------------ hyllan som ett lager över rundturen
   (butiken.js hämtar hyllans sida och visar väggen här; Esc, bakåt eller knappen stänger). */
.bt-layer { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper, #f6eedc); animation: bt-layer-in .28s ease-out; }
.bt-layer[hidden] { display: none; }
.bt-layer-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--paper, #f6eedc); border-bottom: 1px solid var(--line); }
.bt-layer-bar strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-layer-body { max-width: 1240px; margin: 0 auto; padding: 12px 16px 40px; }
.bt-layer-body .rr-head { margin-top: 0; }
/* The bar above already names the shelf and leads back: the layer keeps only what stands here, then the books.
   (Not `display: none` on .rr-head: the .rr--shelf rule below has the same specificity and would win.) */
.bt-layer-body .rr-rooms, .bt-layer-body .rr-head h1 { display: none; }
/* The bar's own "Tillbaka i butiken" is enough; the one moved into the picture is for the shelf's own page. */
.bt-layer-body .rr-backlink--in { display: none; }
/* A shelf's own page (a direct link, a search hit): the same short top as in the layer - the shelf's name and what
   stands on it on one line, then the books. The other shelves are one click away in the walk. */
.rr--shelf .rr-rooms, .rr--shelf .rr-head .eyebrow { display: none; }
.rr--shelf .rr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 4px 0 12px; }
.rr--shelf .rr-head h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0; }
.rr--shelf .rr-lead { flex: 1 1 320px; margin: 0; font-size: 16.5px; line-height: 1.35; }
.bt-layer-wait { padding: 60px 0; text-align: center; color: var(--soft); }
@keyframes bt-layer-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
body.bt-layer-open { overflow: hidden; }

/* ------------------------------------------------------------ pekskärm: första trycket visar hyllan, andra öppnar */
.bt-choice { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; max-width: calc(100% - 24px);
  background: rgba(42, 23, 18, .92); color: #f6eedc; font-size: 17px; line-height: 1.25; }
.bt-choice[hidden] { display: none; }
.bt-choice .bt-btn { flex: 0 0 auto; }

/* ------------------------------------------------------------ hitta en bok, gå till en genre */
.bt-find { position: absolute; left: 12px; top: 56px; z-index: 3; width: min(360px, calc(100% - 24px)); }
.bt-find-row { display: flex; gap: 6px; }
.bt-find input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px;
  background: rgba(255, 250, 240, .95); color: #241810; border: 1px solid rgba(58, 32, 24, .35); }
.bt-find-hits { list-style: none; margin: 4px 0 0; padding: 0; background: rgba(255, 250, 240, .97); border: 1px solid rgba(58, 32, 24, .3);
  max-height: 46vh; overflow-y: auto; }
.bt-find-hits[hidden] { display: none; }
.bt-find-hits button { display: block; width: 100%; text-align: left; font: inherit; font-size: 16px; line-height: 1.3; padding: 8px 12px;
  background: none; border: 0; border-bottom: 1px solid rgba(58, 32, 24, .12); color: #241810; cursor: pointer; }
.bt-find-hits button:hover, .bt-find-hits button:focus-visible { background: #f3dca0; outline: none; }
.bt-find-hits small { display: block; color: #6f604c; font-size: 14px; }
.bt-find-none { padding: 8px 12px; color: #6f604c; font-size: 15px; }
.bt-genres { margin-top: 6px; }
.bt-genres > summary { list-style: none; cursor: pointer; display: inline-block; font-size: 15px; letter-spacing: .04em;
  padding: 6px 12px; background: rgba(246, 238, 220, .92); color: #3a2018; border: 1px solid rgba(58, 32, 24, .3); }
.bt-genres > summary::-webkit-details-marker { display: none; }
.bt-genres[open] > summary { background: #fffaf0; }
.bt-genre-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px; max-height: 40vh; overflow-y: auto;
  background: rgba(255, 250, 240, .95); border: 1px solid rgba(58, 32, 24, .3); }
.bt-genre-list button { font: inherit; font-size: 15px; padding: 6px 10px; cursor: pointer; background: #fffaf0; color: #3a2018;
  border: 1px solid rgba(58, 32, 24, .3); }
.bt-genre-list button:hover, .bt-genre-list button:focus-visible { background: #f3dca0; outline: none; }
.bt-genre-list span { color: #6f604c; font-size: 13px; margin-left: 4px; }

/* Större knappar och fält där man trycker med fingret. */
@media (pointer: coarse) {
  .bt-btn { min-height: 44px; padding: 10px 16px; font-size: 16px; }
  .bt-find input { min-height: 44px; }
  .bt-genres > summary, .bt-genre-list button { min-height: 40px; }
}
@media (max-width: 720px) {
  .bt-find { top: 52px; width: calc(100% - 24px); }
  /* Knapparna bryts på två rader på en telefon: kartan, tipsraden och valet ligger ovanför dem. */
  .bt-minibox { width: min(30%, 140px); top: auto; bottom: 124px; }
  .bt-hint { bottom: 124px; }
  .bt-mini-toggle { left: auto; right: 0; bottom: auto; top: -34px; }
  .bt-minibox--big .bt-mini-toggle { top: -38px; }
  .bt-choice { bottom: 130px; }
  .bt-minibox--big { width: calc(100% - 24px); top: 100px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .bt-layer { animation: none; } }

/* ------------------------------------------------------------ Gå till en hylla, Förra och Nästa på en rad */
.bt-jump { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bt-jump .bt-genres { margin-top: 0; position: static; }
.bt-jump .bt-genre-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; }
.bt-mini-btn { font: inherit; font-size: 15px; letter-spacing: .03em; cursor: pointer; padding: 6px 12px;
  background: rgba(246, 238, 220, .92); color: #3a2018; border: 1px solid rgba(58, 32, 24, .3); }
.bt-mini-btn:hover { background: #fffaf0; }
.bt-mini-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

/* ------------------------------------------------------------ hjälp: så styr du rundturen */
.bt-help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: 18px 22px 20px;
  background: rgba(255, 250, 240, .98); color: #241810; border: 1px solid rgba(58, 32, 24, .35); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.bt-help[hidden] { display: none; }
.bt-help h2 { font-size: 26px; margin: 0 0 10px; }
.bt-help ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; font-size: 17px; line-height: 1.35; }
.bt-help strong { color: #6e2433; }
@media (pointer: coarse) { .bt-mini-btn, .bt-mini-toggle { min-height: 40px; } }

/* ------------------------------------------------------------ samlad, liten verktygsrad i rundturen */
.bt-here { left: 8px; top: 8px; padding: 4px 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-find { left: 8px; top: 40px; width: min(320px, calc(100% - 16px)); display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.bt-find-row { flex: 1 1 120px; min-width: 0; }
.bt-find input { padding: 5px 9px; font-size: 15px; }
.bt-find .bt-find-hits { flex: 0 0 100%; order: 3; margin-top: 0; }
.bt-find .bt-jump { flex: 0 0 auto; margin: 0; gap: 4px; }
.bt-genres > summary { padding: 5px 9px; font-size: 14px; }
.bt-mini-btn { padding: 5px 9px; font-size: 14px; }
.bt-mini-btn--icon { width: 32px; padding: 5px 0; font-size: 20px; line-height: 1; text-align: center; }
.bt-tools { right: 8px; bottom: 8px; gap: 4px; }
.bt-btn--icon { width: 36px; height: 36px; padding: 0; font-size: 19px; line-height: 1; display: grid; place-items: center; border-radius: 50%; }
@media (pointer: coarse) { .bt-btn--icon { width: 44px; height: 44px; } .bt-mini-btn--icon { width: 40px; } }
@media (max-width: 720px) {
  .bt-find { top: 38px; width: calc(100% - 16px); }
  /* Tipsraden till vänster om minikartan i stället för under den. */
  .bt-hint { bottom: 60px; left: 8px; transform: none; max-width: calc(100% - 156px); text-align: left; font-size: 15px; }
  .bt-minibox { bottom: 60px; }
  .bt-choice { bottom: 66px; }
}
.bt-packs { margin-top: 6px; padding: 6px 10px; font-size: 14px; color: #3a2018; background: rgba(246, 238, 220, .92);
  border: 1px solid rgba(58, 32, 24, .3); display: flex; flex-direction: column; gap: 2px; }
.bt-pack { display: flex; align-items: center; gap: 6px; }
.bt-pack i { width: 14px; height: 14px; border: 1px solid rgba(58, 32, 24, .4); display: inline-block; }

/* Pilarna i golvet, också på kartan: streckade gångar under "Du är här". */
.bt-trail-map { pointer-events: none; }
.bt-trail-map path { fill: none; stroke: var(--maroon); stroke-opacity: .55; stroke-width: 7; stroke-dasharray: 16 22; stroke-linecap: round; stroke-linejoin: round; }
.bt-mini .bt-trail-map path { stroke-width: 9; stroke-dasharray: 18 26; }
.bt-trail-off .bt-trail-map, .bt-plan.bt-trail-off .bt-trail-map { display: none; }
.bt-btn[aria-pressed="false"] { opacity: .65; }
:root[data-theme=dark] .bt-trail-map path { stroke: var(--gold); stroke-opacity: .6; }