/* ==========================================================================
   Dackly – ljus och stram profil
   Vit/ljusgrå yta, grafit text, gult endast för köp och logga.
   Raka former (4–6 px), tunna linjer i stället för skuggor, en typsnittsfamilj.
   ========================================================================== */

:root {
	--mst-asphalt: #1A1F26;
	--mst-ink: #1A1F26;
	--mst-concrete: #F5F6F7;
	--mst-grey-700: #5B6470;
	--mst-grey-400: #98A0A9;
	--mst-grey-200: #E2E5E9;
	--mst-radius: 4px;
	--mst-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mst-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--dk-line: #E2E5E9;
	--dk-bg: #F5F6F7;
	--dk-muted: #5B6470;
	--dk-navy: #1F3044;
}

body.mst-body,
.mst-body {
	background: var(--dk-bg);
	color: var(--mst-ink);
	font-feature-settings: "tnum" 1, "cv11" 1;
}

/* Rubriker – raka, inte expanderade */
.mst-body h1, .mst-body h2, .mst-body h3,
.mst-home-h2, .mst-page-title {
	font-family: var(--mst-font-display) !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
}
.mst-body h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important; line-height: 1.15 !important; }
.mst-home-h2 { font-size: 1.35rem !important; }

/* Siffror och storlekar – samma typsnitt, tabellsiffror */
.mst-body code, .mst-pcard-size, .mst-dim, .mst-size-chips a,
.mst-pcard-price, .mst-price, .mst-guide-code, .mst-guide-code * {
	font-family: var(--mst-font-body) !important;
	font-variant-numeric: tabular-nums;
}

/* ---------- Topprad och header ---------- */
.mst-topbar {
	background: #fff !important;
	color: var(--dk-muted) !important;
	border-bottom: 1px solid var(--dk-line);
	font-size: .78rem !important;
}
.mst-topbar * { color: var(--dk-muted) !important; }

.mst-header {
	background: #fff !important;
	color: var(--mst-ink) !important;
	border-bottom: 1px solid var(--dk-line) !important;
	box-shadow: none !important;
}
.mst-header .mst-logo,
.mst-header .mst-logo-light { color: var(--mst-ink) !important; }
.mst-header .mst-logo-mark { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--mst-ink) !important; }
.mst-nav a {
	color: var(--mst-ink) !important;
	border-radius: 0 !important;
	font-weight: 600 !important;
	border-bottom: 2px solid transparent;
}
.mst-nav a:hover,
.mst-nav a[aria-current],
.mst-nav .is-active > a,
.mst-nav a.is-active {
	background: transparent !important;
	color: var(--mst-ink) !important;
	border-bottom-color: var(--mst-signal);
}
.mst-header .mst-icon-link,
.mst-header .mst-icon-link svg,
.mst-header .mst-burger,
.mst-header .mst-cart-link { color: var(--mst-ink) !important; stroke: currentColor; }
.mst-header .mst-icon-link:hover { background: var(--dk-bg) !important; }

/* ---------- Hero / storlekssök ---------- */
.mst-hero,
.mst-home-hero {
	background: #fff !important;
	background-image: none !important;
	color: var(--mst-ink) !important;
	border-bottom: 1px solid var(--dk-line);
}
.mst-hero::before, .mst-hero::after,
.mst-home-hero::before, .mst-home-hero::after { display: none !important; }
.mst-hero h1, .mst-hero .mst-hero-sub, .mst-hero p,
.mst-home-hero h1, .mst-home-hero p { color: var(--mst-ink) !important; }
.mst-hero .mst-hero-sub, .mst-home-hero .mst-hero-sub { color: var(--dk-muted) !important; }
.mst-eyebrow { color: var(--dk-muted) !important; letter-spacing: .06em !important; font-weight: 700 !important; }
.mst-hl { color: var(--mst-ink) !important; background: none !important; }

.mst-home-search,
.mst-size-form {
	background: var(--dk-bg) !important;
	border: 1px solid var(--dk-line) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--mst-ink) !important;
}
.mst-home-search * { color: inherit; }
.mst-size-field select,
.mst-size-form select,
.mst-home-size-form select {
	border-radius: 4px !important;
	border: 1px solid #CDD2D8 !important;
	background-color: #fff !important;
	color: var(--mst-ink) !important;
	box-shadow: none !important;
}
.mst-home-seasons label, .mst-home-seasons a, .mst-home-seasons span {
	border-radius: 4px !important;
}

/* Typflikar Däck / Fälgar */
.mst-type-tabs { background: transparent !important; }
.mst-type-tabs a {
	border-radius: 4px !important;
	color: var(--mst-ink) !important;
	border: 1px solid var(--dk-line) !important;
	background: #fff !important;
}
.mst-type-tabs a.is-active { background: var(--mst-ink) !important; color: #fff !important; border-color: var(--mst-ink) !important; }

/* ---------- Knappar ---------- */
.mst-btn, .mst-size-submit, .mst-add-to-cart-btn, .mst-promo-cta, .mst-filters-apply,
.mst-home-final a, .mst-inline-btn {
	border-radius: 4px !important;
	box-shadow: none !important;
	font-weight: 700 !important;
}
.mst-pcard-cta {
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--mst-ink) !important;
	border: 1.5px solid var(--mst-ink) !important;
	box-shadow: none !important;
}
.mst-pcard:hover .mst-pcard-cta { background: var(--mst-signal) !important; border-color: var(--mst-signal) !important; }

/* ---------- Kort: linjer i stället för skuggor ---------- */
.mst-pcard, .mst-cat, .mst-faq details, .mst-promo,
.mst-filters, .mst-facet, .mst-marks, .mst-track, .mst-details, .mst-image-box,
.mst-home-usps li, .mst-steps > *, .mst-cart-line, .mst-brand-grid a, .mst-guide-cards a {
	border-radius: 6px !important;
	box-shadow: none !important;
}
.mst-pcard, .mst-cat, .mst-guide-cards a, .mst-faq details, .mst-filters, .mst-brand-grid a, .mst-steps > li {
	border: 1px solid var(--dk-line) !important;
	background: #fff !important;
}
.mst-pcard:hover, .mst-cat:hover, .mst-guide-cards a:hover, .mst-brand-grid a:hover {
	border-color: #B9C0C8 !important;
	transform: none !important;
	box-shadow: none !important;
}
.mst-pcard-media { border-radius: 6px 6px 0 0 !important; background: #fff !important; }

/* Pills och chips */
.mst-pill, .mst-mark-chip, .mst-chip, .mst-chip-clear {
	border-radius: 3px !important;
	font-weight: 600 !important;
}
.mst-pcard-size, .mst-dim {
	background: var(--dk-bg) !important;
	border: 1px solid var(--dk-line) !important;
	border-radius: 3px !important;
	font-weight: 600 !important;
}
.mst-pcard-price, .mst-price { font-weight: 800 !important; letter-spacing: -0.01em; }

/* ---------- Startsidan ---------- */
/* Kategorier som enkla textkort – inga pastellikoner */
.mst-cat-icon { display: none !important; }
.mst-cat {
	padding: 1.1rem 1.2rem !important;
	border-left: 3px solid var(--mst-ink) !important;
}
.mst-cat:hover { border-left-color: var(--mst-signal) !important; }

/* Kampanjruta – platt och lugn */
.mst-promo {
	background: #fff !important;
	background-image: none !important;
	color: var(--mst-ink) !important;
	border: 1px solid var(--dk-line) !important;
	border-left: 4px solid var(--mst-signal) !important;
}
.mst-promo::before, .mst-promo::after { display: none !important; }
.mst-promo * { color: var(--mst-ink) !important; }
.mst-promo .mst-promo-cta {
	background: var(--mst-ink) !important;
	color: #fff !important;
}

/* Storleksgenvägar */
.mst-size-chips a {
	background: #fff !important;
	border: 1px solid var(--dk-line) !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	color: var(--mst-ink) !important;
}
.mst-size-chips a:hover { border-color: var(--mst-ink) !important; }

/* USP-rad */
.mst-home-usps { background: #fff !important; border-bottom: 1px solid var(--dk-line); }
.mst-home-usps li { border: 0 !important; border-left: 2px solid var(--mst-signal) !important; border-radius: 0 !important; background: transparent !important; }

/* Storleksguiden (205/55 R16) – ljus i stället för svart/gul */
.mst-guide-code {
	background: #fff !important;
	color: var(--mst-ink) !important;
	border: 1px solid var(--dk-line) !important;
	border-radius: 6px !important;
}
.mst-guide-code * { color: var(--mst-ink) !important; }
.mst-guide-code b, .mst-guide-code strong, .mst-guide-code em { color: var(--dk-navy) !important; }

/* Avslutande CTA */
.mst-home-final {
	background: var(--mst-ink) !important;
	background-image: none !important;
}

/* FAQ */
.mst-faq details { background: #fff !important; }
.mst-faq summary { font-weight: 600 !important; }

/* ---------- Filter och listor ---------- */
.mst-filters { background: #fff !important; }
.mst-check input, .mst-facet input[type=checkbox] { accent-color: var(--mst-ink); }
.mst-pager a, .mst-pager span { border-radius: 4px !important; }

/* ---------- Footer ---------- */
.mst-footer {
	background: #14181E !important;
	background-image: none !important;
}
.mst-footer-bottom { border-top-color: rgba(255,255,255,.08) !important; }

/* Företagspris-markering */
a[href*="foretagskonto"][style*="position:fixed"] { border-radius: 4px !important; }

/* Mobil */
@media (max-width: 760px) {
	.mst-nav a { border-bottom: 0; }
	.mst-header .mst-nav { background: #fff !important; }
}

/* Listor runt kort ska inte ha egen ram */
.mst-brand-grid > li, .mst-guide-cards > li { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Stegnummer och numrerade förklaringar – små fyrkanter i grafit i stället för gula cirklar */
.mst-steps li > b, .mst-guide b, .mst-guide i, .mst-guide-code + * b, .mst-home-steps-wrap b {
	border-radius: 3px !important;
	background: var(--mst-ink) !important;
	color: #fff !important;
	font-size: .85rem !important;
	width: 26px !important;
	height: 26px !important;
	line-height: 26px !important;
}
.mst-guide li, .mst-guide-list li { border-radius: 6px !important; box-shadow: none !important; }

/* FAQ – normal textstorlek */
.mst-faq summary { font-size: 1.05rem !important; }
.mst-faq p { color: var(--dk-muted); }

/* Brödtext lite lugnare */
.mst-body p { line-height: 1.6; }

/* Sidrubrik (produkt, kategorisidor) – ljus i stället för mörk med ränder */
.mst-tread-header {
	background: #fff !important;
	background-image: none !important;
	color: var(--mst-ink) !important;
	border-bottom: 1px solid var(--dk-line) !important;
}
.mst-tread-header::before, .mst-tread-header::after { display: none !important; }
.mst-tread-header h1 { color: var(--mst-ink) !important; }
.mst-tread-header p { color: var(--dk-muted) !important; }

/* ==========================================================================
   0.2.0 – karaktär: säsongsremsa, fotohero, mörkt avbrott, tyngre rubriker
   ========================================================================== */

/* Säsongsremsa – det enda stora gula fältet */
.dkd-season {
	background: var(--mst-signal, #FFB800);
	color: var(--mst-ink);
	font-size: .9rem;
	font-weight: 600;
}
.dkd-season-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: .55rem 1rem;
	text-align: center;
}
.dkd-season a {
	color: var(--mst-ink) !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.dkd-season a:hover { text-decoration-thickness: 2px; }

/* Fotohero */
.mst-home-hero {
	background-color: #1A1F26 !important;
	background-image:
		linear-gradient(90deg, rgba(14,18,23,.88) 0%, rgba(14,18,23,.62) 45%, rgba(14,18,23,.18) 100%),
		var(--dkd-hero-img, none) !important;
	background-size: cover !important;
	background-position: center 62% !important;
	color: #fff !important;
	border-bottom: 0 !important;
}
.mst-home-hero .mst-home-hero-inner { padding-top: clamp(2.5rem, 6vw, 5rem) !important; padding-bottom: clamp(2.5rem, 6vw, 5rem) !important; }
.mst-home-hero h1,
.mst-home-hero .mst-home-hero-text p,
.mst-home-hero .mst-hl { color: #fff !important; }
.mst-home-hero .mst-hero-sub { color: rgba(255,255,255,.82) !important; font-size: 1.08rem !important; }
.mst-home-hero .mst-eyebrow { color: var(--mst-signal) !important; }
.mst-home-hero .mst-home-search {
	background: #fff !important;
	border: 0 !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
	color: var(--mst-ink) !important;
}
.mst-home-hero .mst-home-search h2,
.mst-home-hero .mst-home-search label,
.mst-home-hero .mst-home-search p { color: var(--mst-ink) !important; }
.mst-home-hero .mst-home-search .mst-home-search-hint { color: var(--dk-muted) !important; }

/* Tyngre rubriker med tydligare skillnad mot brödtext */
.mst-body h1 {
	font-size: clamp(2.1rem, 4.2vw, 3.3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.028em !important;
	line-height: 1.06 !important;
}
.mst-home-h2,
.mst-body h2.mst-home-h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
}
.mst-tread-header h1 { font-size: clamp(1.6rem, 3vw, 2.3rem) !important; }

/* Mörkt avbrott: Så enkelt handlar du */
.mst-home-steps-wrap {
	background: var(--mst-ink) !important;
	padding-top: 3.2rem !important;
	padding-bottom: 3.2rem !important;
	margin: 1.5rem 0 !important;
}
.mst-home-steps-wrap .mst-home-h2 { color: #fff !important; }
.mst-home-steps-wrap .mst-steps > li {
	background: #222933 !important;
	border: 1px solid #323B47 !important;
	border-left: 0 !important;
}
.mst-home-steps-wrap .mst-steps li strong { color: #fff !important; }
.mst-home-steps-wrap .mst-steps li span { color: #AEB6C0 !important; }
.mst-home-steps-wrap .mst-steps li > b {
	background: var(--mst-signal) !important;
	color: var(--mst-ink) !important;
}

/* Märkeslogor i gråskala, färg vid hover */
.mst-brand-grid img,
.mst-brand-grid svg {
	filter: grayscale(1) contrast(1.05);
	opacity: .72;
	transition: filter .2s ease, opacity .2s ease;
}
.mst-brand-grid a:hover img,
.mst-brand-grid a:hover svg,
.mst-brand-grid a:focus-visible img {
	filter: none;
	opacity: 1;
}

/* Produktbilder på ljusgrå platta */
.mst-pcard-media,
.mst-image-box {
	background: #F1F2F4 !important;
}
.mst-pcard-media img,
.mst-image-box img { mix-blend-mode: multiply; }

/* Mobil: hero med mörkare överlägg och mindre rubrik */
@media (max-width: 760px) {
	.mst-home-hero {
		background-image:
			linear-gradient(180deg, rgba(14,18,23,.80) 0%, rgba(14,18,23,.70) 100%),
			var(--dkd-hero-img, none) !important;
	}
	.dkd-season { font-size: .82rem; }
}

/* Vald säsong i heroens sökruta */
.mst-home-hero .mst-home-seasons label:has(input:checked) {
	background: var(--mst-ink) !important;
	border-color: var(--mst-ink) !important;
	color: #fff !important;
}