/* =====================================================================
   Mit Grønne Liv – designsystem 2026
   Lag oven på Divi. Alt er bygget op om tokens i :root, så farver,
   afstande og runding kan ændres ét sted.
   ===================================================================== */

:root {
	/* Brand – hentet fra logoets grønne */
	--c-brand:      #17a481;
	--c-brand-600:  #0f8a6b;
	--c-brand-700:  #0b6e55;
	--c-brand-800:  #095c47;
	--c-brand-050:  #ecf7f3;
	--c-brand-100:  #d6efe7;

	/* Tekst */
	--c-ink:        #14241f;
	--c-ink-70:     #46574f;
	--c-ink-45:     #5f6f68; /* 5,1:1 på canvas – #7a8a83 gav kun 3,5:1 */

	/* Flader */
	--c-canvas:     #fbfaf7;
	--c-surface:    #ffffff;
	--c-sand:       #f2ede4;
	--c-line:       #e6eae7;

	/* Accent til udsalg/badges */
	--c-clay:       #c0674a;

	/* Typografi */
	--f-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Form */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-pill: 999px;

	--sh-1: 0 1px 2px rgba(20, 36, 31, .04), 0 10px 26px -16px rgba(20, 36, 31, .22);
	--sh-2: 0 2px 6px rgba(20, 36, 31, .05), 0 22px 44px -22px rgba(20, 36, 31, .28);

	--wrap: 1240px;
	--gap: clamp(18px, 3vw, 34px);
	--section-y: clamp(56px, 8vw, 104px);

	--ease: cubic-bezier(.22, .61, .36, 1);

	/* Højden på topbjælken – Divis header placeres lige under */
	--tb: 40px;
}

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body,
body.et_pb_pagebuilder_layout {
	font-family: var(--f-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--c-ink-70);
	background: var(--c-canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'ss01', 'cv05';
}

#page-container { background: var(--c-canvas); }

body h1, body h2, body h3, body h4, body h5, body h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
	font-family: var(--f-display);
	color: var(--c-ink);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.012em;
	padding-bottom: 0;
}

/*
 * Divi lægger selv luft under overskrifter med padding-bottom. Den er nulstillet
 * ovenfor, så brødteksten skal have sin luft tilbage – ellers klistrer afsnit og
 * punktopstillinger op ad overskriften. Kun i løbende tekst: komponenterne
 * længere nede sætter deres egne afstande.
 */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.mgl-news h2 { margin-bottom: .46em; }

.entry-content h2,
.entry-content h3,
.et_pb_text h2,
.et_pb_text h3,
.woocommerce-Tabs-panel h3 { margin-top: 1.5em; }

.entry-content > :first-child,
.et_pb_text > :first-child,
.woocommerce-Tabs-panel > :first-child { margin-top: 0; }

/*
 * Starter siden med en overskrift, skal den have luft ned fra sidetitlen.
 * Margenen kollapser med sidetitlens egne 18px, så den skal være den største.
 */
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 1.1em; }

/* Forsidens egne blokke styrer selv deres afstande. */
.mgl-section__head h2,
.mgl-split__body h2,
.mgl-news h2 { margin-top: 0; }
.mgl-section__head h2 { margin-bottom: 0; }

body h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
body h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
body h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
body h4 { font-size: 1.16rem; }

p { margin-bottom: 1.1em; }

/* brand-700 giver 6:1 mod baggrunden; brand-600 nåede kun 4,1:1. */
a { color: var(--c-brand-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-brand-800); }

::selection { background: var(--c-brand-100); color: var(--c-ink); }

/* Skip-link (functions.php) – usynligt, til det får fokus med tastaturet. */
.mgl-skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100001; /* over .mgl-topbar (100000), som kommer senere i DOM */
	padding: 10px 16px;
	background: var(--c-ink);
	color: #fff;
	border-radius: var(--r-sm);
	font: 600 15px/1.2 var(--f-sans);
}
.mgl-skip-link:focus { top: 12px; color: #fff; }

/* Hop til #main-content må ikke lande under den faste topbjælke og header. */
@media (min-width: 981px) {
	html { scroll-padding-top: calc(var(--tb) + 80px); }
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

img { border-radius: inherit; }

/* Divis container bredere og med roligere luft */
.container,
.et_pb_row {
	width: min(92%, var(--wrap));
	max-width: min(92%, var(--wrap));
}

#main-content .container { padding-top: clamp(28px, 4vw, 54px); }

/* Fjern Divis lodrette streg mellem indhold og sidebar */
#main-content .container:before { display: none !important; }

/* ---------------------------------------------------------------
   2. Topbjælke + header
   --------------------------------------------------------------- */

.mgl-topbar {
	background: var(--c-ink);
	color: #e8efec;
	font-size: 13.5px;
	letter-spacing: .02em;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--tb);
	display: flex;
	align-items: center;
	z-index: 100000;
}
body.admin-bar .mgl-topbar { top: 32px; }

/* Divis header rykkes ned under topbjælken, og indholdet følger med */
body.et_fixed_nav #main-header,
body.et_fixed_nav #main-header.et-fixed-header { top: var(--tb) !important; }
body.admin-bar.et_fixed_nav #main-header,
body.admin-bar.et_fixed_nav #main-header.et-fixed-header { top: calc(var(--tb) + 32px) !important; }
#page-container { margin-top: var(--tb); }

.mgl-topbar__inner {
	width: min(92%, var(--wrap));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 8px 0;
	text-align: center;
}

.mgl-topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mgl-topbar__item svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.mgl-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
	:root { --tb: 36px; }
	.mgl-topbar__inner { gap: 14px; font-size: 12.5px; padding: 7px 0; }
	.mgl-topbar__item:nth-child(n+2) { display: none; }
	.mgl-topbar__item { white-space: normal; }
}

/* Header */
#main-header {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	box-shadow: none;
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}

#main-header.et-fixed-header {
	box-shadow: 0 10px 30px -22px rgba(20, 36, 31, .5) !important;
	border-bottom-color: transparent;
}

#main-header .container { padding-top: 0; }

.et_header_style_left #logo,
#logo { max-height: 46px !important; transition: max-height .25s var(--ease); }
#main-header.et-fixed-header #logo { max-height: 38px !important; }

/* Navigation */
#top-menu li a {
	font-family: var(--f-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .005em;
	color: var(--c-ink) !important;
	padding-bottom: 20px;
	opacity: 1;
	position: relative;
}

/* Understregning tegnes på selve teksten (text-decoration), så den altid
   følger ordet – uafhængigt af Divis padding og den krympende header. */
#top-menu > li > a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
	-webkit-text-decoration-color: transparent;
	transition: color .2s var(--ease), text-decoration-color .25s var(--ease);
}

#top-menu > li > a:hover,
#top-menu > li.current-menu-item > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current_page_item > a {
	text-decoration-color: var(--c-brand);
	-webkit-text-decoration-color: var(--c-brand);
	opacity: 1;
}

#top-menu li li a { text-decoration: none; }

/* Dropdowns */
#top-menu li ul.sub-menu {
	border-top: none;
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
	padding: 10px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
}

#top-menu li li {
	padding: 0;
	margin: 0;
	width: 100%;
}

#top-menu li li a {
	padding: 9px 14px !important;
	width: 100%;
	border-radius: var(--r-sm);
	font-weight: 450;
	color: var(--c-ink-70) !important;
	transition: background .18s var(--ease), color .18s var(--ease);
}

#top-menu li li a:hover {
	background: var(--c-brand-050);
	color: var(--c-brand-700) !important;
	opacity: 1;
}

/* Kurv + søg */
#et-top-navigation .et-cart-info { color: var(--c-ink); font-size: 0; }
#et-top-navigation .et-cart-info span:before {
	font-size: 22px;
	color: var(--c-ink);
	transition: color .2s var(--ease);
}
#et-top-navigation .et-cart-info:hover span:before { color: var(--c-brand); }

#et_top_search .et-search-form input { font-family: var(--f-sans); }
#et_top_search span.et_search_outer .et-search-field { color: var(--c-ink); }
#et_top_search .et_search_form_container input::placeholder { color: var(--c-ink-45); }
#et_top_search span#et_search_icon:before { color: var(--c-ink); }

/* Mobilmenu */
.et_mobile_menu {
	border-top: 3px solid var(--c-brand);
	border-radius: 0 0 var(--r-md) var(--r-md);
	box-shadow: var(--sh-2);
	padding: 10px;
}
.et_mobile_menu li a {
	font-family: var(--f-sans);
	font-weight: 500;
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-line);
	padding: 13px 12px;
}
.et_mobile_menu li:last-child > a { border-bottom: none; }
.mobile_menu_bar:before { color: var(--c-ink) !important; }

/* ---------------------------------------------------------------
   3. Knapper
   --------------------------------------------------------------- */

body .button,
body a.button,
body button.button,
body input[type="submit"],
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .wp-block-button__link,
body .et_pb_button,
.mgl-btn {
	font-family: var(--f-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
	line-height: 1.2 !important;
	padding: 14px 26px !important;
	border-radius: var(--r-pill) !important;
	border: 1px solid transparent !important;
	background: var(--c-brand-700) !important; /* hvid tekst 6,2:1 – --c-brand gav 3,15:1 */
	color: #fff !important;
	text-transform: none !important;
	box-shadow: 0 10px 22px -16px rgba(15, 138, 107, .9);
	transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body .button:hover,
body a.button:hover,
body button.button:hover,
body input[type="submit"]:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .et_pb_button:hover,
.mgl-btn:hover {
	background: var(--c-brand-800) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -18px rgba(15, 138, 107, 1);
}

body .et_pb_button:after,
body .et_pb_button:before { display: none !important; }

/* Sekundær knap */
.mgl-btn--ghost,
body .woocommerce a.button.wc-backward,
body .woocommerce .cart .button[name="update_cart"] {
	background: transparent !important;
	color: var(--c-ink) !important;
	border-color: var(--c-line) !important;
	box-shadow: none;
}

.mgl-btn--ghost:hover,
body .woocommerce a.button.wc-backward:hover {
	background: var(--c-surface) !important;
	color: var(--c-ink) !important;
	border-color: var(--c-ink) !important;
}

.mgl-btn--light {
	background: #fff !important;
	color: var(--c-ink) !important;
}
.mgl-btn--light:hover { background: #fff !important; color: var(--c-brand-700) !important; }

/* Formularfelter */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body select,
body textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	font-family: var(--f-sans);
	font-size: 16px;
	color: var(--c-ink);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

body input:focus,
body select:focus,
body textarea:focus {
	border-color: var(--c-brand);
	box-shadow: 0 0 0 4px var(--c-brand-050);
	outline: none;
}

/* ---------------------------------------------------------------
   4. Produktkort (shop, kategorier, relaterede)
   --------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 47%), 1fr));
	gap: clamp(16px, 2.2vw, 30px);
	margin: 0 0 var(--section-y);
	padding: 0;
	list-style: none;
}

.woocommerce ul.products:before,
.woocommerce ul.products:after { display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 14px 14px 18px;
	position: relative;
	transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-2);
	border-color: transparent;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--c-canvas);
	border-radius: var(--r-md);
	margin-bottom: 16px;
	padding: 10px;
	box-shadow: none;
	transition: transform .4s var(--ease);
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.035); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--f-sans) !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	line-height: 1.4;
	color: var(--c-ink) !important;
	letter-spacing: 0;
	padding: 0 2px 6px !important;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--f-sans);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--c-ink) !important;
	margin: 0 2px auto;
	padding-bottom: 14px;
	display: block;
}

.woocommerce ul.products li.product .price del {
	color: var(--c-ink-45) !important;
	font-weight: 500;
	opacity: 1;
	margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
	color: var(--c-clay) !important;
	text-decoration: none;
	font-weight: 700;
}
.woocommerce ul.products li.product .price small.woocommerce-price-suffix {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--c-ink-45);
}

/* Knap i kortet */
.woocommerce ul.products li.product .button {
	width: 100%;
	padding: 12px 18px !important;
	font-size: 14.5px !important;
	background: var(--c-ink) !important;
	box-shadow: none;
	margin: 0 !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--c-brand-700) !important; }
.woocommerce ul.products li.product.outofstock .button {
	background: transparent !important;
	color: var(--c-ink-45) !important;
	border-color: var(--c-line) !important;
	box-shadow: none;
}
.woocommerce ul.products li.product.outofstock .button:hover {
	background: transparent !important;
	color: var(--c-ink) !important;
	border-color: var(--c-ink-45) !important;
	transform: none;
}
.woocommerce ul.products li.product.outofstock a img { opacity: .72; }
.woocommerce ul.products li.product .button.loading { opacity: .7; }
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* Divis hover-overlay på billedet bruges ikke – vi har en rigtig knap */
.woocommerce ul.products li.product .et_overlay { display: none !important; }

/* Badges */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 22px; left: 22px;
	right: auto;
	margin: 0;
	background: var(--c-clay);
	color: #fff;
	font-family: var(--f-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	min-height: 0;
	line-height: 1;
	padding: 7px 12px;
	border-radius: var(--r-pill);
	z-index: 2;
}

.woocommerce ul.products li.product.outofstock:after {
	content: 'Udsolgt';
	position: absolute;
	top: 22px; right: 22px;
	background: rgba(20, 36, 31, .82);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 6px 11px;
	border-radius: var(--r-pill);
}

/* Arkiv-header */
.woocommerce-products-header,
.woocommerce .page-description {
	margin-bottom: clamp(20px, 3vw, 34px);
}

.woocommerce-products-header__title,
.woocommerce h1.page-title,
body.archive h1.entry-title {
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem) !important;
	margin-bottom: 6px;
}

.woocommerce .woocommerce-result-count {
	font-size: 14.5px;
	color: var(--c-ink-45);
	margin: 6px 0 22px;
}

.woocommerce .woocommerce-ordering select {
	padding: 10px 40px 10px 14px;
	border-radius: var(--r-pill);
	font-size: 14.5px;
	background-color: var(--c-surface);
	/* Divis .orderby-regel giver ellers Open Sans, grå tekst og ingen kant. */
	font-family: var(--f-sans);
	font-weight: 400;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-line);
}

/* Brødkrumme */
.woocommerce .woocommerce-breadcrumb {
	font-size: 13.5px;
	color: var(--c-ink-45);
	margin-bottom: 18px;
	letter-spacing: .01em;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--c-ink-45); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--c-brand); }

/* Paginering */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: flex;
	gap: 8px;
	justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	color: var(--c-ink);
	font-weight: 600;
	font-size: 15px;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #fff;
}

/* ---------------------------------------------------------------
   5. Produktside
   --------------------------------------------------------------- */

.woocommerce div.product .product_title,
.et_pb_wc_title h1 {
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem) !important;
	margin-bottom: 10px !important;
	padding-bottom: 0 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.et_pb_wc_price .price {
	font-family: var(--f-sans);
	font-size: 26px !important;
	font-weight: 600;
	color: var(--c-ink) !important;
	margin-bottom: 4px;
}
.woocommerce div.product p.price ins,
.et_pb_wc_price ins { color: var(--c-clay) !important; text-decoration: none; }
.woocommerce div.product p.price del { color: var(--c-ink-45) !important; font-size: .68em; }
.woocommerce div.product p.price .woocommerce-price-suffix {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-ink-45);
}

/* WooCommerce skjuler galleriet (inline opacity: 0), til JavaScript har kørt,
   så hovedbilledet vises sent (LCP). Med ét billede bygges intet om, og det
   vises med det samme. Med flere bygger flexslider miniaturerne om, og vises de
   før det, flytter layoutet sig (CLS) – der beholdes WooCommerces standard. */
.woocommerce-product-gallery:not(:has(.woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image)) { opacity: 1 !important; }

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: clamp(14px, 2vw, 26px);
}
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--r-md); }
.woocommerce div.product .flex-control-thumbs { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product .flex-control-thumbs li { width: 68px; margin: 0; float: none; }
.woocommerce div.product .flex-control-thumbs img {
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	padding: 4px;
	background: #fff;
	opacity: 1;
	transition: border-color .2s var(--ease);
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { border-color: var(--c-brand); }

/* Antal + køb */
.woocommerce .quantity .qty {
	width: 74px;
	height: 52px;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	background: var(--c-surface);
}

.woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.woocommerce div.product form.cart .button { padding: 16px 34px !important; font-size: 16px !important; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 4px; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 6px 0; border: none; }
.woocommerce div.product form.cart .variations label { font-weight: 600; color: var(--c-ink); }
/* td.value slår Divis `.woocommerce div.product form.cart .variations td select`
   (0,4,4), som ellers giver Open Sans, grå baggrund, 12px tekst og ingen kant.
   .woocommerce sidder på <body>, så "body .woocommerce" ville ikke matche. */
.woocommerce div.product form.cart .variations td.value select {
	border-radius: var(--r-pill);
	padding: 12px 40px 12px 16px;
	min-width: 220px;
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--c-ink) !important;
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
}

.woocommerce div.product .product_meta {
	font-size: 14px;
	color: var(--c-ink-45);
	border-top: 1px solid var(--c-line);
	padding-top: 18px;
	margin-top: 8px;
}
.woocommerce div.product .product_meta a { color: var(--c-ink-70); }
.woocommerce div.product .product_meta a:hover { color: var(--c-brand); }

/* Faner */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--c-line);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-ink-45);
	padding: 12px 18px;
	display: block;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--c-ink);
	border-bottom-color: var(--c-brand);
}
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; }
.woocommerce div.product .woocommerce-Tabs-panel h2 { display: none; }

/* Relaterede */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
section.related h2 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem) !important;
	margin-bottom: 24px !important;
	padding-top: clamp(30px, 4vw, 56px);
}

/* Divis WooCommerce-moduler – ryd op i default-margener */
.et_pb_wc_description p:last-child { margin-bottom: 0; }
.et_pb_wc_add_to_cart form.cart { margin-top: 0; }

/* ---------------------------------------------------------------
   6. Kurv, kasse og konto
   --------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	border-collapse: separate;
	overflow: hidden;
	background: var(--c-surface);
}
.woocommerce table.shop_table th {
	font-family: var(--f-sans);
	font-weight: 600;
	color: var(--c-ink);
	background: var(--c-canvas);
	border-bottom: 1px solid var(--c-line);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--c-line); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.35rem !important; margin-bottom: 14px !important; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top: none;
	border-left: 4px solid var(--c-brand);
	background: var(--c-brand-050);
	color: var(--c-ink);
	border-radius: var(--r-md);
	font-size: 15px;
	padding: 16px 20px 16px 22px;
}
.woocommerce-info:before,
.woocommerce-message:before { color: var(--c-brand); }
.woocommerce-error { border-left-color: var(--c-clay); background: #fdf1ed; }
.woocommerce-error:before { color: var(--c-clay); }

/* Blok-kasse (WooCommerce Blocks) */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--f-display) !important;
	color: var(--c-ink) !important;
}
.wc-block-components-button:not(.is-link) {
	border-radius: var(--r-pill) !important;
	background: var(--c-brand-700) !important;
	font-family: var(--f-sans) !important;
	font-weight: 600 !important;
	padding: 16px 28px !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--c-brand-800) !important; }
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: var(--r-md);
}
.wc-block-checkout__form .wc-block-components-text-input input:focus {
	box-shadow: 0 0 0 3px var(--c-brand-050);
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 8px 20px;
}

/* ---------------------------------------------------------------
   7. Blog og sider
   --------------------------------------------------------------- */

body.single #left-area,
body.page #left-area { padding-right: clamp(0px, 3vw, 46px); }

.et_pb_post {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: clamp(18px, 2.4vw, 30px);
	margin-bottom: clamp(18px, 2.4vw, 30px);
	transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
body.archive .et_pb_post:hover,
body.blog .et_pb_post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
body.single .et_pb_post { background: none; border: none; padding: 0; }

.et_pb_post .entry-featured-image-url { border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; }
.et_pb_post h2.entry-title a,
.entry-title { color: var(--c-ink); }
.et_pb_post .post-meta,
.single .post-meta {
	font-family: var(--f-sans);
	font-size: 13.5px;
	color: var(--c-ink-45);
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.et_pb_post .post-meta a { color: var(--c-ink-45); }

body.single .entry-content,
body.page .entry-content { font-size: 17.5px; }
body.single .entry-content img,
body.page .entry-content img { border-radius: var(--r-md); }

blockquote {
	border-left: 3px solid var(--c-brand);
	background: var(--c-brand-050);
	padding: 18px 24px;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin: 26px 0;
	font-family: var(--f-display);
	font-size: 1.12em;
	color: var(--c-ink);
}

/* Sidebar */
#sidebar .et_pb_widget {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 22px;
	margin-bottom: 22px;
	float: none;
	width: 100%;
}
#sidebar .et_pb_widget h4.widgettitle,
#sidebar .et_pb_widget h2 {
	font-family: var(--f-sans);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-ink-45);
	margin-bottom: 14px;
}
#sidebar .et_pb_widget ul li { padding: 8px 0; border-bottom: 1px solid var(--c-line); }
#sidebar .et_pb_widget ul li:last-child { border-bottom: none; }
#sidebar .et_pb_widget a { color: var(--c-ink-70); }
#sidebar .et_pb_widget a:hover { color: var(--c-brand); }
#sidebar .wp-block-search__button { color: var(--c-ink-70); } /* Divis #666 på #ddd gav 4,2:1 */

/* Manchet og billede på indholdssider */
.mgl-lead {
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
	line-height: 1.45;
	color: var(--c-ink);
	margin-bottom: 28px;
}
.mgl-figure {
	margin: 0 0 32px;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-1);
}
.mgl-figure img { width: 100%; height: auto; display: block; border-radius: 0; }

/* Sidetitel på almindelige sider */
body.page:not(.home) #main-content .entry-title,
body.single #main-content .entry-title {
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------- */

#main-footer { background: var(--c-ink); color: #c3d0cb; }

.mgl-footer { padding: clamp(48px, 6vw, 82px) 0 0; }
.mgl-footer__inner {
	width: min(92%, var(--wrap));
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: clamp(26px, 4vw, 56px);
}
.mgl-footer h3 {
	font-family: var(--f-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8ea79e;
	margin-bottom: 16px;
}
.mgl-footer p { color: #b7c6c0; font-size: 15px; line-height: 1.7; }
.mgl-footer ul { list-style: none; padding: 0; margin: 0; }
.mgl-footer li { margin-bottom: 9px; }
.mgl-footer a { color: #dfe8e4; font-size: 15px; }
.mgl-footer a:hover { color: #fff; }
.mgl-footer__wordmark {
	font-family: var(--f-display);
	font-size: 1.6rem;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 16px;
}
.mgl-footer__wordmark span { color: var(--c-brand); }

.mgl-footer__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mgl-footer__badge {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 7px 12px;
	font-size: 12.5px;
	color: #cddbd5;
	letter-spacing: .02em;
}

.mgl-footer__bottom {
	margin-top: clamp(34px, 4vw, 54px);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.mgl-footer__bottom-inner {
	width: min(92%, var(--wrap));
	margin: 0 auto;
	padding: 20px 0 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: #8ea79e;
}
.mgl-footer__bottom a { color: #b7c6c0; font-size: 13.5px; }

@media (max-width: 980px) {
	.mgl-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.mgl-footer__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   9. Forside – egne sektioner
   --------------------------------------------------------------- */

/* Forsiden kører fuld bredde uden Divis container og sidetitel */
body.home #main-content .container,
body.home #main-content .container.clearfix {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}
body.home #left-area { width: 100%; padding: 0 !important; float: none; }
body.home #main-content article { padding: 0; margin: 0; }
body.home .entry-title,
body.home .et_post_meta_wrapper { display: none; }
body.home #sidebar { display: none; }
body.home .entry-content { padding-top: 0; }

.mgl-wrap { width: min(92%, var(--wrap)); margin-inline: auto; }
.mgl-section { padding-block: var(--section-y); }
.mgl-section--tight { padding-block: clamp(34px, 5vw, 60px); }
.mgl-section--sand { background: var(--c-sand); }
.mgl-section--mint { background: var(--c-brand-050); }

.mgl-eyebrow {
	font-family: var(--f-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-brand-700); /* 5,3:1 på sand – brand-600 gav 3,7:1 */
	margin-bottom: 12px;
	display: block;
}

.mgl-section__head { max-width: 640px; margin-bottom: clamp(26px, 3.4vw, 46px); }
.mgl-section__head--center { margin-inline: auto; text-align: center; }
.mgl-section__head p { font-size: 17.5px; color: var(--c-ink-70); margin-top: 12px; margin-bottom: 0; }

/* Hero – delt i tekst og produktbillede */
.mgl-hero { background: var(--c-sand); overflow: hidden; }
.mgl-hero__inner {
	width: min(92%, var(--wrap));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding-block: clamp(46px, 6.5vw, 92px);
}
.mgl-hero__content { max-width: 34rem; }
.mgl-hero h1 {
	font-size: clamp(2.2rem, 1.35rem + 3.3vw, 3.9rem);
	margin-bottom: 18px;
}
.mgl-hero p {
	font-size: clamp(17px, 16px + .35vw, 19.5px);
	color: var(--c-ink-70);
	max-width: 46ch;
	margin-bottom: 28px;
}
.mgl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mgl-hero__note {
	margin-top: 22px;
	font-size: 14px;
	color: var(--c-ink-45);
	display: flex;
	align-items: center;
	gap: 9px;
}
.mgl-hero__note svg { width: 17px; height: 17px; color: var(--c-brand); flex: none; }
.mgl-hero__media {
	position: relative;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: clamp(18px, 3vw, 44px);
	box-shadow: var(--sh-1);
}
.mgl-hero__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	border-radius: 0;
}
.mgl-hero__tag {
	position: absolute;
	left: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	background: var(--c-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 9px 15px;
	border-radius: var(--r-pill);
}
@media (max-width: 860px) {
	.mgl-hero__inner { grid-template-columns: 1fr; }
	.mgl-hero__media { order: -1; aspect-ratio: 16 / 10; }
}

/* USP-bånd */
.mgl-usp { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.mgl-usp__inner {
	width: min(92%, var(--wrap));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 30px);
	padding-block: clamp(22px, 2.6vw, 30px);
}
.mgl-usp__item { display: flex; align-items: center; gap: 13px; }
.mgl-usp__item svg { width: 24px; height: 24px; flex: none; color: var(--c-brand); }
.mgl-usp__item strong { display: block; font-size: 15px; color: var(--c-ink); font-weight: 600; line-height: 1.3; }
.mgl-usp__item span { font-size: 13.5px; color: var(--c-ink-45); }
@media (max-width: 900px) { .mgl-usp__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mgl-usp__inner { grid-template-columns: 1fr; } }

/* Kategorikort – produktbillede i ro på lys flade, tekst under */
.mgl-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.mgl-cat {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.mgl-cat:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-2);
	border-color: transparent;
}
.mgl-cat__figure {
	aspect-ratio: 5 / 3.4;
	background: var(--c-canvas);
	display: grid;
	place-items: center;
	padding: 22px;
	overflow: hidden;
}
.mgl-cat img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .5s var(--ease);
	border-radius: 0;
}
.mgl-cat:hover img { transform: scale(1.05); }
.mgl-cat__label {
	padding: 18px 22px 22px;
	font-family: var(--f-display);
	font-size: 1.24rem;
	line-height: 1.25;
	color: var(--c-ink);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.mgl-cat__label span {
	font-family: var(--f-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--c-ink-45);
	white-space: nowrap;
}
@media (max-width: 900px) { .mgl-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mgl-cats { grid-template-columns: 1fr; } }

/* Produkter på forsiden – WooCommerce-shortcode inde i vores sektion */
.mgl-section .woocommerce ul.products,
.mgl-section ul.products { margin-bottom: 0; }

/* Split-sektion (billede + tekst) */
.mgl-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 4vw, 66px);
	align-items: center;
}
.mgl-split__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--sh-1); }
/* .mgl-split foran, så reglen slår ".entry-content img { height: auto }" længere nede. */
.mgl-split .mgl-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; border-radius: 0; }
.mgl-split__body p { font-size: 17.5px; }
.mgl-split__list { list-style: none; padding: 0; margin: 22px 0 28px; }
.mgl-split__list li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
	color: var(--c-ink-70);
}
.mgl-split__list li:before {
	content: '';
	position: absolute;
	left: 0; top: 7px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--c-brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6e55' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
@media (max-width: 820px) {
	.mgl-split { grid-template-columns: 1fr; }
	.mgl-split--flip .mgl-split__media { order: -1; }
}

/* Blogkort */
.mgl-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.mgl-post {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.mgl-post:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mgl-post__media { aspect-ratio: 16 / 10; background: var(--c-sand); overflow: hidden; }
.mgl-post__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s var(--ease); }
.mgl-post:hover .mgl-post__media img { transform: scale(1.05); }
.mgl-post__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.mgl-post__date { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-45); margin-bottom: 10px; }
.mgl-post__title { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.28; color: var(--c-ink); margin-bottom: 10px; }
.mgl-post__excerpt { font-size: 15px; color: var(--c-ink-70); margin-bottom: 16px; }
.mgl-post__more { margin-top: auto; font-weight: 600; font-size: 14.5px; color: var(--c-brand-700); }
.mgl-post__more:after { content: ' →'; }
@media (max-width: 900px) { .mgl-posts { grid-template-columns: 1fr; } }

/* Nyhedsbrev */
.mgl-news {
	background: var(--c-ink);
	color: #fff;
	border-radius: var(--r-lg);
	padding: clamp(32px, 5vw, 60px);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(24px, 4vw, 50px);
	align-items: center;
}
.mgl-news h2 { color: #fff !important; }
.mgl-news p { color: rgba(255, 255, 255, .82); margin-bottom: 0; }
.mgl-news__cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) { .mgl-news { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   10. Oprydning i arvet Divi-indhold
   --------------------------------------------------------------- */

/* Gamle, tomme sektioner fra 2021-importen */
.et_pb_section:empty,
.et_pb_row:empty { display: none !important; }

/* Divis "Designed by Elegant Themes" */
#footer-info { display: none; }

/* Scroll-to-top */
.et_pb_scroll_top {
	background: var(--c-ink);
	border-radius: var(--r-pill);
	right: 22px;
	bottom: 22px;
}

/* Billeder i gammelt indhold må ikke sprænge layoutet */
.entry-content img,
.et_pb_text img { max-width: 100%; height: auto; }

/* Print/Reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.woocommerce ul.products li.product:hover,
	.mgl-post:hover { transform: none; }
}