/* Appell Senter Hub – detail and system-page exceptions.
 * Layout, spacing, backgrounds and responsive geometry live in Elementor data.
 * This stylesheet only covers states/relationships Elementor cannot express
 * cleanly in generated documents.
 */

body.single-butikk,
body.single-tilbud,
body.single-post,
body.search,
body.error404 {
	--appell-primary: var(--e-global-color-primary);
	--appell-text: var(--e-global-color-text);
	--appell-accent: var(--e-global-color-accent);
	--appell-light: var(--e-global-color-appell-light);
	--appell-dark: var(--e-global-color-appell-dark);
	--appell-border: color-mix(in srgb, var(--appell-text) 15%, transparent);
	--appell-muted: color-mix(in srgb, var(--appell-text) 68%, transparent);
}

body.single-butikk *,
body.single-tilbud *,
body.single-post *,
body.search *,
body.error404 * {
	box-sizing: border-box;
}

body.single-butikk :is(a,button,input,select,textarea,[tabindex]):focus-visible,
body.single-tilbud :is(a,button,input,select,textarea,[tabindex]):focus-visible,
body.single-post :is(a,button,input,select,textarea,[tabindex]):focus-visible,
body.search :is(a,button,input,select,textarea,[tabindex]):focus-visible,
body.error404 :is(a,button,input,select,textarea,[tabindex]):focus-visible {
	outline: 3px solid var(--appell-accent);
	outline-offset: 3px;
}

/* Detail-page text relationships. */
.appell-single-detail__hero-copy {
	max-width: 860px;
}

body.single-tilbud .appell-single-detail__hero-copy,
body.single-post .appell-single-detail__hero-copy {
	max-width: 1040px;
}

.appell-single-detail__title .elementor-heading-title {
	max-width: 900px;
	margin: 0;
}

.appell-single-detail__lead {
	max-width: 720px;
}

.appell-single-detail__lead :is(p,div),
.appell-single-detail__info-value :is(p,div,a),
.appell-single-detail__status-value :is(p,div),
.appell-single-detail__status-note :is(p,div) {
	margin: 0;
}

/* Metadata pills are a compound state; Elementor has no practical shared
 * generator control for the dynamic item wrappers. */
.appell-single-detail__meta {
	flex-wrap: wrap;
}

.appell-single-detail__meta-item {
	width: auto;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--appell-light) 20%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--appell-light) 7%, transparent);
}

.appell-single-detail__meta-item,
.appell-single-detail__meta-item :is(p,div,a) {
	color: color-mix(in srgb, var(--appell-light) 92%, transparent);
	text-decoration: none;
}

.appell-single-detail__meta-item--accent {
	border-color: color-mix(in srgb, var(--appell-accent) 72%, transparent);
	background: color-mix(in srgb, var(--appell-accent) 18%, transparent);
}

.appell-single-detail__meta-item:has(.elementor-widget-container:empty),
.appell-single-detail__hero-mark:has(.appell-single-detail__store-logo .elementor-widget-container:empty),
.appell-single-detail__info-item:has(.elementor-widget-container:empty),
.appell-single-detail__main:has(.appell-single-detail__post-content .elementor-widget-container:empty) {
	display: none;
}

.appell-single-detail__store-logo img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.appell-single-detail__store-logo img {
		height: 96px;
	}
}

/* The media card crosses the hero/content boundary. Elementor owns the negative
 * margin; this gradient only prevents the section background from covering the
 * dark part of the transition. */
.appell-single-detail__media-section {
	background: linear-gradient(to bottom, transparent 0 102px, var(--appell-light) 102px 100%);
}

@media (max-width: 767px) {
	.appell-single-detail__media-section {
		background: linear-gradient(to bottom, transparent 0 70px, var(--appell-light) 70px 100%);
	}
}

.appell-single-detail__media-image,
.appell-single-detail__media-image > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.appell-single-detail__media-image img {
	display: block;
	width: 100%;
}

/* Rich post content requires flow rules rather than container geometry. */
.appell-single-detail__post-content {
	max-width: 850px;
	color: var(--appell-text);
}

.appell-single-detail__post-content :is(p,ul,ol,blockquote) {
	margin: 0 0 1.45em;
}

.appell-single-detail__post-content h2 {
	margin: 1.8em 0 .65em;
}

.appell-single-detail__post-content h3 {
	margin: 1.6em 0 .6em;
}

.appell-single-detail__post-content a {
	color: var(--appell-primary);
	text-decoration-color: var(--appell-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.appell-single-detail__post-content blockquote {
	margin-inline: 0;
	padding: 12px 0 12px 24px;
	border-left: 4px solid var(--appell-accent);
}

.appell-single-detail__info-item {
	padding-block: 16px;
	border-bottom: 1px solid var(--appell-border);
}

.appell-single-detail__info-label,
.appell-single-detail__status-note,
.appell-single-detail__section-lead {
	color: var(--appell-muted);
}

.appell-single-detail__info-value a {
	text-decoration-color: var(--appell-accent);
	text-underline-offset: 3px;
}

.appell-single-detail__external-cta a[href=""],
.appell-single-detail__external-cta a:not([href]) {
	display: none;
}

/* Related cards reuse the managed Loop Item; only stretch behavior belongs here. */
.appell-single-detail__related-grid .elementor-loop-container {
	align-items: stretch;
}

.appell-single-detail__related-grid .e-loop-item {
	height: 100%;
	min-width: 0;
}

/* Search/404 widget-state exceptions. */
.appell-system-page__image,
.appell-system-page__image > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.appell-system-page__image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.appell-system-page__search-form {
	width: 100%;
	max-width: 720px;
}

.appell-system-page__search-form .elementor-search-form__container {
	min-height: 58px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--appell-light);
}

.appell-system-page__search-form input {
	color: var(--appell-text);
}

.appell-system-page__archive-posts .elementor-post {
	overflow: hidden;
	border: 1px solid var(--appell-border);
	border-radius: 20px;
	background: var(--appell-light);
}

.appell-system-page__archive-posts .elementor-post__thumbnail__link {
	margin: 0;
}

.appell-system-page__archive-posts .elementor-post__text {
	padding: 22px 22px 26px;
}

@media (prefers-reduced-motion: reduce) {
	body.single-butikk *,
	body.single-tilbud *,
	body.single-post *,
	body.search *,
	body.error404 * {
		scroll-behavior: auto;
		transition-duration: .01ms;
		animation-duration: .01ms;
		animation-iteration-count: 1;
	}
}