/* Botniastugan – Startsida: intro-sektion + sortiments-strip */

/* Global skyddsspärr mot horisontell scroll (off-canvas widgets m.fl.) */
html, body { overflow-x: clip; }


/* === INTRO === */
.bs-intro {
	position: relative;
	overflow: hidden;
}

.bs-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 48px;
	align-items: center;
	max-width: 1800px;
	margin: 0 auto;
}
.bs-intro__text   { grid-column: 1; grid-row: 1; }
.bs-intro__slider { grid-column: 2; grid-row: 1; }

.bs-intro__text { position: relative; padding-bottom: 24px; }

.bs-intro__eyebrow {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 700;
	color: #2f5a3a;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.bs-intro__title {
	margin: 0 0 14px;
	text-wrap: balance;
}

.bs-intro__sub {
	font-size: 16px;
	color: #555;
	max-width: 520px;
	line-height: 1.55;
	margin: 0;
}

.bs-intro__usp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 8px 14px 8px 18px;
	background: rgba(47, 90, 58, .1);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #2f5a3a;
}

/* Reservera plats för notice-kortet i tomytan höger om H1 */
.bs-intro__text { transition: padding-right .4s ease; }
.bs-intro__text--has-notice { padding-right: 340px; }

/* Notice-kort — vertikal flytande panel högst upp till höger i textkolumnen */
.bs-intro__notice {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	padding: 20px 22px;
	background: var(--accent-light-trans-90);
	backdrop-filter: blur(3px);
	border: 1px solid var(--accent-light);
	border-radius: var(--radius-m, 10px);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
	/* Slide-in start state */
	opacity: 0;
	transform: translateX(40px);
	transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1);
	z-index: 2;
}

.bs-intro__notice.is-visible { opacity: 1; transform: translateX(0); }
.bs-intro__notice.is-dismissed { opacity: 0; transform: translateX(40px); pointer-events: none; }
.bs-intro__notice.is-dismissed-initial { display: none; }

.bs-intro__notice-dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: rgba(0, 0, 0, .35);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .15s, color .15s;
	padding: 0;
}
.bs-intro__notice-dismiss:hover { background: rgba(0, 0, 0, .06); color: #000; }

.bs-intro__notice-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--primary-trans-10);
	color: var(--primary);
	display: grid;
	place-items: center;
	margin-bottom: 12px;
}

.bs-intro__notice-titel {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -.2px;
}

.bs-intro__notice-text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.bs-intro__notice-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.bs-intro__notice-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #777;
}

.bs-intro__notice-link {
	color: #2f5a3a;
	text-decoration: none;
	font-weight: 600;
	transition: color .15s;
}
.bs-intro__notice-link:hover { color: #1a3520; text-decoration: underline; }

.bs-intro__notice-sep { color: #bbb; user-select: none; }

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

/* Modern kvalitets-badge — placeras i slider-cellens övre högra hörn via grid */
.bs-intro__quality-badge {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	margin: 16px;
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 14px 18px;
	background: var(--primary);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #fff;
	border-radius: var(--radius-m, 8px);
	border: 1px solid var(--primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	max-width: 220px;
}

.bs-intro__quality-badge-icon {
	color: var(--warning);
	margin-bottom: 1rem;
}

.bs-intro__quality-badge-main {

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text-light);
	line-height: 1;
}

.bs-intro__quality-badge-sub {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-light-muted);
}

/* Layout för CTA-raden (knappstyling sköts av Bricks/ACSS .brxe-button) */
.bs-intro__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.bs-intro__gran {
	position: absolute;
	right: 0;
	bottom: -6px;
	width: 80px;
	height: 100px;
	pointer-events: none;
}
.bs-intro__gran svg { width: 100%; height: 100%; display: block; }

/* Slider */
.bs-intro__slider {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	/* box-shadow: 0 12px 32px rgba(0, 0, 0, .15); */
	background: #2b2b2b;
}

.bs-intro__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .55s ease;
}

.bs-intro__slide {
	flex: 0 0 100%;
	height: 100%;
}

.bs-intro__slide { position: relative; }

.bs-intro__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-intro__badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	background: rgba(255, 255, 255, .95);
	padding: 10px 14px;
	border-radius: var(--radius-m);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	text-decoration: none;
	color: #1a1a1a;
	max-width: 75%;
	transition: transform .2s, box-shadow .2s;
}
.bs-intro__badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	color: #1a1a1a;
}
.bs-intro__badge-title {
	display: block;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.2px;
}
.bs-intro__badge-meta {
	display: block;
	font-size: 12px;
	color: #555;
	font-weight: 600;
	margin-top: 2px;
}

.bs-intro__arr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #2b2b2b;
	border: 0;
	cursor: pointer;
	font-size: 20px;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: background .15s;
}
.bs-intro__arr:hover { background: #fff; }
.bs-intro__arr--prev { left: 12px; }
.bs-intro__arr--next { right: 12px; }

.bs-intro__dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 8px;
	display: flex;
	gap: 0;
}
/* Knappen är 24×24px (touch-target-vänligt), men det visuella pricken
   renderas via ::before så designen behålls. */
.bs-intro__dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	position: relative;
	display: grid;
	place-items: center;
}
.bs-intro__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	transition: width .25s, background .25s;
}
.bs-intro__dot.is-active::before {
	background: #fff;
	width: 24px;
}

/* Tom-meddelande för redaktörer */
.bs-intro__slider--empty {
	background: rgba(47, 90, 58, .06);
	border: 2px dashed rgba(47, 90, 58, .25);
	box-shadow: none;
	display: grid;
	place-items: center;
	padding: 24px;
	text-align: center;
}
.bs-intro__empty { color: #2f5a3a; max-width: 320px; }
.bs-intro__empty strong { display: block; font-size: 15px; margin-bottom: 8px; }
.bs-intro__empty p { font-size: 13px; margin: 0 0 6px; color: #555; }
.bs-intro__empty-note { font-size: 11px; color: #888; font-style: italic; }

/* Mobil */
@media (max-width: 768px) {
	.bs-intro { padding: 32px 18px; }
	.bs-intro__grid { grid-template-columns: 1fr; gap: 24px; }
	.bs-intro__gran { width: 56px; height: 70px; right: -6px; bottom: -4px; }
	.bs-intro__slider { aspect-ratio: 16 / 10; grid-column: 1; grid-row: 3; }
	.bs-intro__text { grid-column: 1; grid-row: 2; }
	.bs-intro__sub { font-size: 14px; }

	/* Badge blir en kompakt banner högst upp på mobil, full bredd */
	.bs-intro__quality-badge {
		grid-column: 1;
		grid-row: 1;
		justify-self: stretch;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		margin: 0 0 8px;
		max-width: none;
		padding: 10px 14px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	}
	.bs-intro__quality-badge-icon { margin: 0; flex-shrink: 0; }
	.bs-intro__quality-badge-main { font-size: 11px; white-space: nowrap; }
	.bs-intro__quality-badge-sub { font-size: 12px; line-height: 1.3; }

	/* Tajtare typografi i intro-text på mobil */
	.bs-intro__title { line-height: 1.1; letter-spacing: -.5px; }
	.bs-intro__eyebrow { margin-bottom: 6px; }
	.bs-intro__sub { font-size: 14px; line-height: 1.45; max-width: 100%; }
	.bs-intro__usp { margin-top: 12px; }
	.bs-intro__ctas { margin-top: 20px; gap: 8px; }
}

/* Notice-kortet är en desktop-affordans — döljs och paddingen tas bort under 1100px,
   där griden börjar bli för trång för att hosta H1 + notice + slider parallellt. */
@media (max-width: 1100px) {
	.bs-intro__text--has-notice { padding-right: 0; }
	.bs-intro__notice { display: none; }
}

/* === SORTIMENT-STRIP === */
.bs-sortiment {
	background: #2b2b2b;
	color: #fff;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.bs-sortiment__eyebrow {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 800;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	flex-shrink: 0;
}

.bs-sortiment__items {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
}
.bs-sortiment__items::-webkit-scrollbar { display: none; }

.bs-sortiment__item {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s;
}
.bs-sortiment__item:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

@media (max-width: 600px) {
	.bs-sortiment { padding: 12px 14px; }
	.bs-sortiment__eyebrow { display: none; }
	.bs-sortiment__item { padding: 7px 13px; font-size: 12px; }
}

/* === RECENSIONER === */
.bs-rev {

}
.bs-rev__inner {
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	min-width: 0;
}
.bs-rev__head { text-align: center; margin-bottom: 36px; margin-left: auto; margin-right: auto; }
.bs-rev__eyebrow {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 700;
	color: #2f5a3a;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.bs-rev__title {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	margin: 0;
	color: #1a1a1a;
	letter-spacing: -.4px;
}
.bs-rev__carousel {
	position: relative;
	overflow: visible;
	padding: 0 4px;
	min-width: 0;
}

/* Klipp bara track:en, inte hela karusellen (så pilarna inte kapas) */
.bs-rev__track-wrap {
	overflow: hidden;
	min-width: 0;
}
.bs-rev__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 72px) / 4);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	min-width: 0;
}
.bs-rev__track::-webkit-scrollbar { display: none; }
.bs-rev__card {
	scroll-snap-align: start;
	background: #fff;
	border-radius: 14px;
	padding: var(--space-xs);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
/* När recensionen saknar bild — lite mer luft runt text/stjärnor */
.bs-rev__card:not(.bs-rev__card--has-img) {
	padding: var(--space-s, calc(var(--space-xs) * 1.5));
}

.bs-rev__arr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: #2b2b2b;
	border: 0;
	cursor: pointer;
	font-size: 22px;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	z-index: 5;
	transition: background .15s, transform .15s;
}
.bs-rev__arr:hover { background: #f3eee7; }
.bs-rev__arr:disabled { opacity: 0; pointer-events: none; }
.bs-rev__arr--prev { left: -8px; }
.bs-rev__arr--next { right: -8px; }

.bs-rev__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
}
.bs-rev__dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d4ccc0;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: width .25s, background .25s;
}
.bs-rev__dots button.is-active {
	background: #2f5a3a;
	width: 24px;
	border-radius: 999px;
}

@media (max-width: 1200px) {
	.bs-rev__track { grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
}
@media (max-width: 900px) {
	.bs-rev__track { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; }
}
@media (max-width: 600px) {
	.bs-rev__track { grid-auto-columns: 88%; gap: 16px; }
	.bs-rev__arr { display: none; }
}
.bs-rev__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 16px;
	display: block;
}

.bs-rev__quote-mark {
	position: absolute;
	top: 8px;
	right: 18px;
	font-size: 80px;
	line-height: 1;
	font-family: Georgia, serif;
	color: rgba(47, 90, 58, .12);
	font-weight: 700;
	pointer-events: none;
}
.bs-rev__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 14px;
}
.bs-rev__text {
	font-size: 14px;
	line-height: 1.55;
	color: #333;
	margin: 0 0 22px;
	flex: 1;
}
.bs-rev__person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}
.bs-rev__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2f5a3a, #5a8a5a);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}
.bs-rev__name {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.2;
}
.bs-rev__city {
	font-size: 12px;
	color: #777;
	font-weight: 500;
}

@media (max-width: 600px) {
	.bs-rev { padding: 40px 16px; }
	.bs-rev__grid { gap: 16px; }
}