/* ==========================================================================
 * Komponenter — knapper, kort, header, footer, badges, formularer.
 * ========================================================================== */

/* --------------------------------------------------------------- Knapper */

.tg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tg-space-2);
	padding: .8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--tg-radius-pill);
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-400);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--tg-dur-fast) var(--tg-ease),
		box-shadow var(--tg-dur-fast) var(--tg-ease),
		background-color var(--tg-dur-fast) var(--tg-ease),
		border-color var(--tg-dur-fast) var(--tg-ease),
		color var(--tg-dur-fast) var(--tg-ease);
}
.tg-btn:hover { transform: translateY(-2px); }
.tg-btn:active { transform: translateY(0); }

.tg-btn--primary {
	background: var(--tg-grad-accent);
	color: #fff;
	box-shadow: var(--tg-glow);
}
.tg-btn--primary:hover { color: #fff; box-shadow: 0 24px 60px -12px rgba(124, 58, 237, .5); }

.tg-btn--ghost {
	background: var(--tg-surface-elev);
	border-color: var(--tg-border-strong);
	color: var(--tg-text-strong);
	backdrop-filter: blur(12px);
}
.tg-btn--ghost:hover { border-color: var(--tg-accent); color: var(--tg-text-strong); }

.tg-btn--quiet {
	background: transparent;
	color: var(--tg-text-strong);
	border-color: var(--tg-border-strong);
}
.tg-btn--quiet:hover { background: var(--tg-accent-soft); border-color: var(--tg-accent); }

.tg-btn--sm { padding: .55rem 1.1rem; font-size: var(--tg-fs-300); }
.tg-btn--lg { padding: 1rem 2rem; font-size: var(--tg-fs-500); }
.tg-btn--block { width: 100%; }

/*
 * WooCommerces egne knapper.
 *
 * Woo udskriver <a class="button"> og <button class="button"> fra sine egne
 * skabeloner — i mini-kurven, i beskeder og på kontosiderne. Uden regler her
 * er de bare understregede links, og "Gå til kassen" i kurv-skuffen så ud som
 * brødtekst. De arver derfor .tg-btn's udseende.
 *
 * .alt og .checkout er Woos mærkning af den primære handling.
 */
.woocommerce .button,
.woocommerce-page .button,
.woocommerce-mini-cart__buttons .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tg-space-2);
	padding: .8rem 1.5rem;
	background: transparent;
	border: 1px solid var(--tg-border-strong);
	border-radius: var(--tg-radius-pill);
	color: var(--tg-text-strong);
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-400);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--tg-dur-fast) var(--tg-ease),
		box-shadow var(--tg-dur-fast) var(--tg-ease),
		background-color var(--tg-dur-fast) var(--tg-ease),
		border-color var(--tg-dur-fast) var(--tg-ease),
		color var(--tg-dur-fast) var(--tg-ease);
}
.woocommerce .button:hover,
.woocommerce-page .button:hover,
.woocommerce-mini-cart__buttons .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	transform: translateY(-2px);
	background: var(--tg-accent-soft);
	border-color: var(--tg-accent);
	color: var(--tg-text-strong);
}

.woocommerce .button.alt,
.woocommerce .button.checkout,
.woocommerce-page .button.alt,
.woocommerce-page .button.checkout,
.woocommerce-mini-cart__buttons .button.checkout {
	background: var(--tg-grad-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--tg-glow);
}
.woocommerce .button.alt:hover,
.woocommerce .button.checkout:hover,
.woocommerce-page .button.alt:hover,
.woocommerce-page .button.checkout:hover,
.woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--tg-grad-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 24px 60px -12px rgba(124, 58, 237, .5);
}

/* Woos "fjern vare"-kryds er ikke en knap i den forstand. */
.woocommerce a.remove,
.woocommerce-page a.remove {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ----------------------------------------------------------------- Kort */

.tg-card {
	position: relative;
	padding: var(--tg-space-6);
	background: var(--tg-surface);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-xl);
	backdrop-filter: blur(14px);
	box-shadow: var(--tg-shadow-sm);
	transition: transform var(--tg-dur) var(--tg-ease),
		box-shadow var(--tg-dur) var(--tg-ease),
		border-color var(--tg-dur) var(--tg-ease);
}
.tg-card--hover:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--tg-accent) 45%, var(--tg-border));
	box-shadow: var(--tg-shadow);
}
.tg-card__icon {
	display: inline-grid;
	place-items: center;
	width: 3rem; height: 3rem;
	margin-bottom: var(--tg-space-4);
	border-radius: var(--tg-radius-lg);
	background: var(--tg-accent-soft);
	color: var(--tg-accent-solid);
}
.tg-card h3 { margin-bottom: var(--tg-space-2); }
.tg-card p { color: var(--tg-text); margin-bottom: 0; }

/* --------------------------------------------------------------- Badges */

.tg-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--tg-space-2);
	padding: .3rem .75rem;
	border-radius: var(--tg-radius-pill);
	background: var(--tg-accent-soft);
	color: var(--tg-accent-solid);
	font-size: var(--tg-fs-300);
	font-weight: 600;
}
.tg-badge--save { background: var(--tg-success-soft); color: var(--tg-success); }

/* ------------------------------------------------------------ Sektioner */

.tg-section-head { max-width: 46rem; margin-bottom: var(--tg-space-10); }
.tg-section-head--center { margin-inline: auto; text-align: center; }
.tg-section-head h2 { margin-bottom: var(--tg-space-3); }
.tg-section-head__lede { font-size: var(--tg-fs-500); color: var(--tg-text); margin-bottom: 0; }

.tg-grid { display: grid; gap: var(--tg-space-5); }
.tg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tg-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --------------------------------------------------------------- Header */

.tg-header {
	position: sticky;
	top: 0;
	z-index: var(--tg-z-header);
	background: color-mix(in srgb, var(--tg-bg-base) 82%, transparent);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: border-color var(--tg-dur-fast) var(--tg-ease),
		background-color var(--tg-dur-fast) var(--tg-ease);
}
.tg-header.is-stuck {
	border-bottom-color: var(--tg-border);
	box-shadow: var(--tg-shadow-sm);
}
.tg-header__inner {
	display: flex;
	align-items: center;
	gap: var(--tg-space-5);
	min-height: var(--tg-header-h);
}

/* Accentlinje øverst — binder sidehoved og sidefod sammen. */
.tg-topline {
	height: 3px;
	background: var(--tg-grad-aurora);
	background-size: 200% 100%;
	animation: tg-topline-drift 14s var(--tg-ease) infinite alternate;
}
@keyframes tg-topline-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.tg-topline { animation: none; }
}

/* Topbjælke med kontaktdata og ét salgsargument */
.tg-topbar {
	display: none;
	border-bottom: 1px solid var(--tg-border);
	background: var(--tg-surface-sunk);
	font-size: var(--tg-fs-300);
}
.tg-topbar__phone { font-weight: 650; color: var(--tg-text-strong) !important; }
.tg-topbar__meta { display: inline-flex; align-items: center; gap: var(--tg-space-2); color: var(--tg-text-muted); }
.tg-topbar__meta svg { color: var(--tg-accent-solid); }

/* ----------------------------------------------------------- Trustpilot */

/*
 * Stjernerne er to identiske rækker oven på hinanden: en grå bund og en
 * farvet top, hvor toppens bredde klippes til scorens andel. Det gør at 4,9
 * vises som 4,9 og ikke rundes op til fem hele stjerner.
 */
.tg-trustpilot {
	display: inline-flex;
	align-items: center;
	gap: var(--tg-space-2);
	text-decoration: none;
	color: var(--tg-text-muted);
	transition: color var(--tg-dur-fast) var(--tg-ease);
}
.tg-trustpilot:hover { color: var(--tg-text-strong); }

.tg-trustpilot__stars {
	position: relative;
	display: inline-block;
	flex: none;
	line-height: 0;
}
.tg-trustpilot__stars-base { display: inline-flex; gap: 1px; color: var(--tg-border-strong); }
.tg-trustpilot__stars-fill {
	position: absolute;
	inset: 0;
	display: inline-flex;
	gap: 1px;
	overflow: hidden;
	white-space: nowrap;
	color: #00b67a;              /* Trustpilots grønne — genkendeligt uanset tema */
}
.tg-trustpilot__stars svg { flex: none; }

.tg-trustpilot__text {
	display: inline-flex;
	align-items: baseline;
	gap: var(--tg-space-1);
	white-space: nowrap;
}
.tg-trustpilot__text strong { color: var(--tg-text-strong); font-weight: 700; }
.tg-trustpilot__count { color: var(--tg-text-muted); }

/* I mobilmenuen står den alene og må gerne fylde lidt mere. */
.tg-trustpilot--panel {
	padding: var(--tg-space-3) 0;
	font-size: var(--tg-fs-300);
}
.tg-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-space-4);
	padding-block: var(--tg-space-2);
}
.tg-topbar__links { display: flex; align-items: center; gap: var(--tg-space-5); }
.tg-topbar a {
	display: inline-flex;
	align-items: center;
	gap: var(--tg-space-2);
	color: var(--tg-text);
	text-decoration: none;
	font-weight: 500;
}
.tg-topbar a:hover { color: var(--tg-accent-solid); }
@media (min-width: 62rem) { .tg-topbar { display: block; } }

/* Logo */
.tg-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: var(--tg-text-strong);
}
.tg-logo svg { display: block; height: 40px; width: auto; }
.tg-logo img { max-height: 44px; width: auto; }
@media (min-width: 48rem) { .tg-logo svg { height: 46px; } }

/* Navigation */
.tg-nav { display: none; margin-left: auto; }
@media (min-width: 62rem) { .tg-nav { display: block; } }

.tg-nav__list {
	display: flex;
	align-items: center;
	gap: var(--tg-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.tg-nav__list li { margin: 0; }
.tg-nav__list a {
	position: relative;
	display: block;
	padding: .55rem .9rem;
	color: var(--tg-text);
	font-weight: 550;
	text-decoration: none;
	transition: color var(--tg-dur-fast) var(--tg-ease);
}

/* Understregning der vokser ud fra midten. Kun transform animeres. */
.tg-nav__list a::after {
	content: "";
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--tg-grad-accent);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform var(--tg-dur-fast) var(--tg-ease-out);
}
.tg-nav__list a:hover { color: var(--tg-text-strong); }
.tg-nav__list a:hover::after { transform: scaleX(1); }

.tg-nav__list .current-menu-item > a,
.tg-nav__list .current_page_item > a { color: var(--tg-text-strong); }
.tg-nav__list .current-menu-item > a::after,
.tg-nav__list .current_page_item > a::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.tg-nav__list a::after { transition: none; }
}

/* I mobilmenuen giver understregningen ikke mening — den har sine egne skillelinjer. */
.tg-nav__list--mobile a::after { display: none; }

.tg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--tg-space-2);
	margin-left: auto;
}
@media (min-width: 62rem) { .tg-header__actions { margin-left: 0; } }
.tg-header__cta { display: none; }
@media (min-width: 48rem) { .tg-header__cta { display: inline-flex; } }

/* Tema-toggle */
.tg-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	padding: 0;
	background: var(--tg-surface-elev);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-pill);
	color: var(--tg-text);
	cursor: pointer;
	transition: color var(--tg-dur-fast) var(--tg-ease), border-color var(--tg-dur-fast) var(--tg-ease);
}
.tg-theme-toggle:hover { color: var(--tg-accent-solid); border-color: var(--tg-accent); }
/* Grid frem for block, så ikonet centreres i sin egen celle uanset alt andet. */
.tg-theme-toggle__icon { display: none; grid-area: 1 / 1; place-items: center; }
/* Uden data-theme = auto */
:root:not([data-theme]) .tg-theme-toggle__icon--auto { display: grid; }
:root[data-theme="light"] .tg-theme-toggle__icon--light { display: grid; }
:root[data-theme="dark"] .tg-theme-toggle__icon--dark { display: grid; }

/* Kurv-knap */
.tg-cart-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	background: var(--tg-surface-elev);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-pill);
	color: var(--tg-text);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--tg-dur-fast) var(--tg-ease), border-color var(--tg-dur-fast) var(--tg-ease);
}
.tg-cart-btn:hover { color: var(--tg-accent-solid); border-color: var(--tg-accent); }
.tg-cart-btn__count {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 1.2rem;
	height: 1.2rem;
	padding-inline: .25rem;
	display: grid;
	place-items: center;
	background: var(--tg-grad-accent);
	color: #fff;
	border-radius: var(--tg-radius-pill);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}
.tg-cart-btn__count:empty, .tg-cart-btn__count[data-count="0"] { display: none; }

/* Burger */
.tg-nav-toggle {
	display: inline-grid;
	place-items: center;
	gap: 4px;
	width: 2.5rem; height: 2.5rem;
	background: var(--tg-surface-elev);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-pill);
	cursor: pointer;
}
@media (min-width: 62rem) { .tg-nav-toggle { display: none; } }
.tg-nav-toggle__bar {
	grid-area: 1 / 1;
	width: 16px; height: 1.8px;
	background: var(--tg-text-strong);
	border-radius: 2px;
	transition: transform var(--tg-dur-fast) var(--tg-ease), opacity var(--tg-dur-fast) var(--tg-ease);
}
.tg-nav-toggle__bar:nth-child(1) { transform: translateY(-5px); }
.tg-nav-toggle__bar:nth-child(3) { transform: translateY(5px); }
.tg-nav-toggle[aria-expanded="true"] .tg-nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.tg-nav-toggle[aria-expanded="true"] .tg-nav-toggle__bar:nth-child(2) { opacity: 0; }
.tg-nav-toggle[aria-expanded="true"] .tg-nav-toggle__bar:nth-child(3) { transform: rotate(-45deg); }

/* Mobilmenu */
.tg-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--tg-z-drawer);
	visibility: hidden;
	pointer-events: none;
}
.tg-mobile-nav.is-open { visibility: visible; pointer-events: auto; }
.tg-mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 5, 10, .55);
	opacity: 0;
	transition: opacity var(--tg-dur) var(--tg-ease);
}
.tg-mobile-nav.is-open .tg-mobile-nav__backdrop { opacity: 1; }
.tg-mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(22rem, 88vw);
	display: flex;
	flex-direction: column;
	gap: var(--tg-space-4);
	padding: var(--tg-space-6);
	background: var(--tg-panel);
	backdrop-filter: blur(20px);
	border-left: 1px solid var(--tg-border);
	transform: translateX(100%);
	transition: transform var(--tg-dur) var(--tg-ease-out);
	overflow-y: auto;
}
.tg-mobile-nav.is-open .tg-mobile-nav__panel { transform: none; }
.tg-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; }
.tg-mobile-nav__close {
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--tg-text-strong);
	padding: var(--tg-space-2);
}
.tg-nav__list--mobile { flex-direction: column; align-items: stretch; gap: 0; }
.tg-nav__list--mobile a {
	padding: var(--tg-space-3) var(--tg-space-2);
	border-bottom: 1px solid var(--tg-border);
	border-radius: 0;
	font-size: var(--tg-fs-500);
}
.tg-mobile-nav__phone {
	display: inline-flex; align-items: center; gap: var(--tg-space-2);
	color: var(--tg-text); text-decoration: none; font-weight: 600;
}

/* Sticky tilmeld-CTA på mobil — konverteringen skal altid være inden for rækkevidde. */
.tg-sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--tg-z-sticky-cta);
	display: flex;
	gap: var(--tg-space-2);
	padding: var(--tg-space-3) var(--tg-gutter);
	padding-bottom: max(var(--tg-space-3), env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--tg-bg-base) 92%, transparent);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--tg-border);
	/* Skjult som udgangspunkt: ude af skærmen OG ude af tab-rækkefølgen.
	   visibility gør at links ikke kan fokuseres, mens bjælken er nede. */
	transform: translateY(110%);
	visibility: hidden;
	transition: transform var(--tg-dur) var(--tg-ease-out), visibility 0s linear var(--tg-dur);
}
.tg-sticky-cta.is-visible {
	transform: none;
	visibility: visible;
	transition: transform var(--tg-dur) var(--tg-ease-out), visibility 0s;
}
.tg-sticky-cta .tg-btn { flex: 1; }
.tg-sticky-cta__call { flex: 0 0 auto !important; width: 3rem; padding-inline: 0; }
@media (min-width: 62rem) { .tg-sticky-cta { display: none; } }

/* --------------------------------------------------------------- Footer */

.tg-footer {
	position: relative;
	margin-top: var(--tg-section-y);
	padding-top: clamp(3.5rem, 8vw, 6rem);
	border-top: 1px solid var(--tg-border);
	background:
		radial-gradient(70% 120% at 12% 0%, var(--tg-accent-tint), transparent 62%),
		var(--tg-surface-sunk);
	overflow: hidden;
	isolation: isolate;
}

/* Accentlinje langs overkanten — samme greb som øverst på siden. */
.tg-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--tg-grad-aurora);
	opacity: .8;
}

/* Nedtonet logo som flademarkør. Rent dekorativt og helt uden for flowet. */
.tg-footer__watermark {
	position: absolute;
	right: -6%;
	bottom: -18%;
	z-index: -1;
	width: min(46rem, 78%);
	pointer-events: none;
	opacity: .035;
	color: var(--tg-text-strong);
}
.tg-footer__watermark svg { width: 100%; height: auto; display: block; }

.tg-footer__inner { position: relative; }

.tg-footer__grid {
	display: grid;
	gap: var(--tg-space-10);
	padding-bottom: var(--tg-space-12);
}
@media (min-width: 48rem) {
	.tg-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.tg-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
	.tg-footer__grid { grid-template-columns: 1.5fr 1.1fr .9fr .9fr .9fr; gap: var(--tg-space-10); }
	.tg-footer__brand { grid-column: auto; }
}

/* --------------------------------------------------------- Åbningstider */

.tg-hours__title {
	font-size: var(--tg-fs-300);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tg-text-strong);
	margin-bottom: var(--tg-space-5);
	padding-bottom: var(--tg-space-3);
	border-bottom: 1px solid var(--tg-border);
}

/* --- Trafiklyset --- */

.tg-hours__status {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--tg-space-2) var(--tg-space-3);
	margin-bottom: var(--tg-space-5);
	font-size: var(--tg-fs-300);
}

/*
 * Selve signalhuset. Mørkt uanset tema — et trafiklys er sort, også om dagen —
 * med en svag lodret glans, så det læses som et fysisk kabinet frem for tre
 * løse prikker.
 */
.tg-signal {
	grid-row: span 2;
	display: grid;
	gap: 3px;
	padding: 4px;
	width: 1.35rem;
	border-radius: 7px;
	background: linear-gradient(180deg, #24262e, #15171c);
	border: 1px solid rgba(0, 0, 0, .55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .07),
		0 2px 5px rgba(0, 0, 0, .35);
}

/* Slukket lampe: næsten sort med en antydning af sin egen farve. */
.tg-signal__lamp {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	justify-self: center;
	background: rgba(255, 255, 255, .07);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6);
	transition: background-color var(--tg-dur) var(--tg-ease),
		box-shadow var(--tg-dur) var(--tg-ease);
}

/*
 * Tændt lampe. Gløden ligger uden for lampen, så den lyser op i huset —
 * ellers ligner det bare en farvet prik.
 */
.tg-hours__status--closed .tg-signal__lamp--red {
	background: #ff4d4d;
	box-shadow:
		inset 0 0 2px rgba(255, 255, 255, .7),
		0 0 6px 1px rgba(255, 77, 77, .85),
		0 0 12px 3px rgba(255, 77, 77, .35);
}
.tg-hours__status--soon .tg-signal__lamp--amber {
	background: #ffc233;
	box-shadow:
		inset 0 0 2px rgba(255, 255, 255, .7),
		0 0 6px 1px rgba(255, 194, 51, .85),
		0 0 12px 3px rgba(255, 194, 51, .35);
	animation: tg-signal-blink 1.4s steps(1, end) infinite;
}
.tg-hours__status--open .tg-signal__lamp--green {
	background: #35d07f;
	box-shadow:
		inset 0 0 2px rgba(255, 255, 255, .7),
		0 0 6px 1px rgba(53, 208, 127, .85),
		0 0 12px 3px rgba(53, 208, 127, .35);
}

/* Gul blinker, som et rigtigt signal der er ved at skifte. */
@keyframes tg-signal-blink {
	0%, 60%  { opacity: 1; }
	61%, 100% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
	.tg-hours__status--soon .tg-signal__lamp--amber { animation: none; }
}

.tg-hours__state { font-weight: 650; color: var(--tg-text-strong); align-self: end; }
.tg-hours__detail { color: var(--tg-text-muted); align-self: start; }
.tg-hours__detail:empty { display: none; }

/* --- Ugeoversigten --- */

.tg-hours__list { margin: 0; font-size: var(--tg-fs-300); }
.tg-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--tg-space-4);
	padding-block: var(--tg-space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--tg-border) 60%, transparent);
}
.tg-hours__row:last-child { border-bottom: 0; }
.tg-hours__row dt { margin: 0; color: var(--tg-text-muted); }
.tg-hours__row dd { margin: 0; color: var(--tg-text); white-space: nowrap; }

/* Dagen i dag markeres, så man ikke skal tælle sig frem. */
.tg-hours__row.is-today dt,
.tg-hours__row.is-today dd { color: var(--tg-text-strong); font-weight: 650; }

/* --- Mærkesøjlen --- */

.tg-footer__brand { max-width: 30rem; }
.tg-footer__brand .tg-logo { margin-bottom: var(--tg-space-5); }
.tg-footer__brand .tg-logo svg { height: 52px; }

.tg-footer__pitch {
	color: var(--tg-text);
	margin-bottom: var(--tg-space-6);
	max-width: 30rem;
}

.tg-footer__contact {
	list-style: none;
	margin: 0 0 var(--tg-space-6);
	padding: 0;
	display: grid;
	gap: var(--tg-space-4);
}
.tg-footer__contact li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--tg-space-4);
	align-items: start;
	margin: 0;
}
.tg-footer__contact-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--tg-radius-md);
	background: var(--tg-accent-soft);
	color: var(--tg-accent-solid);
	flex: none;
}
.tg-footer__contact strong {
	display: block;
	font-size: var(--tg-fs-300);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tg-text-muted);
	font-weight: 600;
	margin-bottom: .1rem;
}
.tg-footer__contact span > a,
.tg-footer__contact li > span { color: var(--tg-text-strong); }

.tg-footer__cta { margin-top: var(--tg-space-2); }

/* --- Menusøjlerne --- */

.tg-footer__col h2 {
	font-size: var(--tg-fs-300);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tg-text-strong);
	margin-bottom: var(--tg-space-5);
	padding-bottom: var(--tg-space-3);
	border-bottom: 1px solid var(--tg-border);
}

.tg-footer ul { list-style: none; margin: 0; padding: 0; }
.tg-footer li { margin-bottom: var(--tg-space-3); }

/*
 * :not(.tg-btn) er vigtig. Uden den overskriver denne regel knappernes
 * display: inline-flex — og så falder tekst og pil fra hinanden på hver sin
 * linje, fordi ikonet er en blok.
 */
.tg-footer a:not(.tg-btn) {
	color: var(--tg-text);
	text-decoration: none;
	transition: color var(--tg-dur-fast) var(--tg-ease),
		transform var(--tg-dur-fast) var(--tg-ease);
	display: inline-block;
}
.tg-footer__col a:hover {
	color: var(--tg-accent-solid);
	transform: translateX(3px);
}

/* --- Bundstribe --- */

.tg-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-space-4);
	padding-block: var(--tg-space-6);
	border-top: 1px solid var(--tg-border);
	font-size: var(--tg-fs-300);
	color: var(--tg-text-muted);
}
.tg-footer__legal { margin: 0; }
.tg-footer__sep { margin-inline: var(--tg-space-2); opacity: .5; }

.tg-payments { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; }

/*
 * Mærkerne står på deres egen lyse flade uanset tema. Betalingslogoer er
 * farvedefinerede — tones de om efter sidens tema, er de ikke længere de
 * mærker, kunden skal genkende.
 */
.tg-payments__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 13, 20, .18);
}
.tg-payments__mark img {
	display: block;
	height: 22px;
	width: auto;
	max-width: none; /* base.css sætter max-width:100% på alle billeder. */
}

/* ----------------------------------------------------------- Brødkrumme */

.tg-breadcrumbs { margin-bottom: var(--tg-space-4); font-size: var(--tg-fs-300); }
.tg-breadcrumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-space-2);
	list-style: none; margin: 0; padding: 0;
}
.tg-breadcrumbs li { margin: 0; color: var(--tg-text-muted); }
.tg-breadcrumbs li + li::before { content: "/"; margin-right: var(--tg-space-2); opacity: .5; }
.tg-breadcrumbs a { color: var(--tg-text-muted); text-decoration: none; }
.tg-breadcrumbs a:hover { color: var(--tg-accent-solid); }

/* --------------------------------------------------------------- Notice */

.tg-notice {
	padding: var(--tg-space-4) var(--tg-space-5);
	border-radius: var(--tg-radius-lg);
	border: 1px solid var(--tg-border-strong);
	background: var(--tg-surface);
	margin-bottom: var(--tg-space-6);
}
.tg-notice--ok { border-color: color-mix(in srgb, var(--tg-success) 45%, transparent); background: var(--tg-success-soft); }
.tg-notice--error { border-color: color-mix(in srgb, var(--tg-danger) 45%, transparent); }

/* ----------------------------------------------------------- Formularer */

.tg-form { display: grid; gap: var(--tg-space-4); }
.tg-form__row { display: grid; gap: var(--tg-space-4); }
@media (min-width: 40rem) { .tg-form__row--2 { grid-template-columns: 1fr 1fr; } }
.tg-field label {
	display: block;
	margin-bottom: var(--tg-space-2);
	font-weight: 600;
	color: var(--tg-text-strong);
	font-size: var(--tg-fs-300);
}
.tg-field__hint { font-size: var(--tg-fs-300); color: var(--tg-text-muted); margin-top: var(--tg-space-1); }
.tg-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.tg-consent { display: flex; gap: var(--tg-space-3); align-items: flex-start; font-size: var(--tg-fs-300); }
.tg-consent input { width: auto; margin-top: .25rem; flex: none; }

/* ==========================================================================
 * Kurv-drawer.
 * Ligger her frem for i woocommerce.css, fordi kurv-knappen og draweren
 * findes i sidehoved og sidefod på ALLE sider. Lå stilen kun i
 * woocommerce.css, render draweren som synligt indhold nederst på alle
 * ikke-shop-sider.
 * ========================================================================== */


.tg-cart-drawer { position: fixed; inset: 0; z-index: var(--tg-z-drawer); visibility: hidden; pointer-events: none; }
.tg-cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.tg-cart-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(4, 5, 10, .55);
	opacity: 0;
	transition: opacity var(--tg-dur) var(--tg-ease);
}
.tg-cart-drawer.is-open .tg-cart-drawer__backdrop { opacity: 1; }
.tg-cart-drawer__panel {
	position: absolute;
	inset-block: 0; right: 0;
	width: min(24rem, 92vw);
	display: flex; flex-direction: column;
	background: var(--tg-panel);
	backdrop-filter: blur(20px);
	border-left: 1px solid var(--tg-border);
	transform: translateX(100%);
	transition: transform var(--tg-dur) var(--tg-ease-out);
}
.tg-cart-drawer.is-open .tg-cart-drawer__panel { transform: none; }
.tg-cart-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--tg-space-5) var(--tg-space-6);
	border-bottom: 1px solid var(--tg-border);
}
.tg-cart-drawer__head h2 { margin: 0; font-size: var(--tg-fs-500); }
.tg-cart-drawer__close {
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--tg-text-strong); padding: var(--tg-space-2);
}
.tg-cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--tg-space-6); }

.woocommerce-mini-cart { list-style: none; margin: 0 0 var(--tg-space-5); padding: 0; }
/*
 * Rækkefølgen i Woos mini-cart.php er: fjern-kryds, så et link der selv
 * indeholder både billede og navn, og til sidst antal/pris. Billedet er altså
 * ikke et selvstændigt barn, og et grid på <li> kan ikke placere det.
 * Derfor: linket bliver selv en flex-række med billedet først, og krydset får
 * sin egen spalte hele vejen ned.
 */
.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 1fr 1.5rem;
	gap: var(--tg-space-2) var(--tg-space-3);
	align-items: center;
	padding-block: var(--tg-space-4);
	border-bottom: 1px solid var(--tg-border);
	margin: 0;
}
.woocommerce-mini-cart-item > a:not(.remove) {
	grid-area: 1 / 1 / 2 / 2;
	display: flex;
	align-items: center;
	gap: var(--tg-space-3);
}
.woocommerce-mini-cart-item .quantity {
	grid-area: 2 / 1 / 3 / 2;
	padding-left: 3.75rem; /* på linje med navnet, ikke med billedet */
	font-size: var(--tg-fs-300);
	color: var(--tg-text-muted);
}
.woocommerce-mini-cart-item .remove {
	grid-area: 1 / 2 / 3 / 3;
	align-self: start;
}

/* woocommerce-layout.css flyder billedet til højre i alle cart_list-lister.
   Selektoren dér er `.woocommerce ul.cart_list li img` — den her skal veje
   mindst lige så meget, ellers lander billedet efter navnet. */
.tg-cart-drawer ul.woocommerce-mini-cart li img,
.woocommerce-mini-cart-item img {
	float: none;
	width: 3rem;
	height: 3rem;
	margin: 0;
	object-fit: contain;
	flex: none;
}
.woocommerce-mini-cart-item a { color: var(--tg-text-strong); text-decoration: none; font-weight: 550; }
.woocommerce-mini-cart-item .remove_from_cart_button {
	color: var(--tg-text-muted);
	font-size: 1.2rem;
	line-height: 1;
	text-decoration: none;
}
.woocommerce-mini-cart-item .remove_from_cart_button:hover { color: var(--tg-danger); }
.woocommerce-mini-cart__total {
	display: flex; justify-content: space-between;
	padding-block: var(--tg-space-4);
	font-family: var(--tg-font-display);
	font-weight: 700;
	color: var(--tg-text-strong);
}
.woocommerce-mini-cart__buttons { display: grid; gap: var(--tg-space-3); }
.woocommerce-mini-cart__buttons .button { width: 100%; }
.woocommerce-mini-cart__empty-message { color: var(--tg-text-muted); }

/* Enkelt centreret knap under en sektionsoverskrift. */
.tg-section-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--tg-space-6);
}

/* .tg-btn har white-space: nowrap. Med en lang etiket bliver knappen bredere
 * end spalten og skubber hele siden vandret ud på en telefon — her må teksten
 * hellere brække end at siden gør. */
.tg-section-cta .tg-btn {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}