/* GENERERAD från src/css/tso.css av dev/tools/fluid.py – redigera inte här. */
/*
 * Snusify – layout enligt docs/02-tso-design.md (TSO-struktur, Snusifys färger).
 * {{a:b}} = flytande värde (a px @375 → b px @1440), expanderas av dev/tools/fluid.py.
 */

:root {
	--t-ink: #031A2E;
	--t-ink-2: #3A4356;
	--t-ink-3: #6B7385;
	--t-accent: #072D50;        /* TSO brand-blue → Navy Blue */
	--t-accent-dark: #052139;   /* TSO brand-blue-dark */
	--t-signal: #FE5C8D;        /* TSO accent (lime) → Crimson Pink */
	--t-highlight: #DBF2FC;
	--t-signal-dark: #C93466;
	--t-soft: #EDF8FD;
	--t-soft-2: #DBF2FC;
	--t-line: #E6E8EC;
	--t-text: #171717;
	--t-pad: clamp(20px, 10.141px + 2.6291vw, 48px);
	--t-gap: clamp(12px, 9.535px + 0.6573vw, 19px);
	--t-ribbon: polygon(10px 0, 100% 0, calc(100% - 16px) 50%, calc(100% - 10px) 100%, 0 100%);
	--t-ease: cubic-bezier(.3, 1, .3, 1);
}

/* ---------- Ribbon (rea-etikett, collection-etikett, köpknapp) ---------- */
.sn-ribbon {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	isolation: isolate;
}
.sn-ribbon::before,
.sn-ribbon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: var(--t-ribbon);
}
.sn-ribbon::before { background: var(--t-accent-dark); transform: translate(3px, 3px); }
.sn-ribbon::after { background: var(--t-accent); }
.sn-ribbon .sn-icon { width: 13px; height: 13px; flex: none; }

/* ---------- Produktkort ---------- */
.sn-pc {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--t-soft);
	border-radius: clamp(16px, 14.592px + 0.3756vw, 20px);
	padding: clamp(10px, 7.183px + 0.7512vw, 18px);
	color: var(--t-text);
	min-width: 0;
}
.sn-pc__save {
	position: absolute;
	top: clamp(8px, 6.944px + 0.2817vw, 11px);
	left: clamp(12px, 11.296px + 0.1878vw, 14px);
	z-index: 2;
	padding: clamp(4px, 3.296px + 0.1878vw, 6px) clamp(14px, 10.479px + 0.9390vw, 24px) clamp(4px, 3.296px + 0.1878vw, 6px) clamp(8px, 5.535px + 0.6573vw, 15px);
	color: var(--t-signal);
	font-size: 12px;
	letter-spacing: .04em;
}
.sn-pc__save-lbl, .sn-pc__save-val { font-size: inherit; }
@media (max-width: 767px) {
	.sn-pc__save { flex-direction: column; gap: 1px; align-items: center; }
	.sn-pc__save .sn-icon { display: none; }
	.sn-pc__save-lbl { font-size: 8px; }
	.sn-pc__save-val { font-size: 13px; }
}
.sn-pc__media {
	display: block;
	width: clamp(113px, 90.113px + 6.1033vw, 178px);
	aspect-ratio: 1;
	margin: 2px auto 0;
}
.sn-pc__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sn-pc__body { display: flex; flex-direction: column; flex: 1; margin-top: 8px; min-width: 0; }
.sn-pc__label {
	align-self: flex-start;
	padding: clamp(4px, 3.296px + 0.1878vw, 6px) clamp(18px, 15.887px + 0.5634vw, 24px) clamp(4px, 3.296px + 0.1878vw, 6px) clamp(12px, 10.944px + 0.2817vw, 15px);
	font-size: clamp(10px, 9.648px + 0.0939vw, 11px);
	letter-spacing: .08em;
	color: #000;
}
.sn-pc__label::before { background: var(--t-signal-dark); }
.sn-pc__label::after { background: var(--t-signal); }
.sn-pc__title {
	display: block;
	margin-top: 13px;
	margin-bottom: auto; /* Fakta, mängdval, köpknapp och pris i botten → linjerar mellan kort i samma rad. */
	font-size: clamp(14px, 13.553px + 0.1192vw, 15.2693px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--t-text);
	text-decoration: none;
}
.sn-pc__title:hover { text-decoration: underline; }
.sn-pc__facts {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: clamp(8px, 6.592px + 0.3756vw, 12px);
	padding: clamp(8px, 6.592px + 0.3756vw, 12px) clamp(2px, 0.944px + 0.2817vw, 5px) 0;
	border-top: 1px solid rgba(15, 17, 21, .1);
}
.sn-pc__fact { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sn-pc__fact .sn-icon { width: 22px; height: 22px; flex: none; }
.sn-pc__fact > span { display: flex; flex-direction: column; min-width: 0; }
.sn-pc__fact-lbl { font-size: 9px; line-height: 1.2; color: rgba(15, 17, 21, .55); }
.sn-pc__fact-val { font-size: 11px; line-height: 1.2; font-weight: 700; color: #0F1115; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
	.sn-pc__fact { flex-direction: column; gap: 3px; text-align: center; }
	.sn-pc__fact > span { align-items: center; }
	.sn-pc__fact .sn-icon { width: 17px; height: 17px; }
	.sn-pc__fact-lbl { font-size: 8px; }
	.sn-pc__fact-val { font-size: 10px; }
}
.sn-pc__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
}
@media (max-width: 767px) {
	.sn-pc__steps { display: flex; overflow: hidden; }
	.sn-pc__step { flex: 0 0 62px; }
}
.sn-pc__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: clamp(59px, 55.831px + 0.8451vw, 68px);
	padding: 7px 2px 6px;
	border: 1px solid rgba(23, 23, 23, .16);
	border-radius: 60px;
	background: #fff;
	color: var(--t-text);
	font: inherit;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.sn-pc__step .sn-icon { width: clamp(17px, 15.239px + 0.4695vw, 22px); height: clamp(17px, 15.239px + 0.4695vw, 22px); }
.sn-pc__step-qty { font-size: clamp(12px, 10.849px + 0.3070vw, 15.2693px); font-weight: 500; line-height: 1; }
.sn-pc__step-sub { font-size: clamp(9px, 8.648px + 0.0939vw, 10px); line-height: 1; letter-spacing: .02em; }
.sn-pc__step[aria-checked="true"] { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.sn-pc__step.is-out { opacity: .45; cursor: default; }
.sn-pc__add {
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: clamp(36px, 33.887px + 0.5634vw, 42px);
	margin-top: clamp(8px, 10.704px + -0.1878vw, 10px);
	padding: 8px 12px;
	font-size: clamp(12px, 10.944px + 0.2817vw, 15px);
	letter-spacing: .04em;
	color: var(--t-signal);
}
.sn-pc__add .sn-icon { width: 16px; height: 16px; }
.sn-pc__add-was { font-weight: 400; font-size: clamp(9.5px, 8.725px + 0.2066vw, 11.7px); color: rgba(255, 255, 255, .78); }
.sn-pc__add.is-disabled, .sn-pc__add.is-loading { opacity: .55; pointer-events: none; }
.sn-pc__add.added::after { background: var(--t-accent-dark); }
.sn-pc__per {
	margin: 8px 0 0;
	text-align: center;
	line-height: 17px;
	color: var(--t-ink-3);
}
.sn-pc__per strong { font-size: clamp(12px, 11.296px + 0.1878vw, 14px); font-weight: 800; letter-spacing: .01em; color: var(--t-accent); }
.sn-pc__per span { font-size: clamp(9px, 8.648px + 0.0939vw, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sn-pc + .added_to_cart, .sn-pc .added_to_cart { display: none; }

/* ---------- Produktkarusell (snusify/product-row) – .sn-carousel ---------- */
.sn-carousel {
	padding-top: clamp(54px, 47.662px + 1.6901vw, 72px);
}
.sn-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--t-pad);
	margin-bottom: clamp(32px, 30.592px + 0.3756vw, 36px);
}
.sn-carousel__title {
	margin: 0;
	font-size: clamp(40px, 30.101px + 2.6396vw, 68.112px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--t-text);
}
.sn-carousel__nav { display: flex; gap: 10px; }
.sn-carousel__arrow {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 1px solid rgba(3, 26, 46, .85);
	background: transparent;
	color: var(--t-ink);
	cursor: pointer;
	transition: background .3s var(--t-ease), color .3s var(--t-ease), opacity .2s;
}
.sn-carousel__arrow .sn-icon { width: 22px; height: 22px; }
.sn-carousel__arrow:hover:not(:disabled) { background: var(--t-ink); color: #fff; }
.sn-carousel__arrow:disabled { opacity: .25; cursor: default; }
@media (max-width: 767px) { .sn-carousel__nav { display: none; } }
.sn-carousel__track {
	--cols: 1.6;
	--gaps: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--t-gap) * var(--gaps)) / var(--cols));
	gap: var(--t-gap);
	padding: 0 var(--t-pad);
	scroll-padding: 0 var(--t-pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.sn-carousel__track::-webkit-scrollbar { display: none; }
.sn-carousel__track > * { scroll-snap-align: start; }
@media (min-width: 768px) { .sn-carousel__track { --cols: 2.5; --gaps: 2; } }
@media (min-width: 1024px) { .sn-carousel__track { --cols: 4; --gaps: 3; } }

/* ---------- Bildspel / banner (snusify/hero, snusify/banner) ---------- */
.sn-slides { position: relative; padding: 0 var(--t-pad) clamp(15px, 13.239px + 0.4695vw, 20px); }
.sn-slides__viewport { display: grid; }
.sn-slides__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 293px auto;
	gap: 15px;
	min-height: 600px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s var(--t-ease), visibility 0s .6s;
}
.sn-slides__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--t-ease); }
@media (min-width: 768px) {
	.sn-slides__slide { grid-template-columns: 1fr 1fr; grid-template-rows: none; min-height: 0; height: clamp(420px, 388.310px + 8.4507vw, 510px); }
	.sn-slides__media { order: 2; }
}
.sn-slides__text {
	position: relative;
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 18px 20px 64px;
	border-radius: clamp(10px, 8.182px + 0.4848vw, 15.1632px);
	background: #F1F2F1;
	color: #000;
}
@media (min-width: 768px) {
	.sn-slides__text { order: 1; justify-content: center; padding: 60px 60px 130px; }
}
.sn-slides__copy { max-width: 504px; }
.sn-slides__media { position: relative; overflow: hidden; border-radius: clamp(10px, 8.182px + 0.4848vw, 15.1632px); background: var(--t-soft-2); }
.sn-slides__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-slides__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: "Krona One", var(--font-heading, sans-serif);
	font-size: clamp(10.5px, 9.972px + 0.1408vw, 12px);
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sn-slides__eyebrow::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 3px solid var(--t-accent);
	box-shadow: inset 0 0 0 2px #F1F2F1, inset 0 0 0 6px var(--t-accent);
}
.sn-slides__title {
	margin: 14px 0 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 19.606px + 2.2385vw, 51.84px);
	line-height: 1.08;
	letter-spacing: .01em;
	color: #000;
}
.sn-slides__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; margin: 10px 0 0; font-family: "Krona One", sans-serif; line-height: 1; }
.sn-slides__was { font-size: clamp(15px, 13.690px + 0.3493vw, 18.72px); color: #000; }
.sn-slides__now { font-size: clamp(26px, 21.070px + 1.3146vw, 40px); color: #DC2626; }
.sn-slides__unit { margin-left: -8px; font-size: clamp(13px, 12.507px + 0.1315vw, 14.4px); color: #000; }
.sn-slides__actions { display: flex; flex-wrap: wrap; gap: 8px clamp(8px, 6.592px + 0.3756vw, 12px); margin-top: clamp(16px, 13.887px + 0.5634vw, 22px); }
.sn-slides__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(46px, 45.296px + 0.1878vw, 48px);
	padding: 0 clamp(22px, 19.887px + 0.5634vw, 28px);
	border-radius: 60px;
	border: 2px solid #000;
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 13.648px + 0.0939vw, 15px);
	line-height: 1;
	text-decoration: none;
	transition: background .3s var(--t-ease), color .3s var(--t-ease);
}
.sn-slides__btn--primary { background: #000; color: #fff; }
.sn-slides__btn--primary:hover { background: var(--t-accent); border-color: var(--t-accent); }
.sn-slides__btn--secondary { color: #000; }
.sn-slides__btn--secondary:hover { background: #000; color: #fff; }
.sn-slides__nav {
	position: absolute;
	left: calc(var(--t-pad) + 20px);
	bottom: calc(clamp(15px, 13.239px + 0.4695vw, 20px) + 20px);
	display: flex;
	align-items: flex-start;
	z-index: 2;
}
.sn-slides__arrow { display: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.sn-slides__arrow svg { width: 32px; height: 32px; }
.sn-slides__dots { display: flex; }
.sn-slides__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.sn-slides__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #000; transform: translate(-50%, -50%); transition: all .3s var(--t-ease); }
.sn-slides__dot[aria-current="true"]::before { width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
@media (min-width: 768px) {
	.sn-slides__nav {
		left: calc(var(--t-pad) + 60px);
		width: min(504px, calc(50% - var(--t-pad) - 127px));
		bottom: calc(20px + 60px);
		justify-content: space-between;
		padding-top: 17px;
		border-top: 1px solid rgba(0, 0, 0, .12);
	}
	.sn-slides__arrow { display: block; }
	.sn-slides__dots { margin-top: 14px; }
}

/* Mörk variant (mittbanner) */
.sn-slides--dark { padding-top: clamp(54px, 47.662px + 1.6901vw, 72px); padding-bottom: 0; }
.sn-slides--dark .sn-slides__slide { grid-template-rows: none; min-height: 400px; }
@media (max-width: 767px) {
	.sn-slides--dark .sn-slides__slide { position: relative; }
	.sn-slides--dark .sn-slides__media { position: absolute; inset: 0; z-index: 0; }
	.sn-slides--dark .sn-slides__text { position: relative; z-index: 1; background: linear-gradient(rgba(3, 26, 46, .15) 0%, rgba(3, 26, 46, .55) 45%, var(--t-ink) 80%); }
}
@media (min-width: 768px) { .sn-slides--dark .sn-slides__slide { height: clamp(400px, 391.197px + 2.3474vw, 425px); } }
.sn-slides--dark .sn-slides__text { background: var(--t-ink); color: #F2EDE5; justify-content: flex-end; padding: 24px 20px; }
@media (min-width: 768px) { .sn-slides--dark .sn-slides__text { justify-content: center; padding: 44px 60px; } }
.sn-slides--dark .sn-slides__eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: clamp(10px, 9.296px + 0.1878vw, 12px); letter-spacing: .3em; color: var(--t-signal); }
.sn-slides--dark .sn-slides__eyebrow::before { width: 20px; height: 1px; border: 0; border-radius: 0; box-shadow: none; background: currentColor; }
.sn-slides--dark .sn-slides__title { font-family: Anton, sans-serif; font-size: clamp(40px, 32.789px + 1.9230vw, 60.48px); line-height: .9; letter-spacing: .005em; text-transform: uppercase; color: #F2EDE5; }
.sn-slides--dark .sn-slides__price { font-family: Anton, sans-serif; align-items: center; margin-top: 13px; }
.sn-slides--dark .sn-slides__now { font-size: clamp(28px, 24.676px + 0.8864vw, 37.44px); color: #F2EDE5; }
.sn-slides--dark .sn-slides__was { font-size: clamp(16px, 14.592px + 0.3756vw, 20px); color: rgba(242, 237, 229, .6); }
.sn-slides--dark .sn-slides__unit { margin-left: -2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: clamp(10px, 9.296px + 0.1878vw, 12px); letter-spacing: .22em; text-transform: uppercase; color: #F2EDE5; }
.sn-slides--dark .sn-slides__actions { margin-top: clamp(17px, 14.183px + 0.7512vw, 25px); gap: clamp(8px, 6.592px + 0.3756vw, 12px); }
.sn-slides--dark .sn-slides__btn {
	height: clamp(44px, 41.183px + 0.7512vw, 52px);
	padding: 0 clamp(12px, 7.070px + 1.3146vw, 26px);
	border-radius: 0;
	border: 1px solid rgba(242, 237, 229, .55);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: clamp(10px, 8.944px + 0.2817vw, 13px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F2EDE5;
	background: transparent;
}
.sn-slides--dark .sn-slides__btn--primary { background: var(--t-signal); border-color: var(--t-signal); color: var(--t-ink); }
.sn-slides--dark .sn-slides__btn:hover { background: #F2EDE5; border-color: #F2EDE5; color: var(--t-ink); }
.sn-slides__stamp {
	position: absolute;
	top: clamp(11px, 4.662px + 1.6901vw, 29px);
	right: clamp(14px, 6.606px + 1.9718vw, 35px);
	z-index: 1;
	padding: clamp(7px, 6.296px + 0.1878vw, 9px) clamp(10px, 8.592px + 0.3756vw, 14px) clamp(5px, 4.296px + 0.1878vw, 7px);
	border: 3px solid var(--t-signal);
	border-radius: 3px;
	font-family: Anton, sans-serif;
	font-size: clamp(16.5px, 12.828px + 0.9792vw, 26.928px);
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--t-signal);
	transform: rotate(-8deg);
}

/* ---------- Rullande remsa (snusify/marquee) ---------- */
.sn-ticker { overflow: hidden; background: #000; padding: clamp(9px, 7.944px + 0.2817vw, 12px) 0; }
.sn-ticker__track { display: flex; width: max-content; animation: sn-ticker var(--sn-ticker-speed, 40s) linear infinite; }
.sn-ticker:hover .sn-ticker__track { animation-play-state: paused; }
.sn-ticker__group { display: flex; align-items: center; flex: none; }
.sn-ticker__item {
	display: block;
	font-family: Inter, sans-serif;
	font-weight: 900;
	font-size: clamp(33.6px, 25.713px + 2.1033vw, 56px);
	line-height: 1.2;
	letter-spacing: -.04em;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.sn-ticker__item.is-alt { color: var(--t-signal); }
.sn-ticker__item strong { font-weight: inherit; }
.sn-ticker__sep { flex: none; width: clamp(14px, 19.408px + -0.3756vw, 18px); height: clamp(14px, 19.408px + -0.3756vw, 18px); margin: 0 clamp(30px, 21.901px + 2.1596vw, 53px); border-radius: 50%; border: 2px solid var(--t-signal); }
@keyframes sn-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sn-ticker__track { animation: none; } }

/* ---------- Kampanj-bento (snusify/bento) ---------- */
.sn-bento { padding: clamp(30px, 26.479px + 0.9390vw, 40px) var(--t-pad); }
.sn-bento__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .sn-bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.sn-bento__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: 150px;
	padding: 14px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--t-ink);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
@media (min-width: 768px) { .sn-bento__tile { min-height: 245px; padding: 24px; } }
.sn-bento__tile--wide { grid-column: span 2; }
.sn-bento__tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sn-bento__tile:hover img { transform: scale(1.04); }
.sn-bento__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(3, 26, 46, 0) 30%, rgba(3, 26, 46, .8) 100%); }
.sn-bento__label { padding: clamp(4px, 3.296px + 0.1878vw, 6px) clamp(18px, 15.887px + 0.5634vw, 24px) clamp(4px, 3.296px + 0.1878vw, 6px) clamp(12px, 10.944px + 0.2817vw, 15px); font-size: clamp(10px, 9.648px + 0.0939vw, 11px); letter-spacing: .08em; margin-bottom: clamp(10px, 8.944px + 0.2817vw, 13px); }
.sn-bento__label--signal { color: #000; }
.sn-bento__label--signal::before { background: var(--t-signal-dark); }
.sn-bento__label--signal::after { background: var(--t-signal); }
.sn-bento__label--accent { color: var(--t-signal); font-size: clamp(10px, 9.296px + 0.1878vw, 12px); letter-spacing: .04em; }
.sn-bento__title { margin: 0; font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(24px, 18.254px + 1.5324vw, 40.32px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: #fff; }
.sn-bento__tile:not(.sn-bento__tile--wide) .sn-bento__title { font-size: clamp(18px, 14.704px + 0.8789vw, 27.36px); }
.sn-bento__text { margin: clamp(7px, 5.944px + 0.2817vw, 10px) 0 0; font-size: clamp(13px, 12.296px + 0.1878vw, 15px); font-weight: 500; line-height: 1.3; color: #fff; }

/* ---------- Gemensamt sektionshuvud + pill-knappar ---------- */
.sn-carousel__foot { display: none; justify-content: center; margin-top: clamp(24px, 18.366px + 1.5023vw, 40px); padding: 0 var(--t-pad); }
@media (min-width: 768px) { .sn-carousel__foot { display: flex; } .sn-carousel__all--head { display: none !important; } }
.sn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--t-pad); margin-bottom: clamp(32px, 30.239px + 0.4695vw, 37px); }
.sn-head--xl { margin-bottom: clamp(36px, 35.296px + 0.1878vw, 38px); }
.sn-head__title { margin: 0; flex: 1 1 auto; font-family: Inter, sans-serif; font-weight: 700; line-height: 1.2; color: var(--t-text); text-transform: uppercase; }
.sn-head--xl .sn-head__title { font-size: clamp(40px, 30.101px + 2.6396vw, 68.112px); line-height: 1.16; letter-spacing: -.04em; max-width: 9.5em; }
.sn-head--l .sn-head__title { font-size: clamp(32px, 26.190px + 1.5492vw, 48.4992px); letter-spacing: -.01em; }
@media (min-width: 768px) { .sn-head--xl .sn-head__title { max-width: none; } }
.sn-head .sn-carousel__nav { display: none; }
@media (min-width: 768px) { .sn-head .sn-carousel__nav { display: flex; } }
.sn-pill {
	display: inline-flex; align-items: center; justify-content: center;
	padding: clamp(14px, 12.592px + 0.3756vw, 18px) clamp(16px, 12.479px + 0.9390vw, 26px);
	border-radius: 60px;
	border: 1px solid var(--t-ink);
	background: var(--t-ink);
	color: #fff;
	gap: clamp(7px, 5.239px + 0.4695vw, 12px);
	font-family: Inter, sans-serif; font-weight: 500; font-size: clamp(12px, 10.849px + 0.3070vw, 15.2693px); line-height: clamp(14px, 11.887px + 0.5634vw, 20px);
	text-decoration: none;
	transition: background .3s var(--t-ease), color .3s var(--t-ease);
}
.sn-pill:hover { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.sn-pill--outline { background: transparent; color: var(--t-ink); }
.sn-pill--outline:hover { background: var(--t-ink); border-color: var(--t-ink); color: #fff; }
@media (max-width: 767px) { .sn-head__link { order: 3; } }

/* ---------- Populära varumärken (snusify/brands) ---------- */
.sn-brands2 { padding: clamp(45px, 39.718px + 1.4085vw, 60px) 0 clamp(9px, 7.944px + 0.2817vw, 12px); }
@media (max-width: 767px) {
	.sn-brands2__track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
	.sn-brands2__track > :nth-child(n+7) { display: none; }
}
.sn-brand2 { display: flex; flex-direction: column; background: #FAFAFA; color: var(--t-text); text-decoration: none; }
.sn-brand2__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--t-soft); }
.sn-brand2__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sn-brand2:hover .sn-brand2__media img { transform: scale(1.04); }
.sn-brand2__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(15px, 13.878px + 0.2993vw, 18.1872px) clamp(15px, 9.608px + 1.4377vw, 30.312px) clamp(19px, 15.017px + 1.0622vw, 30.312px); }
.sn-brand2__name { font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(18px, 15.548px + 0.6538vw, 24.9635px); line-height: 1.25; letter-spacing: -.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-brand2__name small { margin-left: 4px; font-size: clamp(10px, 9.296px + 0.1878vw, 12px); font-weight: 500; letter-spacing: 0; vertical-align: top; line-height: 1.6; }
.sn-brand2 .sn-icon { flex: none; width: clamp(16px, 14.592px + 0.3756vw, 20px); height: clamp(16px, 14.592px + 0.3756vw, 20px); }

/* ---------- Bild + text (snusify/media-text) ---------- */
.sn-split { display: grid; gap: 40px; padding: clamp(54px, 47.662px + 1.6901vw, 72px) var(--t-pad); }
.sn-split__media { position: relative; height: 325px; overflow: hidden; border-radius: clamp(10px, 8.182px + 0.4848vw, 15.1632px); background: #FAFAFA; }
.sn-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
	.sn-split { grid-template-columns: minmax(0, 753fr) minmax(0, 531fr); gap: 60px; align-items: center; }
	.sn-split--media-right { grid-template-columns: minmax(0, 531fr) minmax(0, 753fr); }
	.sn-split--media-right .sn-split__media { order: 2; }
	.sn-split__media { height: clamp(325px, 289.789px + 9.3897vw, 425px); }
}
.sn-split__title { margin: 0; font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(32px, 26.190px + 1.5492vw, 48.4992px); line-height: 1; letter-spacing: -.01em; color: var(--t-text); }
.sn-split__text { margin: clamp(30px, 26.831px + 0.8451vw, 39px) 0 0; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }
.sn-split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 26.127px + 1.0329vw, 41px); }
.sn-split__actions .sn-pill { padding: 18px 26px; font-size: clamp(14px, 13.553px + 0.1192vw, 15.2693px); }

/* ---------- As seen in (snusify/press) ---------- */
.sn-press { padding: 0 var(--t-pad) clamp(48px, 42.366px + 1.5023vw, 64px); text-align: center; }
.sn-press__title { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; font-family: Inter, sans-serif; font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: rgba(23, 23, 23, .55); }
.sn-press__title::before, .sn-press__title::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .5; }
.sn-press__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; list-style: none; margin: 32px 0 0; padding: 0; }
.sn-press__logos li { display: grid; place-items: center; height: 64px; padding: 12px 10px; border: 1px solid rgba(23, 23, 23, .08); margin: 0 -1px -1px 0; }
.sn-press__logos img { max-height: 28px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .85; }
@media (min-width: 768px) {
	.sn-press__logos { display: flex; justify-content: center; gap: 64px; margin-top: 57px; }
	.sn-press__logos li { height: auto; padding: 0; border: 0; margin: 0; }
}
.sn-press__note { display: inline-block; margin: clamp(20px, 8.380px + 3.0986vw, 53px) 0 0; padding-bottom: 2px; border-bottom: 1px solid rgba(23, 23, 23, .2); font-size: clamp(11px, 10.648px + 0.0939vw, 12px); font-weight: 500; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: rgba(23, 23, 23, .55); text-decoration: none; }

/* ---------- Mörk länklista / länder (snusify/links) ---------- */
.sn-links { padding: clamp(51px, 45.014px + 1.5962vw, 68px) 0 clamp(45px, 39.718px + 1.4085vw, 60px); background: var(--t-ink); color: #fff; }
.sn-links .sn-head__title { color: #fff; }
.sn-links .sn-carousel__arrow { border-color: rgba(255, 255, 255, .85); color: #fff; }
.sn-links .sn-carousel__arrow:hover:not(:disabled) { background: #fff; color: var(--t-ink); }
.sn-links__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 80px; color: #fff; text-decoration: none; font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(20px, 18.252px + 0.4661vw, 24.9635px); line-height: 1.25; letter-spacing: -.05em; }
.sn-links__item .sn-icon { flex: none; width: 20px; height: 20px; opacity: .8; }
.sn-links__item:hover .sn-icon { opacity: 1; transform: translateX(3px); transition: transform .3s var(--t-ease); }
@media (max-width: 767px) {
	.sn-links__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 0; overflow: visible; }
	.sn-links__item { height: 64px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}

/* ---------- Guider & bloggar (snusify/posts) ---------- */
.sn-posts2 { padding: clamp(54px, 47.662px + 1.6901vw, 72px) 0; }
.sn-posts2 .sn-head { align-items: center; margin-bottom: clamp(32px, 30.239px + 0.4695vw, 37px); }
.sn-posts2__grid { display: grid; gap: 40px; padding: 0 var(--t-pad); }
@media (min-width: 768px) { .sn-posts2__grid { grid-template-columns: minmax(0, 763fr) minmax(0, 531fr); gap: 50px; } }
.sn-posts2__big { position: relative; display: flex; align-items: flex-end; min-height: 419px; overflow: hidden; border-radius: clamp(10px, 8.182px + 0.4848vw, 15.1632px); background: #FAFAFA; color: #fff; text-decoration: none; isolation: isolate; }
@media (min-width: 768px) { .sn-posts2__big { min-height: 650px; } }
.sn-posts2__big img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sn-posts2__big::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(3, 26, 46, 0) 40%, rgba(3, 26, 46, .75) 100%); }
.sn-posts2__big:hover img, .sn-posts2__item:hover img { transform: scale(1.04); }
.sn-posts2__big-body { display: flex; flex-direction: column; gap: clamp(21px, 18.535px + 0.6573vw, 28px); padding: clamp(16px, 4.028px + 3.1925vw, 50px) clamp(16px, 4.028px + 3.1925vw, 50px) clamp(40px, 36.479px + 0.9390vw, 50px); }
.sn-posts2__big-title { font-weight: 500; font-size: clamp(24px, 19.643px + 1.1619vw, 36.3744px); line-height: clamp(30px, 27.755px + 0.5985vw, 36.3744px); letter-spacing: -.025em; }
.sn-posts2__more { font-size: clamp(14px, 13.296px + 0.1878vw, 16px); font-weight: 500; line-height: 1.25; text-decoration: underline; text-underline-offset: 3px; }
.sn-posts2__list { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) { .sn-posts2__list { gap: 50px; } }
.sn-posts2__item { display: grid; gap: 20px; color: var(--t-text); text-decoration: none; }
@media (min-width: 768px) { .sn-posts2__item { grid-template-columns: 212px minmax(0, 1fr); gap: 33px; align-items: start; } }
.sn-posts2__thumb { display: block; height: 251px; overflow: hidden; border-radius: clamp(10px, 8.182px + 0.4848vw, 15.1632px); background: #FAFAFA; }
@media (min-width: 768px) { .sn-posts2__thumb { height: 183px; } }
.sn-posts2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sn-posts2__item-body { display: flex; flex-direction: column; gap: clamp(12px, 7.775px + 1.1268vw, 24px); }
.sn-posts2__item-title { font-weight: 500; font-size: clamp(18px, 16.608px + 0.3713vw, 21.9546px); line-height: 1.25; letter-spacing: -.025em; }
.sn-posts2__item .sn-posts2__more { font-size: 14px; }

/* ---------- SEO-text (snusify/seo) ---------- */
.sn-seo2 { padding: clamp(9px, 7.944px + 0.2817vw, 12px) var(--t-pad); }
.sn-seo2__chips { margin-bottom: 2rem; }
.sn-seo2__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .sn-seo2__grid { grid-template-columns: minmax(0, 454fr) minmax(0, 770fr); gap: 120px; } }
.sn-seo2__intro p, .sn-seo2__text p { margin: 0 0 1em; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }
.sn-seo2__intro p:last-child, .sn-seo2__text p:last-child { margin-bottom: 0; }
.sn-seo2__title { margin: 0 0 20px; font-family: Inter, sans-serif; font-weight: 900; font-size: clamp(32px, 26.190px + 1.5492vw, 48.4992px); line-height: 1; letter-spacing: -.01em; color: var(--t-text); }

/* ---------- Fördelar (snusify/usp) ---------- */
.sn-usp2 { padding: clamp(45px, 39.718px + 1.4085vw, 60px) 0; }
.sn-usp2__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--t-pad); padding: 0 var(--t-pad); scroll-padding: 0 var(--t-pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sn-dots { display: flex; justify-content: center; margin-top: 23px; }
.sn-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.sn-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--t-text); transform: translate(-50%, -50%); }
.sn-dots button[aria-current="true"]::before { width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--t-text); }
@media (min-width: 768px) { .sn-dots { display: none; } }
.sn-usp2__track::-webkit-scrollbar { display: none; }
.sn-usp2__item { display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
@media (min-width: 768px) {
	.sn-usp2__track { display: flex; justify-content: space-between; gap: 40px; overflow: visible; }
	.sn-usp2__item { flex-direction: row; max-width: 386px; }
}
.sn-usp2__icon { flex: none; width: 32px; height: 32px; color: var(--t-text); }
.sn-usp2__title { margin: 0; font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--t-text); }
.sn-usp2__text { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }

.sn-pill .sn-icon { width: clamp(14px, 11.887px + 0.5634vw, 20px); height: clamp(14px, 11.887px + 0.5634vw, 20px); flex: none; }
.sn-posts2__big, .sn-posts2__big:hover, .sn-posts2__big-title, .sn-posts2__big .sn-posts2__more { color: #fff; }
.sn-posts2__item, .sn-posts2__item:hover { color: var(--t-text); }
@media (min-width: 768px) {
	.sn-usp2__item { flex: 1 1 0; max-width: none; }
	.sn-usp2__item + .sn-usp2__item { padding-left: 40px; border-left: 1px solid rgba(23, 23, 23, .1); }
}
/* Kortbild: luft runt dosan som TSO:s bilder */
.sn-pc__media img { padding: 18%; box-sizing: border-box; }
@media (max-width: 767px) { .sn-pc__add .sn-icon { display: none; } }
/* Styrkeikon med prickar (○○○●●) */
.sn-pc__strength { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: none; }
.sn-pc__strength .sn-icon { width: 22px; height: 16px; }
.sn-pc__dots { display: flex; gap: 1.5px; }
.sn-pc__dots i { width: 3.5px; height: 3.5px; border-radius: 50%; border: 1px solid currentColor; }
.sn-pc__dots i.on { background: currentColor; }
@media (max-width: 767px) {
	.sn-pc__strength .sn-icon { width: 17px; height: 13px; }
	.sn-pc__dots i { width: 3px; height: 3px; }
}

/* ---------- Annonsbar ---------- */
.sn-topbar2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 var(--t-pad); background: #000; color: #fff; }
.sn-topbar2__social { display: none; gap: 24px; }
.sn-topbar2__social a { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; }
.sn-topbar2__social .sn-icon { width: 20px; height: 20px; }
@media (min-width: 768px) { .sn-topbar2__social { display: flex; } }
.sn-topbar2__center { display: flex; align-items: center; justify-content: space-between; width: min(536px, calc(100vw - 12px)); }
@media (max-width: 767px) { .sn-topbar2 { grid-template-columns: 1fr; padding: 0 6px; } .sn-topbar2__center { width: 100%; } }
.sn-topbar2__arrow { display: grid; place-items: center; width: 44px; height: 48px; padding: 0 14px; border: 0; background: none; color: #fff; cursor: pointer; }
.sn-topbar2__arrow .sn-icon { width: 16px; height: 16px; }
.sn-topbar2__msgs { position: relative; flex: 1; display: grid; }
.sn-topbar2__msg { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-family: Inter, sans-serif; font-size: 15px; line-height: 1.25; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--t-ease), transform .4s var(--t-ease); }
.sn-topbar2__msg.is-active { opacity: 1; transform: none; }
.sn-topbar2__msg .sn-icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 767px) { .sn-topbar2__msg { font-size: clamp(13px, 12.296px + 0.1878vw, 15px); } }

/* ---------- Header ---------- */
.sn-header2 { position: sticky; top: 0; z-index: 60; background: #fff; }
.admin-bar .sn-header2 { top: 32px; }
@media (max-width: 782px) { .admin-bar .sn-header2 { top: 0; } }
.sn-header2__inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 63px; padding: 0 10px; }
@media (min-width: 1024px) { .sn-header2__inner { display: flex; height: 79px; padding: 0 var(--t-pad); } }
.sn-header2__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--t-text); cursor: pointer; text-decoration: none; }
.sn-header2__icon .sn-icon { width: 22px; height: 22px; }
.sn-header2__icon:hover { background: var(--t-soft); }
.sn-header2__burger { justify-self: start; }
@media (min-width: 1024px) { .sn-header2__burger { display: none; } }
.sn-header2__logo { justify-self: center; }
.sn-header2__logo .sn-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Snusifys logga: ordmärket på desktop (höjd som TSO:s logga), symbolen på mobil. */
.sn-logo .sn-logo__full { display: block; width: auto; height: clamp(34px, 31.887px + 0.5634vw, 40px); }
.sn-logo .sn-logo__mark-img { display: none; width: auto; height: 42px; }
@media (max-width: 767px) { .sn-header2 .sn-logo .sn-logo__full { display: none; } .sn-header2 .sn-logo .sn-logo__mark-img { display: block; } }
.sn-header2__logo img, .sn-header2__logo svg { height: 45px; width: auto; }
@media (min-width: 1024px) { .sn-header2__logo img, .sn-header2__logo svg { height: 55px; } }
.sn-header2__nav { display: none; }
@media (min-width: 1024px) { .sn-header2__nav { display: block; margin-left: 40px; } }
.sn-header2__actions { display: flex; justify-content: flex-end; gap: 3px; margin-left: auto; }
.sn-header2__account { display: none; }
@media (min-width: 1024px) { .sn-header2__account { display: grid; } }
.sn-header2__cart .sn-cart-count { position: absolute; top: 2px; right: 0; min-width: 0; height: auto; padding: 0; background: none; color: var(--t-text); font-size: 11px; font-weight: 500; line-height: 1; }

/* Menyknappar */
.sn-nav2 { display: flex; list-style: none; margin: 0; padding: 0; }
.sn-nav2__link { display: flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 60px; font-family: Inter, sans-serif; font-weight: 500; font-size: clamp(14px, 13.106px + 0.2384vw, 16.5386px); color: var(--t-text); text-decoration: none; white-space: nowrap; transition: background .3s var(--t-ease), color .3s var(--t-ease); }
.sn-nav2__item:hover > .sn-nav2__link, .sn-nav2__item:focus-within > .sn-nav2__link, .sn-nav2__link.is-current { background: var(--t-text); color: #fff; }

/* Megameny */
.sn-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 59; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--t-ease), transform .25s var(--t-ease), visibility 0s .25s; pointer-events: none; }
.sn-nav2__item:hover > .sn-mega, .sn-nav2__item:focus-within > .sn-mega { visibility: visible; opacity: 1; transform: none; transition-delay: .08s; pointer-events: auto; }
.sn-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.sn-mega__inner { display: flex; gap: 48px; padding: 32px var(--t-pad) 40px; background: #fff; border-radius: 0 0 20px 20px; box-shadow: 0 24px 40px -24px rgba(3, 26, 46, .25); }
.sn-mega__links { flex: 1; max-width: 640px; list-style: none; margin: 0; padding: 32px 56px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.sn-mega__links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(23, 23, 23, .08); font-weight: 600; font-size: 18px; color: var(--t-text); text-decoration: none; }
.sn-mega__links a .sn-icon { width: 20px; height: 20px; transition: transform .3s var(--t-ease); }
.sn-mega__links a:hover .sn-icon { transform: translateX(4px); }
.sn-mega__media { display: block; width: 320px; height: 320px; overflow: hidden; border-radius: 4px; background: var(--t-soft); }
.sn-mega__media img { width: 100%; height: 100%; object-fit: cover; }
.sn-mega__brands { flex: 1; columns: 5; column-gap: 24px; list-style: none; margin: 0; padding: 0 22px; }
.sn-mega__brands li { break-inside: avoid; }
.sn-mega__brands a { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 600; font-size: 15px; color: var(--t-text); text-decoration: none; }
.sn-mega__brands a:hover span:last-child { text-decoration: underline; }
.sn-mega__brands sup { margin-left: 2px; font-size: 9px; font-weight: 500; }
.sn-mega__logo { display: block; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: var(--t-soft); }
.sn-mega__logo img { width: 100%; height: 100%; object-fit: cover; }

/* Mobilmeny i lådan */
.sn-mnav { list-style: none; margin: 0; padding: 0; }
.sn-mnav > li { border-bottom: 1px solid rgba(23, 23, 23, .08); }
.sn-mnav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border: 0; background: none; font: 500 18px/1.2 Inter, sans-serif; color: var(--t-text); text-align: left; text-decoration: none; cursor: pointer; }
.sn-mnav__toggle .sn-icon { width: 18px; height: 18px; transition: transform .3s var(--t-ease); }
.sn-mnav__toggle[aria-expanded="true"] .sn-icon { transform: rotate(90deg); }
.sn-mnav__sub { padding: 0 0 16px; }
.sn-mnav__sub ul { list-style: none; margin: 0; padding: 0; }
.sn-mnav__sub a { display: block; padding: 8px 0; color: var(--t-ink-2); text-decoration: none; }
.sn-mnav__sub .sn-mega__brands { columns: 2; padding: 0; column-gap: 12px; }

/* ---------- Footer ---------- */
.sn-footer2 { margin-top: clamp(20px, 12.958px + 1.8779vw, 40px); padding: clamp(54px, 47.662px + 1.6901vw, 72px) var(--t-pad); border-radius: clamp(16px, 13.633px + 0.6313vw, 22.7232px); background: var(--t-accent); color: #fff; }
.sn-footer2 a { color: #fff; text-decoration: none; }
.sn-footer2__main { display: grid; gap: 40px; }
@media (min-width: 1024px) {
	.sn-footer2__main { grid-template-columns: minmax(0, 671fr) minmax(0, 551fr); grid-template-rows: 1fr auto; column-gap: 122px; }
	.sn-footer2__cols, .sn-footer2__contact { grid-column: 1; border-right: 1px solid rgba(255, 255, 255, .18); padding-right: 40px; }
	.sn-footer2__aside { grid-column: 2; grid-row: 1 / span 2; }
}
.sn-footer2__cols { display: grid; gap: 0; }
@media (min-width: 1024px) { .sn-footer2__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; border: 0; border-radius: 0; } }
@media (max-width: 1023px) { .sn-footer2__cols { border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; } }
.sn-footer2__col { border-bottom: 1px solid rgba(255, 255, 255, .18); padding: 0 21px; }
.sn-footer2__col:last-child { border-bottom: 0; }
@media (min-width: 1024px) { .sn-footer2__col { border: 0; padding: 0; } }
.sn-footer2__heading { display: flex; align-items: center; justify-content: space-between; padding: 21px 0; list-style: none; cursor: pointer; font-family: Inter, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.sn-footer2__heading::-webkit-details-marker { display: none; }
.sn-footer2__heading .sn-icon { width: 20px; height: 20px; transform: rotate(90deg); transition: transform .3s var(--t-ease); }
.sn-footer2__col[open] .sn-footer2__heading .sn-icon { transform: rotate(-90deg); }
@media (min-width: 1024px) {
	.sn-footer2__heading { padding: 0 0 28px; font-weight: 700; font-size: 21.0786px; pointer-events: none; }
	.sn-footer2__heading .sn-icon { display: none; }
}
.sn-footer2__col ul { list-style: none; margin: 0; padding: 0 0 21px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .sn-footer2__col ul { padding: 0; } }
.sn-footer2__col a { font-size: clamp(14px, 13.106px + 0.2384vw, 16.5386px); line-height: 1.25; }
.sn-footer2__col a:hover { text-decoration: underline; }
.sn-footer2__contact { display: flex; flex-direction: column; gap: 4px; align-self: end; }
.sn-footer2__contact a { align-self: flex-start; font-size: clamp(18px, 16.592px + 0.3756vw, 22px); line-height: 1.3; border-bottom: 1px solid currentColor; }
.sn-footer2__aside { display: flex; flex-direction: column; align-items: flex-start; }
.sn-footer2__logo { display: grid; place-items: center; width: 120px; height: 120px; }
.sn-footer2__logo img { max-width: 100%; max-height: 100%; }
/* Snusifys symbol på egen vit platta (som TSO:s kvadratiska logga) – annars försvinner den blå delen mot sidfoten. */
.sn-footer2__logo:has(img) { box-sizing: border-box; padding: 22px; border-radius: 28px; background: #fff; }
.sn-footer2__mark { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 28px; background: var(--t-signal); color: var(--t-ink); font-weight: 900; font-size: 64px; }
.sn-footer2__news-title { max-width: 430px; margin: 0 0 24px; font-family: Inter, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.2; color: #fff; }
@media (min-width: 1024px) { .sn-footer2__news-title { margin-top: 50px; font-weight: 700; font-size: 36.3744px; line-height: 1; } }
@media (max-width: 1023px) { .sn-footer2__logo { display: none; } }
.sn-footer2__form { position: relative; width: 100%; max-width: 430px; }
.sn-footer2__form input { width: 100%; height: 62px; padding: 0 70px 0 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 60px; background: rgba(255, 255, 255, .06); color: #fff; font: 400 16px/1.6 Inter, sans-serif; }
.sn-footer2__form input::placeholder { color: rgba(255, 255, 255, .75); }
.sn-footer2__form button { position: absolute; right: 11px; top: 11px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--t-ink); cursor: pointer; }
.sn-footer2__form button .sn-icon { width: 18px; height: 18px; }
.sn-footer2__social { display: flex; gap: 28px; margin-top: auto; padding-top: 40px; }
.sn-footer2__social .sn-icon { width: 24px; height: 24px; }

/* ---------- Copyright-rad ---------- */
.sn-copy { display: grid; justify-items: center; gap: 16px; margin-top: calc(clamp(16px, 13.633px + 0.6313vw, 22.7232px) * -1); padding: calc(clamp(16px, 13.633px + 0.6313vw, 22.7232px) + 28px) var(--t-pad) 28px; border-radius: clamp(16px, 13.633px + 0.6313vw, 22.7232px) clamp(16px, 13.633px + 0.6313vw, 22.7232px) 0 0; background: var(--t-ink); color: #fff; text-align: center; }
.sn-footer2 { position: relative; z-index: 1; }
@media (min-width: 1024px) { .sn-copy { grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: stretch; text-align: left; } }
.sn-copy__left { order: 3; }
@media (min-width: 1024px) { .sn-copy__left { order: 0; } }
.sn-copy__left p { margin: 0; font-size: 15px; line-height: 1.65; }
.sn-copy__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
@media (min-width: 1024px) { .sn-copy__legal { justify-content: flex-start; } }
.sn-copy__legal a { font-size: 12px; line-height: 1.65; color: #fff; text-decoration: none; }
.sn-copy__legal a:hover { text-decoration: underline; }
.sn-copy__region { display: flex; align-items: center; gap: 10px; height: clamp(46px, 45.296px + 0.1878vw, 48px); padding: 0 clamp(40px, 37.183px + 0.7512vw, 48px); border: 1px solid rgba(255, 255, 255, .3); border-radius: 60px; font-size: clamp(13px, 12.648px + 0.0939vw, 14px); }
.sn-copy__region .sn-icon { width: 16px; height: 16px; }
.sn-copy__pay { justify-self: center; }
@media (min-width: 1024px) { .sn-copy__pay { justify-self: end; } }
.sn-copy__warning { grid-column: 1 / -1; order: 4; margin: 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .6); text-align: center; }
.sn-drawer .sn-mnav .sn-mnav__link { padding: 16px 0; font-weight: 500; font-size: 18px; color: var(--t-text); background: none; border: 0; border-radius: 0; }
.sn-drawer .sn-mnav__sub a { padding: 8px 0 8px 4px; font-weight: 400; font-size: 16px; border: 0; color: var(--t-ink-2); }
.sn-drawer .sn-mnav__sub .sn-mega__brands a { display: flex; padding: 6px 0; }
.sn-drawer__foot .sn-icon { width: 20px; height: 20px; }

/* =====================================================================
   Mikroanimationer och hover (återanvändbara – se docs/03-komponenter.md)
   ===================================================================== */
:root { --t-ease-out: cubic-bezier(.3, 1, .3, 1); --t-ease-io: cubic-bezier(.7, 0, .3, 1); }

/* --- Rund fyllning i knappar (.sn-fill läggs in av fx.js) --- */
.sn-has-fill { position: relative; overflow: hidden; isolation: isolate; }
.sn-fill {
	position: absolute; left: 50%; top: 50%; z-index: -1;
	width: max(260%, 160px); aspect-ratio: 1; border-radius: 50%;
	background: var(--fill-bg, #fff);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .55s var(--t-ease-out);
	pointer-events: none;
}
.sn-has-fill:hover > .sn-fill, .sn-has-fill:focus-visible > .sn-fill { transform: translate(-50%, -50%) scale(1); }
.sn-has-fill { transition: color .35s var(--t-ease-out), border-color .35s var(--t-ease-out); }

/* Färgpar per knapptyp: vad fyllningen har för färg och vad texten blir */
.sn-pill { --fill-bg: #fff; }
.sn-pill:hover { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-ink); }
.sn-pill--outline { --fill-bg: var(--t-ink); }
.sn-pill--outline:hover { background: transparent; color: #fff; }
.sn-slides__btn--primary { --fill-bg: #fff; }
.sn-slides__btn--primary:hover { background: #000; border-color: #000; color: #000; }
.sn-slides__btn--secondary { --fill-bg: #000; }
.sn-slides__btn--secondary:hover { background: transparent; color: #fff; }
.sn-slides--dark .sn-slides__btn { --fill-bg: #F2EDE5; }
.sn-slides--dark .sn-slides__btn:hover { background: transparent; border-color: #F2EDE5; color: var(--t-ink); }
.sn-slides--dark .sn-slides__btn--primary:hover { background: var(--t-signal); }
.sn-carousel__arrow { --fill-bg: var(--t-ink); }
.sn-carousel__arrow:hover:not(:disabled) { background: transparent; color: #fff; }
.sn-links .sn-carousel__arrow { --fill-bg: #fff; }
.sn-links .sn-carousel__arrow:hover:not(:disabled) { background: transparent; color: var(--t-ink); }
.sn-footer2__form button { --fill-bg: var(--t-ink); transition: color .35s var(--t-ease-out); }
.sn-footer2__form button:hover { color: #fff; }
.sn-carousel__arrow:disabled > .sn-fill { display: none; }

/* --- Menyn: texten rullar --- */
.sn-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.sn-roll > span { display: block; transition: transform .45s var(--t-ease-out), opacity .45s var(--t-ease-out); }
.sn-roll > span + span { position: absolute; inset: 0; opacity: 0; transform: translateY(70%) scale(.6); }
.sn-nav2__item:hover .sn-roll > span:first-child, .sn-nav2__link:focus-visible .sn-roll > span:first-child { opacity: 0; transform: translateY(-10%) scale(.6); }
.sn-nav2__item:hover .sn-roll > span + span, .sn-nav2__link:focus-visible .sn-roll > span + span { opacity: 1; transform: none; }
.sn-nav2__link { transition: background .3s var(--t-ease-out), color .3s var(--t-ease-out), transform .3s var(--t-ease-out); }
.sn-carousel__arrow { transition: transform .3s var(--t-ease-out), color .35s var(--t-ease-out), opacity .2s; }

/* --- Understrykning som växer fram (.sn-ulink, och kortens/listornas länkar) --- */
.sn-ulink, .sn-pc__title, .sn-posts2__item-title, .sn-posts2__big-title, .sn-footer2__col a, .sn-copy__legal a, .sn-mega__brands a > span:last-child, .sn-brand2__name, .sn-links__item > span, .sn-mnav__sub a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1.35px;
	transition: background-size .5s var(--t-ease-out);
}
.sn-ulink:hover, .sn-pc__title:hover, .sn-posts2__item:hover .sn-posts2__item-title, .sn-posts2__big:hover .sn-posts2__big-title, .sn-footer2__col a:hover, .sn-copy__legal a:hover, .sn-mega__brands a:hover > span:last-child, .sn-brand2:hover .sn-brand2__name, .sn-links__item:hover > span, .sn-mnav__sub a:hover {
	background-position: 0 100%;
	background-size: 100% 1.35px;
	text-decoration: none;
}
.sn-brand2__name { display: inline; }
.sn-footer2__contact a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; border-bottom: 0; transition: background-size .5s var(--t-ease-out); }
.sn-footer2__contact a:hover { background-position: 100% 100%; background-size: 0 1px; }
.sn-posts2__more { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size .5s var(--t-ease-out); align-self: flex-start; }
.sn-posts2__big:hover .sn-posts2__more, .sn-posts2__item:hover .sn-posts2__more { background-position: 100% 100%; background-size: 0 1px; }

/* --- Bilder: zoom vid hover --- */
.sn-pc__media { overflow: hidden; }
.sn-pc__media img, .sn-brand2__media img, .sn-posts2__thumb img, .sn-posts2__big img, .sn-split__media img, .sn-mega__media img { transition: transform .6s var(--t-ease-out); }
.sn-pc__media:hover img, .sn-brand2:hover .sn-brand2__media img, .sn-posts2__item:hover img, .sn-posts2__big:hover img, .sn-mega__media:hover img { transform: scale(1.05); }

/* --- Ikoner som vrids/glider --- */
.sn-brand2 .sn-icon, .sn-mega__links a .sn-icon, .sn-links__item .sn-icon { transition: transform .45s var(--t-ease-out); }
.sn-brand2:hover .sn-icon, .sn-mega__links a:hover .sn-icon { transform: rotate(90deg); }
.sn-links__item:hover .sn-icon { transform: rotate(90deg); opacity: 1; }
.sn-drawer [data-sn-close] .sn-icon, .sn-search [data-sn-close] .sn-icon { transition: transform .45s var(--t-ease-out); }
.sn-drawer [data-sn-close]:hover .sn-icon, .sn-search [data-sn-close]:hover .sn-icon { transform: rotate(90deg); }
.sn-header2__icon { transition: background .3s var(--t-ease-out); }

/* --- Bento: lyft + skugga --- */
.sn-bento__tile { transition: transform .45s var(--t-ease-out), box-shadow .45s var(--t-ease-out); }
.sn-bento__tile:hover { box-shadow: 0 14px 28px -14px rgba(3, 26, 46, .32); }
.sn-fx .sn-bento__grid.is-in > .sn-bento__tile:hover, .sn-bento__tile:hover { transform: translateY(-2px); transition-delay: 0s; }

/* --- Produktkort: mängdval och köpknapp --- */
.sn-pc__step { transition: background .25s var(--t-ease-out), color .25s var(--t-ease-out), border-color .25s var(--t-ease-out), transform .25s var(--t-ease-out); }
.sn-pc__step:not(.is-out):not([aria-checked="true"]):hover { border-color: var(--t-text); }
.sn-pc__step:not(.is-out):active { transform: scale(.95); }
.sn-pc__add { transition: transform .3s var(--t-ease-out), filter .3s; }
.sn-pc__add:hover { transform: translateY(-1px); }
.sn-pc__add:hover::after { background: var(--t-accent-dark); }
.sn-pc__add:hover::before { background: #04402A; }
.sn-pc__add:active { transform: translateY(1px); }
.sn-pc__add.loading, .sn-pc__add.is-loading { opacity: .7; }
.sn-pc__add.added .sn-pc__add-lbl::after { content: " ✓"; }

/* --- Bildspel: pilar och prickar --- */
.sn-slides__arrow { transition: transform .3s var(--t-ease-out); }
.sn-slides__arrow[data-prev]:hover { transform: translateX(-4px); }
.sn-slides__arrow[data-next]:hover { transform: translateX(4px); }
.sn-slides__dot:hover::before { transform: translate(-50%, -50%) scale(1.4); }
.sn-topbar2__arrow { transition: transform .3s var(--t-ease-out), opacity .3s; opacity: .8; }
.sn-topbar2__arrow:hover { opacity: 1; }
.sn-topbar2__arrow[data-prev]:hover { transform: translateX(-3px); }
.sn-topbar2__arrow[data-next]:hover { transform: translateX(3px); }

/* --- Scroll-in: ord för ord --- */
.sn-fx [data-sn-split="done"] .sn-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sn-fx [data-sn-split="done"] .sn-w > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--t-ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.sn-fx [data-sn-split="done"].is-in .sn-w > span { transform: none; }
.sn-fx [data-sn-split="plain"] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--t-ease-out), transform .8s var(--t-ease-out); }
.sn-fx [data-sn-split="plain"].is-in { opacity: 1; transform: none; }

/* --- Scroll-in: i tur och ordning --- */
.sn-fx [data-sn-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--t-ease-out), transform .9s var(--t-ease-out), box-shadow .45s var(--t-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.sn-fx [data-sn-stagger].is-in > * { opacity: 1; transform: none; }
.sn-fx [data-sn-stagger].is-in > *:hover { transition-delay: 0s; }

/* --- Scroll-in: bild zoomar ut --- */
.sn-fx .sn-fx-zoom-in img { transform: scale(1.15); transition: transform 1.4s var(--t-ease-out); }
.sn-fx .sn-fx-zoom-in.is-in img { transform: none; }
.sn-fx .sn-split__media.is-in:hover img { transform: scale(1.05); transition-duration: .6s; }
.sn-fx .sn-posts2__big.sn-fx-zoom-in.is-in:hover img { transform: scale(1.05); transition-duration: .6s; }

/* Minska rörelse */
.sn-fx-reduce *, .sn-fx-reduce *::before, .sn-fx-reduce *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

/* =====================================================================
   Minivarukorg (lådan) – TSO-layout
   ===================================================================== */
.sn-minicart .sn-drawer__panel { width: min(640px, 100vw); max-width: 100vw; padding: 0; display: flex; flex-direction: column; border-radius: 22px 0 0 22px; }
@media (max-width: 767px) { .sn-minicart .sn-drawer__panel { border-radius: 0; } }
.sn-minicart .sn-drawer__head { padding: 20px 24px; margin: 0; border-bottom: 1px solid rgba(23, 23, 23, .08); }
.sn-minicart .sn-drawer__title { font-family: Inter, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.sn-minicart .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sn-mc { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sn-mc__empty { display: grid; place-items: center; gap: 16px; padding: 64px 24px; text-align: center; color: var(--t-ink-3); }
.sn-mc__items { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 24px; }
.sn-mc__item { padding: 16px 0; border-bottom: 1px solid rgba(23, 23, 23, .08); transition: opacity .2s; }
.sn-mc__item.is-busy { opacity: .45; pointer-events: none; }
.sn-mc__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.sn-mc__img { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--t-soft); }
.sn-mc__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sn-mc__name { display: inline; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--t-text); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 1px; transition: background-size .5s var(--t-ease-out); }
.sn-mc__name:hover { background-position: 0 100%; background-size: 100% 1px; }
.sn-mc__price { display: flex; gap: 8px; margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--t-accent); }
.sn-mc__price s { font-weight: 400; color: #DC2626; }
.sn-mc__tags { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.sn-mc__pack { padding: 3px 10px; border-radius: 60px; background: var(--t-highlight); color: var(--t-accent); font-size: 12px; font-weight: 600; }
.sn-mc__off { padding: 4px 18px 4px 10px; font-size: 11px; letter-spacing: .04em; color: var(--t-signal); }
.sn-mc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sn-mc__qty { display: flex; align-items: center; border: 1px solid rgba(23, 23, 23, .16); border-radius: 60px; }
.sn-mc__qty button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--t-text); cursor: pointer; border-radius: 50%; transition: background .2s; }
.sn-mc__qty button:hover:not(:disabled) { background: var(--t-soft); }
.sn-mc__qty button:disabled { opacity: .3; cursor: default; }
.sn-mc__qty .sn-icon { width: 14px; height: 14px; }
.sn-mc__qty span { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; }
.sn-minicart a.sn-mc__remove { position: static; width: auto; height: auto; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--t-ink-3) !important; background: none !important; text-decoration: underline; text-underline-offset: 3px; }
.sn-minicart a.sn-mc__remove:hover { color: var(--t-text) !important; }
.sn-mc__upgrade { margin: 12px 0 0 70px; padding-left: 14px; border-left: 1px solid rgba(23, 23, 23, .12); display: grid; gap: 6px; }
.sn-mc__upgrade-title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 12px; font-weight: 500; color: var(--t-ink-3); }
.sn-mc__upgrade-title .sn-icon { width: 13px; height: 13px; }
.sn-mc__up { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border: 0; border-radius: 10px; background: var(--t-soft); cursor: pointer; text-align: left; font: inherit; color: var(--t-text); transition: background .25s var(--t-ease-out); }
.sn-mc__up:hover { background: var(--t-soft-2); }
.sn-mc__up-plus { padding: 4px 18px 4px 10px; font-size: 11px; color: var(--t-signal); }
.sn-mc__up-pack { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sn-mc__up-save { font-size: 13px; font-weight: 600; color: var(--t-accent); }
.sn-mc__up-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t-ink); color: #fff; transition: transform .25s var(--t-ease-out); }
.sn-mc__up:hover .sn-mc__up-btn { transform: scale(1.08); }
.sn-mc__up-btn .sn-icon { width: 15px; height: 15px; }
.sn-mc__foot { padding: 16px 24px 20px; border-top: 1px solid rgba(23, 23, 23, .08); background: #fff; }
.sn-mc__ship { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.sn-mc__ship > .sn-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.sn-mc__ship > div { flex: 1; }
.sn-mc__ship p { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.sn-mc__bar { display: block; height: 4px; border-radius: 4px; background: var(--t-soft-2); overflow: hidden; }
.sn-mc__bar > span { display: block; height: 100%; border-radius: 4px; background: var(--t-accent); transition: width .5s var(--t-ease-out); }
.sn-mc__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--t-ink-3); }
/* Fri frakt-stapeln i block-varukorgen/kassan (assets/js/checkout.js) */
.sn-ship-meter { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(23, 23, 23, .08); }
.sn-ship-meter__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--t-soft-2); color: var(--t-accent); }
.sn-ship-meter__icon .sn-icon { width: 18px; height: 18px; }
.sn-ship-meter__body { flex: 1; min-width: 0; }
.sn-ship-meter__msg { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.sn-ship-meter__bar { display: block; height: 6px; border-radius: 6px; background: var(--t-soft-2); overflow: hidden; }
.sn-ship-meter__bar > span { display: block; height: 100%; border-radius: 6px; background: var(--t-accent); transition: width .6s var(--t-ease-out); }
.sn-ship-meter__hint { display: block; margin-top: 8px; font-size: 12px; color: var(--t-ink-3); }
.wc-block-components-order-meta .sn-ship-meter, .wc-block-components-order-meta .sn-reviews { padding: 14px 16px; } /* WooCommerce nollställer sidopaddingen i tilläggsplatsen. */
.sn-checkout-focus .wc-block-components-order-meta .sn-ship-meter { margin: 16px; }
.sn-ship-meter.is-free .sn-ship-meter__icon { background: var(--t-accent); color: #fff; }
/* Omdömen överst i sidokolumnen (varukorg + kassa) */
.sn-reviews { margin: 0 0 20px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 23, .04), 0 8px 24px -12px rgba(23, 23, 23, .12); }
.sn-checkout-focus .sn-reviews { margin: 0 16px 20px; }
.sn-reviews__head { display: flex; align-items: center; gap: 12px; }
.sn-reviews__score { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--t-text); }
.sn-reviews__sum { display: grid; gap: 4px; font-size: 12px; color: var(--t-ink-3); }
.sn-reviews__sum a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sn-reviews__stars { display: inline-flex; gap: 2px; }
.sn-reviews__star { --fill: 100%; width: 16px; height: 16px; background: linear-gradient(90deg, var(--t-accent) var(--fill), #D5D9E0 var(--fill)); clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 80% 95%, 50% 74%, 20% 95%, 31% 59%, 2% 37%, 38% 36%); }
.sn-reviews__rot { margin-top: 14px; }
.sn-reviews__list { display: grid; margin: 0; padding: 0; list-style: none; }
.sn-reviews__list li { grid-area: 1 / 1; position: relative; padding: 12px 14px 12px 36px; border-radius: 12px; background: var(--t-soft); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s var(--t-ease-out), transform .45s var(--t-ease-out), visibility 0s .45s; }
.sn-reviews__list li.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sn-reviews__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.sn-reviews__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: #CDD2CD; cursor: pointer; transition: width .3s var(--t-ease-out), background .3s; }
.sn-reviews__dots button.is-active { width: 18px; background: var(--t-accent); }
.sn-reviews__dots button:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sn-reviews__list li { transition: none; transform: none; } }
.sn-reviews__list li::before { content: "\201C"; position: absolute; top: 8px; left: 13px; font-family: Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1; color: var(--t-accent); }
.sn-reviews__list p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--t-text); }
.sn-reviews__name { font-size: 12px; font-weight: 600; color: var(--t-ink-3); }
/* Mobil: sidokolumnen ligger ovanför formuläret – bara betygsraden, så formuläret inte trycks ner. */
@media (max-width: 899px) {
	.sn-checkout-focus .sn-reviews { margin: 0 0 16px; padding: 12px 14px; box-shadow: none; }
	.sn-checkout-focus .sn-reviews__rot { display: none; }
	.sn-checkout-focus .sn-reviews__score { font-size: 22px; }
	.sn-checkout-focus .sn-reviews__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .sn-ship-meter__bar > span { transition: none; } }
.sn-mc__links { display: flex; justify-content: space-around; padding: 10px 0 14px; border-top: 1px solid rgba(23, 23, 23, .08); }
.sn-mc__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--t-text); text-decoration: none; }
.sn-mc__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-mc__links .sn-icon { width: 17px; height: 17px; }
.sn-mc__checkout { --fill-bg: var(--t-accent); display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 22px; border-radius: 60px; background: var(--t-ink); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; }
.sn-mc__checkout:hover { color: #fff; }
.sn-mc__checkout > span { display: inline-flex; align-items: center; gap: 10px; }
.sn-mc__checkout .sn-icon { width: 18px; height: 18px; }
.sn-mc__checkout .amount, .sn-mc__checkout bdi { color: inherit; }
.sn-mc__note { margin: 12px 0 8px; text-align: center; font-size: 12px; color: var(--t-ink-3); }
.sn-mc__pay { display: flex; justify-content: center; }

/* =====================================================================
   Varukorgssidan (WooCommerces block-varukorg) – TSO-layout
   ===================================================================== */
.sn-cart-page .sn-main { max-width: none; padding: clamp(32px, 26.366px + 1.5023vw, 48px) var(--t-pad) clamp(48px, 39.549px + 2.2535vw, 72px); }
.sn-cart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 16.958px + 1.8779vw, 44px); }
.sn-cart-head h1 { margin: 0; font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(36px, 30.366px + 1.5023vw, 52px); line-height: 1; letter-spacing: -.03em; }
.sn-cart-head .sn-pill { gap: 10px; }
.sn-cart-page .wc-block-cart { gap: 0; }
.sn-cart-page .wc-block-cart__main { padding-right: 0; }
@media (min-width: 900px) { .sn-cart-page .wc-block-cart__main { padding-right: 48px; } }
.sn-cart-page .wc-block-cart-items { border: 0; }
.sn-cart-page .wc-block-cart-items__header { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-ink-3); border-bottom: 1px solid rgba(23, 23, 23, .08); }
.sn-cart-page .wc-block-cart-items__row { border-bottom: 1px solid rgba(23, 23, 23, .08); }
.sn-cart-page .wc-block-cart-item__image img { width: 100px; height: 100px; object-fit: contain; padding: 8px; border-radius: 50%; background: var(--t-soft); }
/* Mobil: WooCommerce lägger raden i ett rutnät (bild | produkt | radsumma) – bilden mindre och produkten får krympa. */
.sn-cart-page .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.sn-cart-page .wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) 0 auto; }
.sn-cart-page .wc-block-cart.is-mobile .wc-block-cart-item__image img, .sn-cart-page .wc-block-cart.is-small .wc-block-cart-item__image img { width: 60px; height: 60px; padding: 5px; }
.sn-cart-page .is-mobile .wc-block-cart-item__product, .sn-cart-page .is-small .wc-block-cart-item__product { min-width: 0; padding-left: 0; padding-right: 0; }
.sn-cart-page .wc-block-components-product-name { font-weight: 500; font-size: 17px; color: var(--t-text); text-decoration: none; }
.sn-cart-page .wc-block-components-product-price { color: var(--t-accent); font-weight: 600; }
.sn-cart-page .wc-block-components-product-price del { color: #DC2626; font-weight: 400; }
.sn-cart-page .wc-block-components-product-metadata { font-size: 13px; color: var(--t-ink-3); }
.sn-cart-page .wc-block-components-product-details__name { font-weight: 600; }
.sn-cart-page .wc-block-components-sale-badge { border: 0; border-radius: 0; padding: 4px 18px 4px 10px; color: var(--t-signal); background: var(--t-accent); clip-path: var(--t-ribbon); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.sn-cart-page .wc-block-components-quantity-selector { border-radius: 60px; border: 1px solid rgba(23, 23, 23, .16); overflow: hidden; }
.sn-cart-page .wc-block-components-quantity-selector::after { display: none; }
.sn-cart-page .wc-block-cart-item__remove-link { font-size: 13px !important; color: var(--t-ink-3) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.sn-cart-page .wp-block-woocommerce-cart.alignwide { width: 100%; max-width: none; margin-inline: 0; }
.sn-cart-page .wc-block-cart__sidebar { padding: 28px; border-radius: 20px; background: var(--t-soft); align-self: flex-start; }
@media (max-width: 899px) { .sn-cart-page .wc-block-cart__sidebar { margin-top: 24px; } }
.sn-cart-page .wc-block-cart__totals-title { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase !important; color: var(--t-ink-3); padding: 0 !important; }
.sn-cart-page .wc-block-components-totals-wrapper { border-color: rgba(23, 23, 23, .1) !important; padding-left: 0; padding-right: 0; }
.sn-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 20px; font-weight: 500; }
.sn-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sn-cart-page .wc-block-cart__submit-button,
.sn-checkout-focus .wc-block-components-checkout-place-order-button {
	height: 56px; border: 0; border-radius: 60px !important; background: var(--t-ink) !important; color: #fff !important;
	font-family: Inter, sans-serif; font-weight: 600; font-size: 16px; text-decoration: none;
	transition: background .3s var(--t-ease-out), transform .2s var(--t-ease-out);
}
.sn-cart-page .wc-block-cart__submit-button:hover,
.sn-checkout-focus .wc-block-components-checkout-place-order-button:hover { background: var(--t-accent) !important; transform: translateY(-1px); }
.sn-cart-page .wc-block-cart__payment-options { margin-top: 14px; }

/* =====================================================================
   Kassan (WooCommerces block-kassa) – fokuserad layout som TSO/Shopify
   ===================================================================== */
.sn-checkout-focus { --chk-main: 600px; --chk-side: 440px; --chk-gap: clamp(28px, 4.5vw, 72px); }
.sn-chk-head { border-bottom: 1px solid rgba(23, 23, 23, .08); background: #fff; }
.sn-chk-head__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 20px; }
.sn-chk-head__box { display: flex; align-items: center; gap: 16px; }
.sn-chk-head__col--side .sn-chk-head__box { justify-content: flex-end; }
.sn-chk-head__secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--t-ink-3); }
.sn-chk-head__secure .sn-icon { width: 16px; height: 16px; color: var(--t-accent); }
@media (max-width: 599px) { .sn-chk-head__secure { display: none; } }
.sn-checkout-focus .sn-main { max-width: none; padding: 0; }
.sn-checkout-focus .sn-wc-page .entry-content { max-width: none; }
.sn-checkout-focus .wp-block-woocommerce-checkout.alignwide { width: 100%; max-width: none; margin: 0; }
.sn-checkout-focus .wc-block-checkout { max-width: none; margin: 0; padding: 24px 20px 64px; gap: 0; }
@media (max-width: 899px) { .sn-checkout-focus .wc-block-checkout__sidebar { margin: 0 -20px 24px; padding: 16px 20px; background: var(--t-soft); } }
/* Desktop: delningen exakt i mitten (som Shopify). Formuläret ligger mot mitten från vänster, sammanfattningen mot
   mitten från höger – sidhuvud och sidfot följer samma linjer, i alla bredder. */
@media (min-width: 900px) {
	.sn-checkout-focus { background: linear-gradient(90deg, #fff 0 50%, var(--t-soft) 50% 100%); }
	.sn-checkout-focus .sn-chk-head { background: transparent; }
	.sn-chk-head__inner { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
	.sn-chk-head__col { padding: 0 var(--chk-gap); }
	.sn-chk-head__col--main .sn-chk-head__box { max-width: var(--chk-main); margin-left: auto; }
	.sn-chk-head__col--side .sn-chk-head__box { max-width: var(--chk-side); }
	.sn-checkout-focus .wc-block-checkout.wc-block-components-sidebar-layout { display: flex; flex-wrap: nowrap; align-items: flex-start; padding: 0; }
	.sn-checkout-focus .wc-block-checkout .wc-block-checkout__main { box-sizing: border-box; flex: 0 0 50%; width: 50%; max-width: none; margin: 0; padding: 40px var(--chk-gap) 72px; }
	.sn-checkout-focus .wc-block-checkout__main > * { max-width: var(--chk-main); margin-left: auto; }
	.sn-checkout-focus .wc-block-checkout .wc-block-checkout__sidebar { box-sizing: border-box; flex: 0 0 50%; width: 50%; max-width: none; margin: 0; padding: 40px var(--chk-gap) 40px; position: sticky; top: 0; align-self: flex-start; }
	.sn-checkout-focus .wc-block-checkout__sidebar > * { max-width: var(--chk-side); }
	.sn-checkout-focus .sn-copy--slim { box-sizing: border-box; width: 50%; padding: 20px var(--chk-gap); justify-content: center; }
}
.sn-checkout-focus .wc-block-components-checkout-step__title,
.sn-checkout-focus .wc-block-components-checkout-order-summary__title-text { font-family: Inter, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--t-text); }
.sn-checkout-focus .wc-block-components-checkout-step { margin-bottom: 28px; }
.sn-checkout-focus .wc-block-components-text-input input,
.sn-checkout-focus .wc-blocks-components-select__select,
.sn-checkout-focus .wc-block-components-textarea {
	min-height: 50px; border: 1px solid #D5D9E0 !important; border-radius: 6px !important; background: #fff; box-shadow: none !important;
	font-family: Inter, sans-serif; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.sn-checkout-focus .wc-block-components-text-input input:focus,
.sn-checkout-focus .wc-blocks-components-select__select:focus,
.sn-checkout-focus .wc-block-components-textarea:focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 1px var(--t-accent) !important; outline: 0; }
.sn-checkout-focus .wc-block-components-text-input label,
.sn-checkout-focus .wc-blocks-components-select__label { color: #707070; }
.sn-checkout-focus .wc-block-components-radio-control__option,
.sn-checkout-focus .wc-block-components-radio-control-accordion-option { border-radius: 6px; }
.sn-checkout-focus .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.sn-checkout-focus .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 1px var(--t-accent); background: rgba(7, 45, 80, .04); }
.sn-checkout-focus .wc-block-components-radio-control__input:checked,
.sn-checkout-focus .wc-block-components-checkbox__input:checked { background: var(--t-accent) !important; border-color: var(--t-accent) !important; }
.sn-checkout-focus .wc-block-components-checkbox__mark { fill: #fff; }
.sn-checkout-focus .wc-block-components-address-form__snusify-age-confirm { padding: 14px 16px; border: 1px solid #D5D9E0; border-radius: 6px; background: var(--t-soft); }
.sn-checkout-focus .wc-block-components-address-form__snusify-age-confirm label { font-weight: 500; }
.sn-checkout-focus .wc-block-checkout__terms { font-size: 13px; color: var(--t-ink-3); }
.sn-checkout-focus .wc-block-components-order-summary-item__image img { border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; }
.sn-checkout-focus .wc-block-components-order-summary-item__quantity { border: 0; background: var(--t-ink); color: #fff; box-shadow: none; }
.sn-checkout-focus .wc-block-components-order-summary-item__description { font-size: 14px; }
.sn-checkout-focus .wc-block-components-product-metadata__description { display: none; }
.sn-checkout-focus .wc-block-checkout__sidebar .wc-block-components-panel,
.sn-checkout-focus .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { border-color: rgba(23, 23, 23, .1) !important; }
.sn-checkout-focus .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 18px; font-weight: 600; }
.sn-checkout-focus .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sn-copy--slim { margin-top: 0; padding: 20px var(--t-pad); border-radius: 0; background: transparent; color: var(--t-ink-3); }
.sn-copy--slim .sn-copy__legal a, .sn-copy--slim p { color: var(--t-ink-3); }
.sn-copy--slim .sn-copy__region, .sn-copy--slim .sn-copy__warning { display: none; }
.sn-checkout-focus .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; border-radius: 0; background: transparent; }
.sn-checkout-focus .wc-block-components-checkout-order-summary__title { padding-left: 0; padding-right: 0; }
.sn-checkout-focus .wc-block-components-checkout-order-summary__content > *,
.sn-checkout-focus .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
.sn-checkout-focus .wc-block-components-sale-badge,
.sn-cart-page .wc-block-components-sale-badge { border: 0; border-radius: 0; padding: 4px 18px 4px 10px; color: var(--t-signal); background: var(--t-accent); clip-path: var(--t-ribbon); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.sn-copy--slim { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; text-align: center; }
.sn-copy--slim .sn-copy__left { order: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; }
.sn-copy--slim .sn-copy__left p { font-size: 13px; }
.sn-copy--slim .sn-copy__pay { display: none; }
.sn-cart-page .sn-wc-page .entry-content { max-width: none; }
.sn-cart-page .wp-block-woocommerce-cart { max-width: none; margin: 0; }
.sn-checkout-focus .sn-main.sn-container { width: 100%; max-width: none; margin: 0; padding: 0; }
.sn-checkout-focus .wp-block-woocommerce-checkout { max-width: none; margin: 0; padding: 0; }
.sn-cart-page .wp-block-woocommerce-cart { padding: 0; }
@media (max-width: 899px) { .sn-checkout-focus .wc-block-checkout { padding-top: 0; } }
.sn-cart-page .sn-main.sn-container { width: 100%; max-width: none; margin: 0; }
.sn-cart-page .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-width: 44px; }
@media (max-width: 899px) { .sn-checkout-focus .wc-block-checkout__sidebar { width: auto; margin: 0 -20px 24px; } }