/* Startsidan: kategoricirklarna och bundleblocket (nov 2026).
   Laddas bara från templates/butik/start.html. Skriver över äldre regler i butik.css med .sida-start framför,
   så att butik.css och bundle.css kan lämnas orörda. */

/* ---------- Runda kategorier ----------
   Bilderna är kvadratiska (1920 x 1920) med text upptill och flaskor nedtill. Den gamla zoomen (scale 1.12) klippte
   texten i kanten (till exempel FULLSTOR) och flyttade motivet. Nu visas hela bilden, centrerad, inuti en tunn ring
   med lite luft, så att motivet inte nuddar kanten. Ingen skugga, inget hopp vid hover: ringen blir svart. */
.sida-start .rundakategori { color: var(--svart); -webkit-tap-highlight-color: transparent; }
.sida-start .rundakategori__bild,
.sida-start .rundakategorier .rundakategori__bild {
  box-sizing: border-box; padding: 3px; border: 1px solid var(--linje); border-radius: 50%;
  background: #fff; box-shadow: none; transform: none; overflow: hidden;
  transition: border-color .2s var(--ease);
}
.sida-start .rundakategori__bild img {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: 50% 50%; transform: none;
}
.sida-start .rundakategori:hover .rundakategori__bild { transform: none; box-shadow: none; border-color: var(--svart); }
.sida-start .rundakategori:focus-visible { outline: none; }
.sida-start .rundakategori:focus-visible .rundakategori__bild { border-color: var(--svart); box-shadow: 0 0 0 2px var(--svart); }
.sida-start .rundakategori__text { font-family: var(--rubrikfont); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--svart); }
.sida-start .rundakategori:hover .rundakategori__text { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Bundleblocket ---------- */
.bpk__bygg {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
  background: var(--yta); border-radius: var(--radie-stor); padding: 16px 16px 24px;
}
.bpk__bygg:not(.bpk__bygg--bild) { padding-top: 24px; }
.bpk__text { padding: 0 4px; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.bpk__etikett { margin: 0 0 8px; font-size: 14px; color: var(--dampad); }
.bpk__rubrik { margin: 0 0 10px; font-size: 26px; line-height: 1.15; max-width: 18ch; }
.bpk__ingress { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--dampad); max-width: 36em; }

/* Kollaget: fyra bästsäljare i lager på vita rutor. På mobil en rad överst, på dator ett 2 x 2 till höger. */
.bpk__kollage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-decoration: none; }
.bpk__ruta { display: block; aspect-ratio: 1; background: #fff; border-radius: var(--radie-kort); overflow: hidden; }
.bpk__ruta img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; }

/* Rabatttrappan: tre steg som växer med rabatten. Stapelns höjd följer procenten (--andel = procent / högsta). */
.bpk-trappa {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: repeat(var(--steg, 3), minmax(0, 1fr)); gap: 8px; align-items: end;
  max-width: 460px;
}
.bpk-trappa__steg { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.bpk-trappa__stapel {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px;
  height: calc(60px + var(--andel, 1) * 40px); padding: 10px 6px 0;
  background: #fff; border: 1px solid var(--linje); border-radius: var(--radie-knapp);
  text-align: center;
}
.bpk-trappa__steg:nth-child(2) .bpk-trappa__stapel { background: var(--guld-ljus); border-color: var(--guld); }
.bpk-trappa__steg--topp .bpk-trappa__stapel,
.bpk-trappa__steg--topp:nth-child(2) .bpk-trappa__stapel { background: var(--svart); border-color: var(--svart); color: #fff; }
.bpk-trappa__procent { font-family: var(--rubrikfont); font-weight: 600; font-size: 22px; line-height: 1.1; }
.bpk-trappa__spar { font-size: 12.5px; line-height: 1.3; color: var(--dampad); }
.bpk-trappa__steg--topp .bpk-trappa__spar { color: var(--guld); }
.bpk-trappa__antal { font-size: 14px; font-weight: 500; text-align: center; }
.bpk__exempel { margin: 0 0 22px; font-size: 12.5px; color: var(--dampad); }

/* Primärvalet: säljfärgen, full bredd på mobil */
.knapp.bpk__cta { --kb: var(--cta); --kt: var(--cta-text); width: 100%; min-height: var(--knapp-h-stor); font-size: 16px; }
.knapp.bpk__cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-text); }
.knapp.bpk__cta:focus-visible { outline: 2px solid var(--svart); outline-offset: 3px; }
.bpk__exempel + .bpk__cta, .bpk-trappa + .bpk__cta { margin-top: 0; }

/* Färdiga provpaket: snabbköp. Svepbara på mobil (nästa kort syns i kanten), tre i rad på dator. */
.bpk__paket { margin-top: 32px; }
.bpk__paket-huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bpk__paket-rubrik { margin: 0; font-size: 20px; line-height: 1.2; }
.bpk__paket-huvud .lank-understruken { flex: none; text-underline-offset: .2em; }
ul.bpk-paket {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
ul.bpk-paket::-webkit-scrollbar { display: none; }
.bpk-kort {
  flex: 0 0 74%; scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--linje); border-radius: var(--radie-kort); padding: 10px 10px 12px;
}
.bpk-kort__bild { display: block; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--yta); overflow: hidden; }
.bpk-kort__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; mix-blend-mode: multiply; }
.bpk-kort__info { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 0 4px; min-width: 0; }
.bpk-kort__namn { font-family: var(--rubrikfont); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--svart); text-decoration: none; }
.bpk-kort__namn:hover { text-decoration: underline; text-underline-offset: .2em; }
.bpk-kort__innehall { font-size: 14px; color: var(--dampad); }
.bpk-kort__pris { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.bpk-kort__pris strong { font-family: var(--rubrikfont); font-weight: 600; font-size: 18px; }
.bpk-kort__pris span { font-size: 13px; color: var(--dampad); }
.bpk-kort__form { margin: 0; }
.bpk-kort .knapp { min-height: var(--knapp-h); padding: 0 16px; white-space: nowrap; }
.bpk-kort--slut .bpk-kort__bild img { opacity: .55; }

@media (min-width: 750px) {
  .bpk__bygg { padding: 24px 24px 32px; }
  .bpk__rubrik { font-size: 32px; }
  .bpk-trappa__procent { font-size: 26px; }
  .knapp.bpk__cta { width: auto; align-self: flex-start; padding: 0 36px; }
  .bpk__paket { margin-top: 40px; }
  .bpk__paket-rubrik { font-size: 22px; }
  ul.bpk-paket { margin: 0; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .bpk-kort { padding: 12px 12px 14px; }
}

@media (min-width: 990px) {
  .bpk__bygg { padding: 48px 48px 48px 56px; gap: 56px; align-items: center; }
  .bpk__bygg--bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .bpk__bygg:not(.bpk__bygg--bild) { padding-top: 48px; }
  .bpk__kollage { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; width: 100%; justify-self: end; }
  .bpk__ruta { border-radius: var(--radie-kort); }
  .bpk__text { padding: 0; }
  .bpk__rubrik { font-size: 38px; }
  .bpk__ingress { font-size: 16px; }
  .bpk-trappa__stapel { height: calc(72px + var(--andel, 1) * 60px); padding-top: 14px; }
  .bpk-trappa__procent { font-size: 28px; }
  .bpk__paket { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sida-start .rundakategori__bild, .knapp.bpk__cta { transition: none; }
  ul.bpk-paket { scroll-behavior: auto; }
}
@media (min-width: 750px) { .sida-start .rundakategori { gap: 12px; } }