/* Megabilligt Rek – slider. Färger och mått styrs av variablerna; egen CSS kan läggas i inställningarna. */
.mb-rek {
	--mb-rek-kort: 220px;
	--mb-rek-gap: 14px;
	--mb-rek-ram: #eeeeee;
	--mb-rek-rubrik: #212121;
	--mb-rek-titel: #3368ae;
	--mb-rek-pris: #c5312d;
	--mb-rek-pris-gammal: #666666;
	--mb-rek-badge: #e53935;
	--mb-rek-knapp: #ff784d;
	--mb-rek-knapp-text: #ffffff;
	--mb-rek-pil: #7f7f7f;
	margin: 2rem 0;
	clear: both;
}
.mb-rek__rubrik { font-size: 1.15rem; font-weight: 700; color: var(--mb-rek-rubrik); text-align: center; margin: 0 0 .9rem; }
.mb-rek--rubrik-vanster .mb-rek__rubrik { text-align: left; }
.mb-rek--kort-vanster .mb-rek__kort { text-align: left; }
.mb-rek--kort-vanster .mb-rek__knapp, .mb-rek--kort-vanster .mb-rek__kort .mb-rek__knapp.button { align-self: flex-start; }
.mb-rek__wrap { position: relative; }
.mb-rek__track { display: flex; gap: var(--mb-rek-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mb-rek__track::-webkit-scrollbar { display: none; }
.mb-rek__kort { position: relative; flex: 0 0 var(--mb-rek-kort); scroll-snap-align: start; margin: 0; padding: 12px 12px 14px; list-style: none; background: #fff; border: 1px solid var(--mb-rek-ram); border-radius: 2px; text-align: center; display: flex; flex-direction: column; box-sizing: border-box; }
.mb-rek__badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--mb-rek-badge); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 7px; border-radius: 3px; }
.mb-rek__lank { display: block; color: inherit; text-decoration: none; flex: 1 1 auto; }
.mb-rek__bild { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.mb-rek__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mb-rek__namn { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--mb-rek-titel); font-size: 14px; line-height: 1.35; margin: 10px 0 0; min-height: 3.4em; }
.mb-rek__lank:hover .mb-rek__namn { text-decoration: underline; }
.mb-rek__pris { display: block; margin: 14px 0 10px; font-size: 14px; font-weight: 700; color: var(--mb-rek-pris); }
.mb-rek__pris del { color: var(--mb-rek-pris-gammal); font-weight: 400; margin-right: .35em; }
.mb-rek__pris ins { text-decoration: none; }
.mb-rek__pris--ordinarie { color: var(--mb-rek-rubrik); }
.mb-rek__knapp, .mb-rek__kort .mb-rek__knapp.button { display: inline-block; background: var(--mb-rek-knapp); color: var(--mb-rek-knapp-text); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 10px 14px; border: 0; border-radius: 3px; cursor: pointer; align-self: center; margin: 0; min-height: 0; }
/* Flatsome ger .button margin-bottom 1em och min-height – utan nollningen ovan hamnar "Välj alternativ" (ingen .button) lägre än "Lägg i varukorg". */
.mb-rek__knapp:hover, .mb-rek__kort .mb-rek__knapp.button:hover { filter: brightness(.93); color: var(--mb-rek-knapp-text); }
.mb-rek__knapp.loading { opacity: .6; }
.mb-rek__knapp.added { background: #3d9a50; }
.mb-rek__kort .added_to_cart { display: none; }
.mb-rek__pil { position: absolute; top: calc(var(--mb-rek-kort) / 2 + 6px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mb-rek-pil); color: #fff; cursor: pointer; font-size: 26px; line-height: 1; padding: 0 0 3px; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); opacity: .95; }
.mb-rek__pil:hover { opacity: 1; }
.mb-rek__pil--v { left: -6px; }
.mb-rek__pil--h { right: -6px; }
/* layout="grid" – landningssidor: alla kort synliga i rader i stället för en slider. */
.mb-rek--grid .mb-rek__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding: 0; }
/* Fast 4/2 kolumner (inte auto-fill) så att antal i fyrtal alltid ger hela rader. */
@media (max-width: 849px) { .mb-rek--grid .mb-rek__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-rek--grid .mb-rek__kort { flex: none; }
.mb-rek--grid .mb-rek__pil { display: none; }
@media (max-width: 640px) {
	.mb-rek { --mb-rek-kort: 160px; --mb-rek-gap: 10px; }
	.mb-rek__pil { display: none; }
	.mb-rek__namn { font-size: 13px; }
}