/* Melanotanbutiken - rattningar fran revision 2026-07-30 */
/* ── Rubriker ska aldrig brytas mitt i ett ord ─────────────────────────────
   Orsak: något i kedjan satte word-break/overflow-wrap så att H1 renderades
   "Köp Melanot / an 2 i / Sverige" på 375 px. Varumärkesordet bröts itu.     */
h1, h2, h3, h4,
.hero-section h1 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* ── Betygsraden: #fecc00 på ljus gradient gav 1,52:1 (krav 4,5:1) ─────────
   Mörk platta bakom höjer till ca 9:1 och ger raden visuell tyngd.          */
.hero-section p[style*="#fecc00"] {
	display: inline-block;
	background: rgba(0, 44, 70, 0.88);
	color: #ffd633 !important;
	padding: 7px 15px;
	border-radius: 4px;
	line-height: 1.35;
}

/* ── Mobil hero ────────────────────────────────────────────────────────────
   Inline-stilarna låser flex: 0 0 40% / 60% även på 375 px, vilket klämmer
   texten till en ~225 px kolumn i högerkanten. Bryts upp till en kolumn.    */
@media (max-width: 767px) {

	.hero-section {
		padding: 34px 18px !important;
	}

	/* Yttre flex-container -> block, barnen staplas */
	.hero-section > div {
		display: block !important;
	}

	/* Båda kolumnerna full bredd */
	.hero-section > div > div {
		flex: none !important;
		max-width: 100% !important;
		width: 100% !important;
		padding-right: 0 !important;
		text-align: center;
	}

	/* Produktbilden: centrerad och rimligt stor, inte nedtryckt i hörnet */
	.hero-section > div > div:first-child {
		max-width: 240px !important;
		margin: 0 auto 20px !important;
	}

	.hero-section h1 {
		font-size: clamp(1.85rem, 7.6vw, 2.4rem) !important;
		line-height: 1.14 !important;
		margin-bottom: 14px !important;
		text-wrap: balance;
	}

	.hero-section p {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	/* Knapparna: staplade och fullbreda i stället för hopklämda sida vid sida */
	.hero-section > div > div:last-child > div[style*="display: flex"] {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.hero-section > div > div:last-child a[style*="padding"] {
		display: block !important;
		text-align: center;
	}
}

/* ── Mobilmenyn: aktiv post var #2b6cb0 på #090c10 = 3,62:1 ────────────────
   Gul accent ger 11,8:1 och färg är inte längre enda skillnaden.            */
.drawer-inner .current-menu-item > a,
.drawer-inner .current_page_item > a,
#mobile-drawer .current-menu-item > a,
#mobile-drawer .current_page_item > a,
.mobile-navigation .current-menu-item > a {
	color: #fecc00 !important;
	font-weight: 700;
	box-shadow: inset 3px 0 0 #fecc00;
	padding-left: 10px;
}