/* ==========================================================================
   House of Design – grafisk profil för Elementor
   Samma färger, typsnitt och mått som Divi-versionen.

   Sektionerna känns igen på sina CSS-klasser (Elementor: container/modul → Avancerat → CSS-klasser).
   Principen: temat styr layout (rutnät, höjder, mobilvy) och typografi. Ändrar du färg, luft,
   typsnitt eller storlek på ett enskilt element i Elementor så vinner din inställning.
   ========================================================================== */

/* Typsnitt (självhostade – inga anrop till Google) */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant SC"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/cormorant-sc-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/cormorant-sc-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/josefin-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); }

:root {
	--hod-white: #ffffff;
	--hod-sand: #eae6e1;
	--hod-stone: #c3beb3;
	--hod-taupe: #a19a8f;
	--hod-dark: #46403d;
	--hod-black: #000000;
	--hod-paper: #f6f4f1;
	--hod-ink: #2b2725;

	--hod-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--hod-font-sc: "Cormorant SC", "Cormorant Garamond", serif;
	--hod-font-ui: "Inter", system-ui, sans-serif;
	--hod-font-body: "Josefin Sans", "Inter", sans-serif;

	--hod-h1-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem);
	--hod-h1-track: 0.16em;
	--hod-h2-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.45rem);
	--hod-h2-track: 0.22em;
	--hod-h3-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
	--hod-h3-track: 0.2em;
	--hod-small-size: 0.8125rem;
	--hod-small-track: 0.05em;

	/* Luft runt innehållssektionerna (topp/botten och sidor) */
	--hod-space: 7rem;
	--hod-gutter: 3.5rem;
	--hodh-h: 70px;
	--hod-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 1100px) { :root { --hodh-h: 58px; } }
@media (max-width: 980px) { :root { --hod-space: 5rem; --hod-gutter: 2rem; } }
@media (max-width: 767px) { :root { --hod-space: 3.5rem; --hod-gutter: 1rem; } }

/* --- Grund (ersätter Hello Elementors stilar) --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hodh-h) + var(--wp-admin--admin-bar--height, 0px) + 16px); }
html body {
	margin: 0;
	font-family: var(--hod-font-body);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: .045em;
	line-height: 1.55;
	color: var(--hod-dark);
	background: var(--hod-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; border-style: none; }
a { color: inherit; text-decoration: none; background-color: transparent; }
p { margin-block: 0 .9rem; }
b, strong { font-weight: 400; }
table { border-collapse: collapse; }
.screen-reader-text, .hod-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: .5rem; left: .5rem; z-index: 100000; width: auto; height: auto; clip: auto; padding: .7rem 1rem; background: var(--hod-white); color: var(--hod-ink); }

/* Elementor: ingen standardluft i temats sektioner – temat styr luften (ändras per element i Elementor). */
.hod-s, .hod-s .e-con {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px;
	--margin-top: 0px; --margin-bottom: 0px;
}
.hod-s .elementor-widget { margin: 0; --kit-widget-spacing: 0px; }
.hod-s .elementor-widget:not(:last-child) { margin-bottom: 0; margin-block-end: 0; }
.hod-s .elementor-widget-text-editor > :last-child,
.hod-s .elementor-widget-text-editor .elementor-widget-container > :last-child { margin-bottom: 0; }
.hod-s a { color: inherit; transition: color .25s, opacity .25s; }
.hod-s a:hover { color: var(--hod-taupe); }

/* --- Typografi ---------------------------------------------------------- */
.hod-s h1, .hod-s h2, .hod-s h3, .hod-s h4, .hod-s .elementor-heading-title { margin: 0; padding: 0; font-weight: 300; color: inherit; line-height: 1.25; }
.hod-s .hod-h1, .hod-hero h1, .hod-contact h1, .hod-soon h1, .hod-cat h1, .hod-offert h1, .hod-heropanel h1 {
	font-family: var(--hod-font-display);
	font-weight: 300;
	font-size: var(--hod-h1-size);
	letter-spacing: var(--hod-h1-track);
	line-height: 1.25;
	text-transform: uppercase;
}
.hod-s h2, .hod-s .hod-h2 {
	font-family: var(--hod-font-sc);
	font-weight: 400;
	font-size: var(--hod-h2-size);
	letter-spacing: var(--hod-h2-track);
	line-height: 1.3;
	text-transform: uppercase;
}
.hod-s .hod-h3 {
	font-family: var(--hod-font-sc);
	font-weight: 400;
	font-size: var(--hod-h3-size);
	letter-spacing: var(--hod-h3-track);
	line-height: 1.4;
	text-transform: uppercase;
	margin: .6em 0 0;
}
.hod-s h3 {
	font-family: var(--hod-font-sc);
	font-weight: 400;
	font-size: clamp(.9rem, .85rem + .2vw, 1.05rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	margin-bottom: 1.1em;
}
.hod-s .hod-eyebrow {
	font-family: var(--hod-font-ui);
	font-weight: 300;
	font-size: .6875rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	margin: 0 0 .9em;
}
.hod-s .hod-lead {
	font-family: var(--hod-font-ui);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: var(--hod-small-track);
	margin: 1.4em 0 .6em;
}
.hod-section-title, .hod-section-head { text-align: center; width: 100%; }
.hod-section-title, .hod-section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem) !important; }
.hod-section-title .elementor-heading-title, .hod-section-head h2, .hod-section-head p { text-align: center; }
/* Liten text (Inter) */
.hod-quote__body, .hod-split__text p, .hod-cat__text p, .hod-heropanel__text p, .hod-soon__text p, .hod-hero__text, .hod-contact__note {
	font-family: var(--hod-font-ui);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: var(--hod-small-track);
	line-height: 1.7;
}

/* --- Knappar  [ Läs mer ] ---------------------------------------------- */
/* Profilens knapp: text i hakparenteser på genomskinlig botten. Vid hover byter texten färg och
   hakparenteserna glider isär lite. Ljusa sektioner: mörk text. Mörka sektioner/bilder: vit text.
   Elementors Knapp-modul med CSS-klassen hod-btn, och .hod-knapp i temats egna formulär. */
body { --hod-btn-ink: var(--hod-black); --hod-btn-hover: #8b8378; }
.hod-hero, .hod-contact, .hod-soon, .hod-text--pris { --hod-btn-ink: var(--hod-white); --hod-btn-hover: var(--hod-sand); }
.hod-text--pris { --hod-btn-hover: var(--hod-dark); }
.hod-s .hod-btn { width: 100%; text-align: center; }
.hod-s .hod-btn .elementor-button-wrapper { display: flex; justify-content: center; }
body .hod-btn .elementor-button,
body .hod-knapp {
	display: inline-flex;
	align-items: center;
	gap: .9em;
	margin-top: 1.8em;
	padding: .75em .4em .68em;
	font-family: var(--hod-font-body);
	font-weight: 300;
	font-size: .875rem;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: none;
	color: var(--hod-btn-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: color .35s var(--hod-ease), gap .35s var(--hod-ease);
}
body .hod-btn .elementor-button::before, body .hod-btn .elementor-button::after,
body .hod-knapp::before, body .hod-knapp::after {
	content: "[";
	display: inline;
	font-family: var(--hod-font-body);
	font-size: 1.45em;
	line-height: .8;
	font-weight: 300;
	color: inherit;
	transform: translateY(-.04em);
}
body .hod-btn .elementor-button::after, body .hod-knapp::after { content: "]"; }
body .hod-btn .elementor-button:hover, body .hod-btn .elementor-button:focus-visible,
body .hod-knapp:hover, body .hod-knapp:focus-visible { background: transparent; color: var(--hod-btn-hover); gap: 1.3em; }
body .hod-btn .elementor-button:focus-visible, body .hod-knapp:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
body .hod-btn .elementor-button .elementor-button-text { color: inherit; }
.hod-knapp[hidden] { display: none !important; }

/* Bildzoom vid hover */
.hod-img a { display: block; overflow: hidden; }
.hod-img img { display: block; transition: transform 1.2s var(--hod-ease); }
.hod-img a:hover img { transform: scale(1.06); }

/* ==========================================================================
   Sidhuvud (ritas av temat)
   ========================================================================== */
.hodh {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 1000;
	color: var(--hod-ink);
	font-family: var(--hod-font-ui);
}
/* Bakgrunden ligger i ett eget lager: vit, delvis genomskinlig och med mjuk oskärpa. */
.hodh::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgba(255, 255, 255, .6);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	box-shadow: 0 1px 0 rgba(43, 39, 37, .08);
}
.hodh__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--hodh-h); padding: 0 clamp(1rem, 3vw, 3rem); }
.hodh__logo { display: block; flex: 0 0 auto; line-height: 0; }
.hodh__logo img { width: 66px; height: auto; display: block; }
.hodh__logo-ljus { display: none !important; }
.hodh__nav { display: flex; align-items: center; gap: 2rem; }
.hodh__menu { display: flex; align-items: center; gap: 0 1.9rem; list-style: none; margin: 0; padding: 0; }
.hodh__menu li { position: relative; list-style: none; margin: 0; padding: 0; }
.hodh__menu a, .hodh__offert {
	display: block;
	color: var(--hod-white);
	font-family: var(--hod-font-ui);
	font-weight: 300;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	padding: .5em 0;
}
.hodh__menu > li > a, .hodh__offert, .hodh__menu > li > .hodh__toggle { color: var(--hod-ink); font-weight: 400; }
.hodh__menu > li > a { position: relative; }
.hodh__menu > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .2em; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--hod-ease);
}
.hodh__menu > li > a:hover::after,
.hodh__menu > li.current-menu-item > a::after,
.hodh__menu > li.current-menu-ancestor > a::after,
.hodh__menu > li.current-page-ancestor > a::after { transform: scaleX(1); }
.hodh__offert { border: 1px solid rgba(43, 39, 37, .55); padding: .65em 1.1em; transition: background-color .3s, border-color .3s; }
.hodh__offert:hover { background: rgba(43, 39, 37, .06); border-color: var(--hod-ink); color: var(--hod-ink); }

/* Undermeny (Sten): mörk panel med alla val staplade. */
.hodh__menu > li.menu-item-has-children { display: flex; align-items: center; gap: .3rem; }
.hodh__toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer; }
.hodh__toggle span { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
.hodh__menu .sub-menu {
	position: absolute; top: 100%; left: -1.4rem;
	display: flex; flex-direction: column; min-width: 240px; margin: 0; padding: .9rem 0; list-style: none;
	background: rgba(52, 47, 44, .96);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .25s, transform .25s, visibility .25s;
}
.hodh__menu .sub-menu li { display: block; width: 100%; }
.hodh__menu .sub-menu a { padding: .55rem 1.4rem; letter-spacing: .16em; font-size: .7rem; color: var(--hod-white); }
.hodh__menu .sub-menu a:hover, .hodh__menu .sub-menu .current-menu-item > a { background: rgba(255, 255, 255, .08); color: var(--hod-white); }
.hodh__menu li:hover > .sub-menu, .hodh__menu li:focus-within > .sub-menu, .hodh__menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
/* Undermeny i undermenyn (Bearbetning → Kantprofiler/Håltagning): indragen direkt under. */
.hodh__menu .sub-menu .sub-menu { position: static; display: flex; min-width: 0; margin: 0; padding: 0 0 .3rem; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; }
.hodh__menu .sub-menu .sub-menu a { padding-left: 2.6rem; font-size: .66rem; opacity: .85; position: relative; }
.hodh__menu .sub-menu .sub-menu a::before { content: ""; position: absolute; left: 1.5rem; top: 50%; width: .55rem; height: 1px; background: currentColor; opacity: .6; }
.hodh__menu .sub-menu .sub-menu a:hover, .hodh__menu .sub-menu .sub-menu .current-menu-item > a { opacity: 1; }
.hodh__menu .sub-menu .hodh__toggle { display: none !important; }
.hodh__menu .sub-menu > li.menu-item-has-children { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: .35rem; padding-top: .35rem; }
/* "Alla material" överst i Sten-menyn, med en tunn linje under. */
.hodh__menu .sub-menu > li.hod-alla { border-bottom: 1px solid rgba(255, 255, 255, .12); margin-bottom: .35rem; padding-bottom: .35rem; }
.hodh__menu .sub-menu > li.hod-alla > a::after { content: " →"; letter-spacing: 0; }
.hodh__menu .sub-menu > li.hod-alla.current-menu-item > a { background: none; }

/* Hamburgare (mobil) */
.hodh__burger { display: none; position: relative; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--hod-ink); cursor: pointer; }
.hodh__burger span[aria-hidden], .hodh__burger span[aria-hidden]::before, .hodh__burger span[aria-hidden]::after {
	position: absolute; left: 11px; width: 22px; height: 1px; background: currentColor; content: ""; transition: transform .35s var(--hod-ease), top .35s, background-color .2s;
}
.hodh__burger span[aria-hidden] { top: 21px; }
.hodh__burger span[aria-hidden]::before { top: -7px; left: 0; }
.hodh__burger span[aria-hidden]::after { top: 7px; left: 0; }
.hodh-open .hodh__burger span[aria-hidden] { background: transparent; }
.hodh-open .hodh__burger span[aria-hidden]::before { top: 0; transform: rotate(45deg); }
.hodh-open .hodh__burger span[aria-hidden]::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
	.hodh__logo img { width: 56px; }
	.hodh__burger { display: block; }
	.hodh__nav {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hodh-h));
		left: 0; right: 0; bottom: 0;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2rem;
		padding: 1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
		background: var(--hod-dark);
		overflow-y: auto;
		opacity: 0; visibility: hidden;
		transition: opacity .3s var(--hod-ease), visibility .3s;
	}
	.hodh-open .hodh__nav { opacity: 1; visibility: visible; }
	.hodh-open { overflow: hidden; }
	/* Öppen mobilmeny: mörk panel med ljus text och ljus logga. */
	html body.hodh-open .hodh::before { background: var(--hod-dark); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
	body.hodh-open .hodh, body.hodh-open .hodh__burger { color: var(--hod-white); }
	body.hodh-open .hodh__logo-mork { display: none !important; }
	body.hodh-open .hodh__logo-ljus { display: block !important; }
	.hodh__nav .hodh__menu > li > a, .hodh__nav .hodh__offert, .hodh__nav .hodh__menu > li > .hodh__toggle { color: var(--hod-white); }
	.hodh__nav .hodh__offert { border-color: rgba(255, 255, 255, .7); text-align: center; padding: 1rem; font-size: .8rem; }
	.hodh__nav .hodh__offert:hover { color: var(--hod-white); background: rgba(255, 255, 255, .1); border-color: var(--hod-white); }
	.hodh__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.hodh__menu > li { border-bottom: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
	.hodh__menu > li > a { flex: 1; padding: 1.05rem 0; font-family: var(--hod-font-sc); font-size: 1.05rem; letter-spacing: .22em; }
	.hodh__menu > li > a::after { display: none; }
	.hodh__toggle { width: 44px; height: 44px; }
	.hodh__menu li.is-open > .hodh__toggle span { transform: translateY(2px) rotate(-135deg); }
	.hodh__menu .sub-menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 .8rem; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.hodh__menu li.is-open > .sub-menu { display: flex; }
	.hodh__menu .sub-menu a { padding: .7rem 0 .7rem 1rem; font-size: .78rem; }
	.hodh__menu .sub-menu .sub-menu { display: flex !important; padding: 0; }
	.hodh__menu .sub-menu .sub-menu a { padding: .6rem 0 .6rem 2.2rem; font-size: .74rem; }
	.hodh__menu .sub-menu .sub-menu a::before { left: 1rem; }
	.hodh__menu .sub-menu > li.menu-item-has-children { border-top: 0; margin-top: 0; padding-top: 0; }
	.hodh__menu .sub-menu > li.hod-alla { margin-bottom: .2rem; }
}

/* Innehållet börjar under sidhuvudet – utom på sidor där sidhuvudet ligger ovanpå bilden. */
body:not(.hod-overlay):not(.hod-overlap):not(.hod-editor) .elementor[data-elementor-type="wp-page"] { padding-top: var(--hodh-h); }
/* I Elementors editor ligger sidhuvudet i flödet (täcker inte det man redigerar). */
.hod-editor .hodh { position: relative; top: 0; }

/* Kontaktknapp till vänster (alltid synlig) */
.hod-cta {
	position: fixed; left: 0; top: 50%; z-index: 999;
	display: flex; align-items: center; gap: .7rem;
	padding: 1.2rem .7rem;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	background: var(--hod-dark);
	color: var(--hod-white);
	font-family: var(--hod-font-ui); font-weight: 300; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	transition: background-color .3s, padding .3s;
}
.hod-cta:hover { background: var(--hod-taupe); padding-left: .9rem; color: var(--hod-white); }
.hod-cta svg { width: 16px; height: 16px; transform: rotate(90deg); }
@media (max-width: 1024px) {
	.hod-cta {
		left: 20px; top: auto; bottom: calc(20px + env(safe-area-inset-bottom));
		writing-mode: horizontal-tb; transform: none;
		padding: .85rem 1.2rem; border-radius: 999px; font-size: .7rem; letter-spacing: .16em;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	}
	.hod-cta svg { transform: none; }
	.hod-cta:hover { padding-left: 1.2rem; }
}
@media (max-width: 767px) {
	.hod-cta { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: .8rem 1.1rem; font-size: .68rem; }
	.hodh-open .hod-cta { display: none; }
}
body:has(.hodq) .hod-cta, body:has(.hod-contact) .hod-cta { display: none !important; }

/* ==========================================================================
   Startsidans hero med bildspel
   ========================================================================== */
.hod-s.hod-hero {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 100vh; min-height: 100svh;
	padding: 6rem 1rem;
	overflow: hidden; isolation: isolate;
	color: var(--hod-white);
	text-align: center;
}
/* Bildspelet ligger som bakgrund bakom texten (modulen är bara en hållare). */
.hod-bildspel-modul, .hod-bildspel-modul > .elementor-widget-container, .hod-bildspel-modul .elementor-shortcode { position: static !important; }
.hod-bildspel { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--hod-dark); }
.hod-bildspel::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to bottom, rgba(0, 0, 0, .34), rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .3)); }
.hod-bildspel__slide { position: absolute; inset: 0; opacity: 0; }
.hod-bildspel__slide.is-active { opacity: 1; z-index: 1; transition: opacity 0s; }
.hod-bildspel__slide.is-leaving { opacity: 0; z-index: 2; transition: opacity 2.4s ease-in-out; }
.hod-bildspel picture, .hod-bildspel img { display: block; width: 100%; height: 100%; max-width: none; }
.hod-bildspel img { object-fit: cover; object-position: center; transform: scale(1); transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
/* Varje bild zoomar långsamt in under hela tiden den syns, även medan den tonar ut. */
.hod-bildspel__slide.is-active img, .hod-bildspel__slide.is-leaving img { animation: hodKenSmooth 11s cubic-bezier(.33, 0, .25, 1) both; }
@keyframes hodKenSmooth { from { transform: scale(1); } to { transform: scale(1.06); } }
.hod-bildspel__slide:nth-child(2) img { object-position: center 60%; }
.hod-hero__row { position: relative; z-index: 3; width: 100%; max-width: 760px; margin: 0 auto; transform: translateY(calc(var(--hodh-h) * .6 + 1.5vh)); animation: hodFadeUp 1.6s .3s var(--hod-ease) both; }
.hod-hero h1, .hod-hero .elementor-heading-title, .hod-hero p { color: var(--hod-white) !important; text-shadow: 0 1px 18px rgba(0, 0, 0, .18); }
.hod-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); }
.hod-hero .hod-hero__sub { margin: 1.2rem 0 0; font-family: var(--hod-font-sc); font-weight: 400; font-size: clamp(.8rem, .7rem + .35vw, 1.05rem); letter-spacing: .3em; line-height: 1.4; text-transform: uppercase; }
.hod-hero .hod-hero__text { max-width: 31rem; margin: 1.8rem auto 0; opacity: .95; font-size: 15px; }
@keyframes hodFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hod-hero__row { animation-name: hodFadeUpHero; }
@keyframes hodFadeUpHero { from { opacity: 0; transform: translateY(calc(var(--hodh-h) * .6 + 1.5vh + 18px)); } to { opacity: 1; transform: translateY(calc(var(--hodh-h) * .6 + 1.5vh)); } }

/* ==========================================================================
   Innehållssektioner: luft
   ========================================================================== */
.hod-s.hod-quote, .hod-s.hod-tiles, .hod-s.hod-materials, .hod-s.hod-text, .hod-s.hod-stones {
	--padding-top: var(--hod-space); --padding-bottom: var(--hod-space); --padding-left: var(--hod-gutter); --padding-right: var(--hod-gutter);
	--padding-block-start: var(--hod-space); --padding-block-end: var(--hod-space); --padding-inline-start: var(--hod-gutter); --padding-inline-end: var(--hod-gutter);
}

/* --- Kundcitat --------------------------------------------------------- */
.hod-quote__row { display: flex !important; flex-direction: row !important; align-items: center; width: 100%; max-width: 1080px; margin: 0 auto; }
.hod-quote__row > .hod-quote__mark { width: 29% !important; flex: 0 0 29%; }
.hod-quote__row > .hod-quote__body { width: 71% !important; flex: 0 0 71%; }
.hod-quote .hod-quote__mark p {
	margin: 0; font-family: var(--hod-font-display); font-size: clamp(5rem, 9vw, 8rem); line-height: .6;
	color: var(--hod-black); text-align: center; transform: translateY(.18em);
}
.hod-quote .hod-quote__body { padding: .6rem 0 .6rem clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--hod-dark); line-height: 1.85; max-width: 40rem; }
.hod-quote__body p { font-family: var(--hod-font-ui); font-size: 15px; line-height: 1.85; letter-spacing: var(--hod-small-track); }
.hod-quote__body strong { font-weight: 400; display: inline-block; margin-bottom: .2em; }

/* --- Rutnät "Våra tjänster" -------------------------------------------- */
.hod-tiles > .hod-section-title, .hod-tile { width: 100%; max-width: 880px; margin-left: auto !important; margin-right: auto !important; }
.hod-tile { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1vw, .75rem); margin-bottom: clamp(.5rem, 1vw, .75rem) !important; }
.hod-tile > .e-con { width: auto !important; max-width: none; }
.hod-tile__media { aspect-ratio: 1; overflow: hidden; }
.hod-tile__img, .hod-tile__img .elementor-widget-container, .hod-tile__img a { display: block; width: 100%; height: 100%; }
.hod-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.hod-s .hod-tile__card {
	aspect-ratio: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	--padding-top: clamp(1.25rem, 3.5vw, 3rem); --padding-bottom: clamp(1.25rem, 3.5vw, 3rem); --padding-left: clamp(1.25rem, 3.5vw, 3rem); --padding-right: clamp(1.25rem, 3.5vw, 3rem);
	--padding-block-start: clamp(1.25rem, 3.5vw, 3rem); --padding-block-end: clamp(1.25rem, 3.5vw, 3rem); --padding-inline-start: clamp(1.25rem, 3.5vw, 3rem); --padding-inline-end: clamp(1.25rem, 3.5vw, 3rem);
	text-align: center; overflow: hidden;
}
.hod-tile__card > .elementor-widget { width: 100%; }
.hod-tile__card .elementor-heading-title { margin-bottom: 1.1em; }
.hod-tile__text p { font-family: var(--hod-font-body); font-size: .8125rem; line-height: 1.75; letter-spacing: .06em; }
.hod-tile__card .hod-btn .elementor-button { margin-top: 1.4rem; }

/* --- Utforska våra material (Bildrutor med CSS-klassen hod-card) -------- */
.hod-cards {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center;
	gap: clamp(.75rem, 1.6vw, 1.5rem) !important;
	width: 100%; max-width: 1040px; margin: 0 auto;
}
/* Alltid tre rutor i bredd. En ensam ruta på sista raden hamnar i mitten. */
.hod-cards > .hod-card { flex: 0 1 calc((100% - 2 * clamp(.75rem, 1.6vw, 1.5rem)) / 3) !important; width: auto !important; max-width: none; margin: 0 !important; }
.hod-cards > .is-ensam { display: none !important; }
.hod-card .elementor-image-box-wrapper {
	height: 100%;
	text-align: left !important;
	padding: clamp(.9rem, 1.8vw, 1.6rem) clamp(.9rem, 1.8vw, 1.6rem) clamp(1.3rem, 2.4vw, 2rem);
	transition: background-color .45s var(--hod-ease), box-shadow .45s var(--hod-ease);
}
.hod-card:hover .elementor-image-box-wrapper { background: var(--hod-white); box-shadow: 0 0 0 1px var(--hod-white); }
.hod-card .elementor-image-box-img { display: block !important; width: 100% !important; max-width: none; margin: 0 !important; }
.hod-card .elementor-image-box-img a { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--hod-stone); }
.hod-card .elementor-image-box-img img { display: block; width: 100% !important; height: 100% !important; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--hod-ease); }
.hod-card:hover .elementor-image-box-img img { transform: scale(1.06); }
.hod-card .elementor-image-box-content { text-align: left; }
.hod-s .hod-card .elementor-image-box-title {
	margin: 1.3rem 0 0 !important; padding: 0;
	font-family: var(--hod-font-ui); font-weight: 700; font-size: .75rem; letter-spacing: .26em; line-height: 1.4;
	text-transform: uppercase; color: var(--hod-dark);
}
.hod-card .elementor-image-box-title a { color: inherit; }
.hod-card .elementor-image-box-description { position: relative; margin: 0; padding-top: 2rem; font-family: var(--hod-font-body); font-size: .75rem; line-height: 1.75; letter-spacing: .05em; color: var(--hod-dark); text-align: left; hyphens: auto; }
.hod-card .elementor-image-box-description::before { content: ""; position: absolute; left: 0; right: 0; top: .95rem; height: 1px; background: var(--hod-dark); }
.hod-card .elementor-image-box-description::after { content: ""; position: absolute; left: 50%; top: .95rem; width: 7px; height: 7px; margin-top: .5px; background: var(--hod-dark); transform: translate(-50%, -50%) rotate(45deg); }
/* Offertrutan (läggs in av hod.js) */
.hod-card--offert .elementor-image-box-img a { position: relative; }
.hod-card--offert .elementor-image-box-img a::after {
	content: "[ Begär offert ]"; position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(46, 41, 38, .38); color: #fff; font-family: var(--hod-font-body); font-weight: 300; font-size: .9rem; letter-spacing: .08em;
	transition: background-color .45s var(--hod-ease);
}
.hod-card--offert:hover .elementor-image-box-img a::after { background: rgba(46, 41, 38, .22); }

/* --- Bild + text, kategorisida ------------------------------------------ */
.hod-s.hod-split, .hod-s.hod-cat { display: flex !important; flex-direction: row !important; align-items: stretch; }
.hod-split > .e-con, .hod-cat > .e-con { width: 50% !important; flex: 0 0 50%; max-width: none; }
.hod-split__media { position: relative; min-height: clamp(300px, 45vw, 680px); overflow: hidden; }
.hod-cat .hod-split__media { min-height: clamp(320px, 52vw, 760px); }
.hod-split__img { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.hod-split__img .elementor-widget-container, .hod-split__img a { display: block; width: 100%; height: 100%; }
.hod-split__img img { width: 100%; height: 100%; object-fit: cover; }
.hod-s .hod-split__body, .hod-s .hod-cat__body {
	display: flex; flex-direction: column; justify-content: center;
	--padding-top: clamp(2.5rem, 6vw, 6rem); --padding-bottom: clamp(2.5rem, 6vw, 6rem); --padding-left: clamp(2rem, 8vw, 9rem); --padding-right: clamp(2rem, 8vw, 9rem);
	--padding-block-start: clamp(2.5rem, 6vw, 6rem); --padding-block-end: clamp(2.5rem, 6vw, 6rem); --padding-inline-start: clamp(2rem, 8vw, 9rem); --padding-inline-end: clamp(2rem, 8vw, 9rem);
}
.hod-s .hod-cat__body {
	--padding-top: clamp(2.5rem, 5vw, 5rem); --padding-bottom: clamp(2.5rem, 5vw, 5rem); --padding-left: clamp(1.5rem, 4vw, 4rem); --padding-right: clamp(2rem, 8vw, 9rem);
	--padding-block-start: clamp(2.5rem, 5vw, 5rem); --padding-block-end: clamp(2.5rem, 5vw, 5rem); --padding-inline-start: clamp(1.5rem, 4vw, 4rem); --padding-inline-end: clamp(2rem, 8vw, 9rem);
}
.hod-split--left .hod-split__text, .hod-cat__text { text-align: right; }
.hod-split--right .hod-split__text { text-align: left; }
.hod-split .hod-h1, .hod-cat h1 { color: var(--hod-black); }
.hod-cat h1 { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.1rem); }
.hod-split__text p:not([class]) { max-width: 32rem; }
.hod-cat__text p:not([class]) { max-width: 30rem; }
.hod-split--left .hod-split__text p, .hod-cat__text p { margin-left: auto; }
/* Knappen centreras under textblocket (som ligger mot ena kanten). */
.hod-split--left .hod-split__body .hod-btn { max-width: 32rem; margin-left: auto !important; }
.hod-split--right .hod-split__body .hod-btn { max-width: 32rem; margin-right: auto !important; }
.hod-cat .hod-cat__text .hod-h3 { white-space: nowrap; }

/* Sidor som börjar med bild + text: sidhuvudet ligger en bit in över bilden. */
body.hod-overlap .hod-cat .hod-cat__body, body.hod-overlap .elementor > .hod-split:first-child .hod-split__body {
	--padding-top: calc(var(--hodh-h) + clamp(1.5rem, 4vw, 4rem)); --padding-block-start: calc(var(--hodh-h) + clamp(1.5rem, 4vw, 4rem));
}
body.hod-overlap .elementor > .hod-split:first-child .hod-split__text .hod-h3 { margin-bottom: 1.3rem; white-space: nowrap; }
@media (min-width: 981px) {
	/* Kategorisidor: bild/text + länkraden fyller tillsammans hela skärmen. Länkradens höjd mäts av hod.js. */
	body.hod-overlap .hod-s.hod-cat { min-height: calc(100vh - var(--hod-catbar-h, 104px) - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100svh - var(--hod-catbar-h, 104px) - var(--wp-admin--admin-bar--height, 0px)); }
	body.hod-overlap .hod-cat .hod-split__media { min-height: 0; }
	/* Bearbetning, Kantprofiler och Håltagning: samma höjd som kategorisidorna. */
	body.hod-overlap .elementor > .hod-split:first-child { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
	body.hod-overlap .elementor > .hod-split:first-child .hod-split__media { min-height: 0; }
}

/* Länkraden under kategorisidans bild: Färgval | Bearbetning | Pris */
.hod-s.hod-cat-bar {
	--padding-top: 1.6rem; --padding-bottom: 1.6rem; --padding-left: 4rem; --padding-right: 4rem;
	--padding-block-start: 1.6rem; --padding-block-end: 1.6rem; --padding-inline-start: 4rem; --padding-inline-end: 4rem;
}
@media (max-width: 980px) { .hod-s.hod-cat-bar { --padding-left: 2rem; --padding-right: 2rem; --padding-inline-start: 2rem; --padding-inline-end: 2rem; } }
.hod-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem 0; color: var(--hod-dark); }
.hod-bar__group { padding: 0 clamp(1rem, 2.5vw, 2.25rem); border-left: 1px solid rgba(70, 64, 61, .45); }
.hod-bar__group--farg { margin-right: auto; padding-left: 0; border-left: 0; }
.hod-bar__end { display: flex; flex-wrap: wrap; }
.hod-bar__end .hod-bar__group:first-child { border-left: 1px solid rgba(70, 64, 61, .45); padding-left: clamp(1rem, 2.5vw, 2.25rem); }
.hod-s .hod-bar__label { font-family: var(--hod-font-sc); font-size: 1rem; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 .35rem; padding: 0; }
.hod-bar__label a { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 0 !important; border: 0 !important; }
.hod-bar__label a:hover { color: var(--hod-black); }
.hod-bar__links { display: flex !important; flex-wrap: wrap; gap: .25rem 1.25rem; padding: 0; margin: 0; }
.hod-bar a { font-family: var(--hod-font-ui); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; padding: .2em 0; border-bottom: 1px solid transparent; }
.hod-bar a:hover { color: var(--hod-black); border-bottom-color: currentColor; }
.hod-farger { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.hod-farger button, .hod-stenar__filter button {
	background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: .2em 0; margin: 0; cursor: pointer; color: var(--hod-dark);
	font-family: var(--hod-font-ui); font-weight: 300; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5;
}
.hod-farger button:hover, .hod-farger button.is-active, .hod-stenar__filter button:hover, .hod-stenar__filter button.is-active { color: var(--hod-black); border-bottom-color: currentColor; background: none; }
.hod-bar__tabs, .hod-cat__over, .hod-bar__mob { display: none !important; }

/* --- Stenkatalog [hod_stenar] ------------------------------------------ */
.hod-stones > .hod-section-head, .hod-stones > .elementor-widget-shortcode { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; }
.hod-stenar__filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .4rem 1.25rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.hod-stenar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); list-style: none; margin: 0; padding: 0; }
.hod-sten { padding: .75rem .75rem 1.1rem; transition: background-color .45s var(--hod-ease); list-style: none; }
.hod-sten[hidden] { display: none; }
.hod-sten:hover { background: var(--hod-paper); }
.hod-sten__link { display: block; color: inherit !important; text-decoration: none !important; }
.hod-sten__link:focus-visible { outline: 1px solid var(--hod-dark); outline-offset: 4px; }
.hod-sten__media { position: relative; aspect-ratio: 1; box-shadow: inset 0 0 0 1px rgba(70, 64, 61, .08); overflow: hidden; }
.hod-sten__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hod-s .hod-sten__name { margin: 1rem 0 0; padding: 0; font-family: var(--hod-font-ui); font-weight: 300; font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; line-height: 1.5; min-height: 3em; }
.hod-divider { position: relative; display: block; height: 1px; margin: .6rem 0 .7rem; background: var(--hod-dark); }
.hod-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--hod-dark); transform: translate(-50%, -50%) rotate(45deg); }
.hod-s .hod-sten__farg { margin: 0; font-family: var(--hod-font-body); font-size: .75rem; letter-spacing: .06em; }
.hod-stenar__more { display: flex; justify-content: center; }
.hod-stenar__morebtn { margin-top: 2rem; }
.hod-s .hod-stenar__count { text-align: center; font-family: var(--hod-font-ui); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; margin: 1.5rem 0 0; }
.hod-stenar__count[hidden] { display: none; }
.hod-s .hod-empty { text-align: center; max-width: 34rem; margin: 0 auto; font-family: var(--hod-font-ui); font-size: var(--hod-small-size); }
.hod-empty a { text-decoration: underline; text-underline-offset: 3px; }
/* Märkning av serie på stenkortet (t.ex. Eclós) */
.hod-sten__serie { position: absolute; top: .625rem; left: .625rem; z-index: 2; padding: .3rem .55rem .25rem; background: rgba(255, 255, 255, .9); color: #46403d; font-family: var(--hod-font-ui); font-weight: 400; font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; line-height: 1; pointer-events: none; }
/* Stenar utan egen bild ännu: färgruta med "Bild kommer" (vid hover "Begär offert"). */
.hod-sten__media--snart { display: flex; align-items: center; justify-content: center; transition: filter .45s var(--hod-ease); }
.hod-sten__snart { display: grid; color: rgba(255, 255, 255, .85); font-family: var(--hod-font-ui); font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.hod-sten__media--snart.is-ljus .hod-sten__snart { color: rgba(70, 64, 61, .6); }
.hod-sten__snart > span { grid-area: 1 / 1; text-align: center; transition: opacity .35s var(--hod-ease), transform .35s var(--hod-ease); }
.hod-sten__snart-b { opacity: 0; transform: translateY(4px); }
.hod-sten__link:hover .hod-sten__snart-a, .hod-sten__link:focus-visible .hod-sten__snart-a { opacity: 0; transform: translateY(-4px); }
.hod-sten__link:hover .hod-sten__snart-b, .hod-sten__link:focus-visible .hod-sten__snart-b { opacity: 1; transform: none; }
.hod-sten__link:hover .hod-sten__media--snart { filter: brightness(.94); }
.hod-sten__link:hover .hod-sten__snart { color: var(--hod-white); }
.hod-sten__link:hover .hod-sten__media--snart.is-ljus .hod-sten__snart { color: var(--hod-dark); }
/* Sökfält */
.hod-stenar__sok { position: relative; max-width: 30rem; margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--hod-dark); }
.hod-stenar__lupp { position: absolute; left: .2rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); opacity: .7; pointer-events: none; }
.hod-s .hod-stenar__input, .hod-stenar__input {
	-webkit-appearance: none; appearance: none; width: 100%;
	padding: .95rem 2.6rem .95rem 2.2rem; margin: 0;
	background: transparent; border: 0; border-bottom: 1px solid rgba(70, 64, 61, .45); border-radius: 0; box-shadow: none;
	font-family: var(--hod-font-ui); font-size: 16px; font-weight: 300; letter-spacing: .08em; color: var(--hod-black);
	transition: border-color .3s var(--hod-ease);
}
.hod-stenar__input::placeholder { color: rgba(70, 64, 61, .55); letter-spacing: .08em; }
.hod-stenar__input:focus { outline: none; border-bottom-color: var(--hod-black); }
.hod-stenar__input::-webkit-search-cancel-button, .hod-stenar__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.hod-stenar__rensa { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; color: var(--hod-dark); font-size: 1.3rem; line-height: 1; opacity: .7; }
.hod-stenar__rensa:hover { opacity: 1; background: none; color: var(--hod-dark); }
.hod-stenar__rensa[hidden] { display: none; }
.hod-stenar__tomt { text-align: center; max-width: 30rem; margin: 1rem auto 0; padding: 2.5rem 1rem; color: var(--hod-dark); }
.hod-stenar__tomt[hidden] { display: none; }
.hod-s .hod-stenar__tomt p { font-family: var(--hod-font-body); font-size: .85rem; line-height: 1.7; margin: 0 0 .6rem; }
.hod-s .hod-stenar__tomt .hod-stenar__tomtrubrik { font-family: var(--hod-font-sc); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.hod-stenar__andralista { list-style: none; margin: .4rem 0 0; padding: 0; }
.hod-stenar__andralista li { padding: .55rem 0; border-top: 1px solid rgba(70, 64, 61, .15); font-family: var(--hod-font-body); font-size: .8rem; }
.hod-stenar__andralista a { font-family: var(--hod-font-ui); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-right: .5rem; }
.hod-stenar__andralista span { color: rgba(70, 64, 61, .75); }
.hod-stenar { scroll-margin-top: calc(var(--hodh-h) + 16px); }

/* ==========================================================================
   Sten-sidan: bildspel i full höjd med rubriken, därunder Kök, Bad och Offentlig miljö
   ========================================================================== */
.hod-s.hod-heropanel {
	--hp-h: 100vh;
	position: relative; isolation: isolate; display: block !important;
	color: var(--hod-dark);
}
@supports (height: 100svh) { .hod-s.hod-heropanel { --hp-h: 100svh; } }
/* Reservbild (första bilden) under bildspelet – syns direkt och om JavaScript saknas. */
.hod-s.hod-heropanel::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hp-h); z-index: -2;
	background: linear-gradient(to bottom, rgba(20, 17, 15, .45), rgba(20, 17, 15, .22) 45%, rgba(20, 17, 15, .38)), var(--hod-sten-bild, url("../img/hero-sten.webp")) center 55% / cover no-repeat;
}
.hod-heropanel .hod-bildspel { inset: 0 0 auto 0; height: var(--hp-h); z-index: -1; background: none; }
.hod-heropanel__top {
	height: var(--hp-h); margin: 0 auto; padding: 4rem 1.5rem 0;
	display: flex !important; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.hod-heropanel .hod-heropanel__top h1, .hod-heropanel .hod-heropanel__top .elementor-heading-title, .hod-heropanel .hod-heropanel__top .hod-h3 { color: var(--hod-white) !important; text-shadow: 0 2px 22px rgba(0, 0, 0, .3); }
.hod-heropanel .hod-heropanel__top h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); letter-spacing: .2em; }
.hod-heropanel .hod-heropanel__top .hod-h3 { margin-top: 1rem; font-size: clamp(.72rem, .65rem + .35vw, 1rem); letter-spacing: .3em; }
.hod-heropanel__cols {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5.5rem); row-gap: 0;
	width: 100%; max-width: 1240px; margin: 0 auto;
	padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3.5rem) clamp(5rem, 9vw, 8rem);
}
.hod-heropanel__cols > .hod-heropanel__col { width: auto !important; max-width: none; display: flex !important; flex-direction: column; align-items: center; text-align: center; }
.hod-heropanel__col > .hod-heropanel__text { flex: 1 1 auto; }
.hod-heropanel .hod-heropanel__text, .hod-heropanel .hod-heropanel__text * { color: var(--hod-dark); text-shadow: none; }
.hod-heropanel .hod-heropanel__text h2 { position: relative; color: var(--hod-black); font-size: clamp(1rem, .9rem + .35vw, 1.25rem); letter-spacing: .3em; margin: 0 0 2.4rem; }
.hod-heropanel .hod-heropanel__text h2::after { content: ""; position: absolute; left: 50%; bottom: -1.3rem; width: 4.5rem; height: 1px; background: var(--hod-dark); transform: translateX(-50%); }
.hod-heropanel .hod-heropanel__text h2::before { content: ""; position: absolute; left: 50%; bottom: calc(-1.3rem - 3px); width: 7px; height: 7px; background: var(--hod-dark); transform: translateX(-50%) rotate(45deg); }
.hod-heropanel .hod-heropanel__text .hod-lead { font-family: var(--hod-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem); line-height: 1.45; letter-spacing: .01em; margin: 0 auto 1.2rem; max-width: 22rem; }
.hod-heropanel .hod-heropanel__text p:not(.hod-lead) { font-family: var(--hod-font-ui); font-weight: 300; font-size: 15.5px; line-height: 1.85; letter-spacing: .03em; text-align: center; max-width: 24rem; margin: 0 auto .9rem; }
.hod-heropanel .hod-heropanel__text p:not(.hod-lead) + p { margin-top: .2rem; }
.hod-heropanel__col > .hod-btn { margin-top: auto; }
/* Knapparna har ram – inga hakparenteser. */
body .hod-heropanel .hod-btn .elementor-button {
	margin-top: 1.6rem; padding: .95em 1.8em .88em;
	background: transparent; color: var(--hod-dark);
	box-shadow: inset 0 0 0 1px rgba(70, 64, 61, .55); letter-spacing: .08em; font-size: .84rem;
	transition: background-color .35s var(--hod-ease), color .35s var(--hod-ease), box-shadow .35s;
}
body .hod-heropanel .hod-btn .elementor-button::before, body .hod-heropanel .hod-btn .elementor-button::after { content: none; display: none; }
body .hod-heropanel .hod-btn .elementor-button:hover, body .hod-heropanel .hod-btn .elementor-button:focus-visible { background: var(--hod-dark); color: var(--hod-white); box-shadow: inset 0 0 0 1px var(--hod-dark); gap: .9em; }

/* --- Textsektion ------------------------------------------------------- */
.hod-text > .elementor-widget { width: 100%; max-width: 760px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.hod-text h2 { margin-bottom: 1.4rem; }
.hod-text__body p:not(.hod-eyebrow) { font-size: 1rem; line-height: 1.6; }
.hod-s.hod-text--pris { --padding-top: clamp(5rem, 10vw, 9rem); --padding-bottom: clamp(5rem, 10vw, 9rem); --padding-block-start: clamp(5rem, 10vw, 9rem); --padding-block-end: clamp(5rem, 10vw, 9rem); }
.hod-text--pris, .hod-text--pris h2, .hod-text--pris p, .hod-text--pris .hod-eyebrow { color: var(--hod-white) !important; }
.hod-text--pris h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
.hod-text--pris .hod-text__body p:not(.hod-eyebrow) { font-size: 1.05rem; }
.hod-text--info .hod-text__body p:not(.hod-eyebrow) { font-family: var(--hod-font-ui); font-size: 16.4px; line-height: 1.85; max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Kontakt: bakgrundsbild med mörkt lager, rubrik och formulär
   ========================================================================== */
.hod-s.hod-contact {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 100vh;
	padding: 9rem 3.5rem;
	color: var(--hod-white);
	background-color: #46403d;
	background-image: url("../img/kontakt-kok.webp");
	background-size: cover; background-repeat: no-repeat; background-position: center center;
}
.hod-s.hod-contact::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 15, 13, .74), rgba(18, 15, 13, .58) 35%, rgba(18, 15, 13, .64)); }
.hod-contact__row { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; }
.hod-contact h1, .hod-contact .elementor-heading-title { color: var(--hod-white) !important; margin-bottom: 2rem; }
.hod-contact__note { margin-top: 1rem !important; opacity: .9; }
.hod-contact__note p { color: var(--hod-white); }
/* Formuläret [hod_kontakt]: fälten i en trave till vänster, textrutan lika hög till höger. */
.hod-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: repeat(5, auto); gap: .75rem 1rem; margin: 0; }
.hod-kontakt p { margin: 0; }
.hod-kontakt__fel { grid-column: 1 / -1; padding: .8rem 1rem; background: rgba(255, 236, 230, .9); color: #6b2b20; font-family: var(--hod-font-ui); font-size: .875rem; }
.hod-kontakt__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hod-kontakt__falt { grid-column: 1; }
.hod-kontakt__falt--meddelande { grid-column: 2; grid-row: 1 / span 5; display: flex; }
.hod-kontakt__fel ~ .hod-kontakt__falt--meddelande { grid-row: 2 / span 5; }
.hod-kontakt__skicka { grid-column: 2; display: flex; justify-content: flex-end; align-items: center; }
.hod-kontakt input, .hod-kontakt textarea {
	width: 100%; margin: 0;
	border: 1px solid transparent; border-radius: 0;
	background: rgba(255, 255, 255, .8);
	color: var(--hod-black);
	font-family: var(--hod-font-ui); font-size: .9375rem; font-weight: 300; letter-spacing: .02em;
	padding: .55rem .7rem;
	transition: background-color .25s, border-color .25s;
}
.hod-kontakt input:focus, .hod-kontakt textarea:focus { outline: none; background: rgba(255, 255, 255, .95); border-color: var(--hod-white); }
.hod-kontakt input::placeholder { color: var(--hod-dark); text-transform: uppercase; font-size: .6875rem; letter-spacing: .14em; opacity: 1; }
.hod-kontakt textarea { flex: 1; min-height: 19.5rem; resize: vertical; text-align: center; padding: 3.2rem 2rem 1rem; }
.hod-kontakt textarea:not(:placeholder-shown) { text-align: left; padding-top: 1rem; }
.hod-kontakt textarea::placeholder { color: var(--hod-dark); text-transform: uppercase; font-size: .75rem; letter-spacing: .14em; opacity: .8; }
.hod-kontakt .hod-knapp { margin: 0; --hod-btn-ink: var(--hod-white); --hod-btn-hover: var(--hod-sand); color: var(--hod-white); }
.hod-kontakt__tack { padding: 2.5rem 0; color: var(--hod-white); font-family: var(--hod-font-ui); font-size: 1rem; }
.hod-kontakt__tackrubrik { font-family: var(--hod-font-display); font-size: 2rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .6rem; }
@media (max-width: 980px) {
	.hod-kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.hod-kontakt__falt { grid-column: auto; }
	.hod-kontakt__falt--foretag, .hod-kontakt__falt--meddelande, .hod-kontakt__skicka { grid-column: 1 / -1; grid-row: auto !important; }
	.hod-kontakt textarea { min-height: 12rem; padding-top: 2.4rem; }
}
@media (max-width: 767px) {
	.hod-s.hod-contact { padding: 7rem 1rem; }
	.hod-kontakt { grid-template-columns: 1fr; }
	.hod-contact h1 { font-size: 1.7rem; margin-bottom: 1.4rem; }
}

/* ==========================================================================
   Under uppbyggnad ("Snart!")
   ========================================================================== */
.hod-s.hod-soon {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 100vh;
	padding: 8rem 3.5rem;
	text-align: center; color: var(--hod-white);
	/* Bakgrundsbilden ligger i temat (relativ adress), så att den syns även när sajten visas på en annan adress,
	   t.ex. Locals Live Link i mobilen. En bakgrund som väljs i Elementor går före. */
	background-color: #3a332e;
	background-image: url("../img/under-uppbyggnad.webp");
	background-size: cover; background-repeat: no-repeat;
	background-position: center 45%;
}
.hod-s.hod-soon::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(22, 18, 16, .62), rgba(22, 18, 16, .42) 70%),
		linear-gradient(to bottom, rgba(22, 18, 16, .45), rgba(22, 18, 16, .2) 40%, rgba(22, 18, 16, .45));
}
.hod-soon__row { position: relative; z-index: 1; width: 100%; max-width: 620px; margin: 0 auto; animation: hodFadeUp 1.2s .1s var(--hod-ease) both; }
.hod-soon .hod-soon__text, .hod-soon .hod-soon__text * { color: var(--hod-white) !important; }
.hod-soon h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hod-soon .hod-h2 { margin: 1rem 0 2.2rem; font-size: clamp(.85rem, .75rem + .4vw, 1.1rem); letter-spacing: .26em; }
.hod-soon__text p:not(.hod-h2) { font-size: 16.4px; line-height: 1.8; font-weight: 400; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); margin-bottom: .4rem; }
.hod-soon__contact a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Begär offert: stenväggen fyller hela sidan, formuläret i en ljus panel i mitten
   ========================================================================== */
.hod-s.hod-offert {
	padding: calc(var(--hodh-h) + clamp(5.5rem, 13vh, 9.5rem)) clamp(1rem, 4vw, 2rem) clamp(4rem, 10vh, 7rem);
	min-height: 100vh;
	background:
		linear-gradient(to bottom, rgba(26, 20, 16, .5), rgba(26, 20, 16, .28) 30%, rgba(26, 20, 16, .38)),
		var(--hod-offert-bild, url("../img/offert-banner.webp")) center / cover no-repeat !important;
}
.hod-offert__inner { width: 100%; max-width: 860px; margin: 0 auto; }
.hod-offert .hod-offert__intro { text-align: center; margin: 0 auto clamp(5rem, 12vh, 8rem) !important; }
.hod-offert .hod-offert__intro h1 { color: var(--hod-white); text-shadow: 0 2px 22px rgba(0, 0, 0, .3); font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); letter-spacing: .2em; margin: 0 0 1rem; }
.hod-offert .hod-offert__intro p { color: var(--hod-white); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); font-family: var(--hod-font-ui); font-size: 17.2px; line-height: 1.75; max-width: 34rem; margin: 0 auto; opacity: .95; }
.hod-offert .hodq { background: var(--hod-paper); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3rem); box-shadow: 0 30px 80px rgba(15, 10, 6, .35), 0 2px 10px rgba(15, 10, 6, .15); scroll-margin-top: calc(var(--hodh-h) + 16px); }
.hod-offert .hodq-card { background: #fff; }
@media (max-width: 767px) {
	.hod-s.hod-offert { padding: calc(var(--hodh-h) + 3.75rem) .75rem 3rem; }
	.hod-offert .hod-offert__intro { margin-bottom: 3.5rem !important; }
	.hod-offert .hod-offert__intro h1 { font-size: 1.75rem; letter-spacing: .16em; }
	.hod-offert .hod-offert__intro p { font-size: 15.1px; max-width: 20rem; }
	.hod-offert .hodq { padding: 1.1rem .8rem 1.4rem; }
}

/* ==========================================================================
   Bearbetningssidorna: underkategorier (Bearbetning) och kantprofiler (Kantprofiler)
   ========================================================================== */
.hod-s.hod-subsec {
	--padding-top: clamp(4rem, 8vw, 7rem); --padding-bottom: clamp(4rem, 8vw, 7rem); --padding-left: clamp(1.25rem, 4vw, 3rem); --padding-right: clamp(1.25rem, 4vw, 3rem);
	--padding-block-start: clamp(4rem, 8vw, 7rem); --padding-block-end: clamp(4rem, 8vw, 7rem); --padding-inline-start: clamp(1.25rem, 4vw, 3rem); --padding-inline-end: clamp(1.25rem, 4vw, 3rem);
}
.hod-subsec__inner { max-width: 1120px; margin: 0 auto; }
.hod-subsec__head { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.hod-s .hod-subsec__lead { font-family: var(--hod-font-ui); font-weight: 300; font-size: 15px; line-height: 1.75; max-width: 34rem; margin: 1.2rem auto 0; color: var(--hod-dark); }
.hod-s .hod-subsec__note { text-align: center; font-family: var(--hod-font-ui); font-size: .8rem; letter-spacing: .04em; color: rgba(70, 64, 61, .8); margin-top: clamp(2rem, 4vw, 3rem); }
.hod-profiler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0; }
.hod-profil { list-style: none; }
.hod-profil__bild { aspect-ratio: 4 / 3; background: var(--hod-sand); color: var(--hod-sand); display: flex; align-items: center; justify-content: center; padding: 8% 6%; }
.hod-profil__svg { width: 100%; height: auto; display: block; }
.hod-s .hod-profil__namn, .hod-s .hod-subkort__namn { margin: 1rem 0 0; font-family: var(--hod-font-ui); font-weight: 400; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--hod-dark); }
.hod-s .hod-profil__text, .hod-s .hod-subkort__text { font-family: var(--hod-font-ui); font-weight: 300; font-size: 14px; line-height: 1.7; margin: 0; color: var(--hod-dark); }
.hod-profil .hod-divider, .hod-subkort .hod-divider { margin: .7rem 0 .8rem; }
.hod-subkort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); max-width: 900px; margin: 0 auto; }
.hod-subkort__item { display: block; color: inherit !important; text-decoration: none !important; }
.hod-subkort__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hod-paper); }
.hod-subkort__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--hod-ease); }
.hod-subkort__item:hover .hod-subkort__media img { transform: scale(1.05); }
.hod-subkort__kollage { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 4% 6%; padding: 10% 8%; color: var(--hod-paper); }
.hod-subkort__kollage svg { width: 100%; height: auto; }
.hod-subkort__mer { display: inline-block; margin-top: .9rem; font-family: var(--hod-font-ui); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .15rem; color: var(--hod-dark); }

/* Instagram (tillägget HoD Instagram har egna stilar) */
.hod-insta-wrap .elementor-widget-shortcode { width: 100%; }

/* Öppettider på en vanlig sida [hod_oppettider] */
.hod-hours, .hod-hours tr, .hod-hours th, .hod-hours td { border: 0; background: none; width: auto; }
.hod-hours th, .hod-hours td { padding: 0 1.6rem .25rem 0; text-align: left; font-weight: 300; vertical-align: top; }

/* ==========================================================================
   Sidfot (ritas av temat)
   ========================================================================== */
.hodf { display: block; width: 100%; background: var(--hod-taupe); color: var(--hod-white); font-family: var(--hod-font-ui); font-size: .78rem; letter-spacing: .05em; line-height: 1.85; }
.hodf a { color: var(--hod-white); text-decoration: none; transition: opacity .25s; }
.hodf a:hover { opacity: .7; color: var(--hod-white); }
.hodf p { margin: 0; padding: 0; }
.hodf__inner { width: 100%; margin: 0; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 3.5vw, 4rem) 0; }
.hodf__offert {
	display: inline-block;
	margin-bottom: clamp(3rem, 6vw, 5rem);
	padding: clamp(1.1rem, 2vw, 1.7rem) clamp(2.2rem, 4.5vw, 4.2rem);
	border-radius: 999px;
	background: linear-gradient(180deg, #ffffff 0%, #f1f1f0 55%, #dcdbd9 100%);
	box-shadow: 0 6px 0 rgba(70, 64, 61, .18), 0 14px 30px rgba(0, 0, 0, .14);
	font-family: var(--hod-font-display); font-weight: 400; font-size: clamp(1.1rem, .8rem + 1.2vw, 1.9rem); letter-spacing: .32em; text-transform: uppercase;
	transition: transform .3s var(--hod-ease), box-shadow .3s var(--hod-ease);
}
.hodf a.hodf__offert, .hodf a.hodf__offert:hover { color: var(--hod-ink); opacity: 1; }
.hodf__offert:hover { transform: translateY(2px); box-shadow: 0 4px 0 rgba(70, 64, 61, .18), 0 10px 22px rgba(0, 0, 0, .14); }
.hodf__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.hodf__contact { padding-right: clamp(1.5rem, 4vw, 4.5rem); border-right: 1px solid rgba(255, 255, 255, .7); padding-bottom: .5rem; }
.hodf__title { font-family: var(--hod-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing: .3em; text-transform: uppercase; color: var(--hod-white); margin: 0 0 1.4rem; padding: 0; line-height: 1.2; }
.hodf__grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1.6rem clamp(2rem, 5vw, 4.5rem); }
.hodf__hours { grid-column: 1 / -1; }
.hodf__label { text-transform: uppercase; letter-spacing: .12em; margin-bottom: .35rem !important; }
.hodf table, .hodf tr, .hodf th, .hodf td { border: 0; background: none; margin: 0; width: auto; }
.hodf th, .hodf td { padding: 0 1.6rem 0 0; text-align: left; font-weight: 300; vertical-align: top; color: inherit; }
.hodf__social { display: flex; gap: .9rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
.hodf__social a { display: block; width: 30px; height: 30px; color: var(--hod-white); }
.hodf__social svg { display: block; width: 100%; height: 100%; }
.hodf__right { display: flex; justify-content: flex-end; align-items: center; gap: clamp(2rem, 4vw, 5rem); padding-left: clamp(1.5rem, 4vw, 4.5rem); }
.hodf__menus { display: flex; align-items: stretch; }
.hodf__menu { padding: 0 clamp(1rem, 2vw, 1.8rem); border-left: 1px solid rgba(255, 255, 255, .7); text-align: right; }
.hodf__menu:first-child { border-left: 0; }
.hodf__menu .hodf__label { font-size: .72rem; letter-spacing: .14em; margin-bottom: .45rem !important; white-space: nowrap; }
.hodf__menu ul { list-style: none; margin: 0; padding: 0; }
.hodf__menu li { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1.8; white-space: nowrap; list-style: none; }
.hodf__logo img { display: block; width: 96px; height: auto; }
.hodf__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.2rem 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, .3); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }

/* ==========================================================================
   Surfplatta och mobil
   ========================================================================== */
@media (max-width: 980px) {
	/* Bild + text och kategorisidor: bilden ovanför texten. */
	.hod-s.hod-split, .hod-s.hod-cat { flex-direction: column !important; }
	.hod-split > .e-con, .hod-cat > .e-con { width: 100% !important; flex: 0 0 auto; }
	.hod-split__media, .hod-cat .hod-split__media { min-height: 0; }
	.hod-split__img { position: relative !important; inset: auto; height: auto; }
	.hod-split__img .elementor-widget-container, .hod-split__img a { height: auto; }
	.hod-split__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
	.hod-cat .hod-split__img img { aspect-ratio: 5 / 4; }
	.hod-split--left .hod-split__text, .hod-cat__text { text-align: left; }
	.hod-split--left .hod-split__text p, .hod-cat__text p, .hod-cat__text .hod-h3 { margin-left: 0; }
	.hod-s .hod-split__body, .hod-s .hod-cat__body,
	body.hod-overlap .hod-cat .hod-cat__body, body.hod-overlap .elementor > .hod-split:first-child .hod-split__body {
		--padding-top: 2.5rem; --padding-bottom: 3rem; --padding-left: 1.5rem; --padding-right: 1.5rem;
		--padding-block-start: 2.5rem; --padding-block-end: 3rem; --padding-inline-start: 1.5rem; --padding-inline-end: 1.5rem;
	}
	.hod-split--left .hod-split__body .hod-btn, .hod-split--right .hod-split__body .hod-btn { max-width: none; margin: 0 !important; }
	/* Länkraden staplad */
	.hod-bar { flex-direction: column; }
	.hod-bar__end { flex-direction: column; gap: 1.2rem; }
	.hod-bar__group, .hod-bar__end .hod-bar__group:first-child { padding: 0; border: 0; }
	.hod-stenar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Sten-sidan: spalterna under varandra med en tunn linje emellan. */
	.hod-heropanel__cols { grid-template-columns: 1fr; padding: 4rem 1.75rem 4.5rem; }
	.hod-heropanel__cols > .hod-heropanel__col { max-width: 30rem; margin: 0 auto; padding: 0 0 3.5rem; }
	.hod-heropanel__cols > .hod-heropanel__col + .hod-heropanel__col { border-top: 1px solid rgba(70, 64, 61, .2); padding-top: 3.5rem; }
	.hod-heropanel__cols > .hod-heropanel__col:last-child { padding-bottom: 0; }
	.hod-profiler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hod-profil:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
	/* Sidfoten */
	.hodf__main { grid-template-columns: 1fr; }
	.hodf__contact { border-right: 0; padding-right: 0; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .4); }
	.hodf__right { justify-content: space-between; align-items: flex-end; padding: 2.5rem 0 0; }
	.hodf__menu { text-align: left; }
	.hodf__menu:first-child { padding-left: 0; }
}

/* Surfplatta stående (768–980 px): kategoritoppen delad i två, centrerad text på bild + text-sidor. */
@media (min-width: 768px) and (max-width: 980px) {
	.hod-split__img img { aspect-ratio: 16 / 10; }
	.hod-s .hod-split__body { --padding-top: 4rem; --padding-bottom: 4.5rem; --padding-left: 3rem; --padding-right: 3rem; --padding-block-start: 4rem; --padding-block-end: 4.5rem; --padding-inline-start: 3rem; --padding-inline-end: 3rem; }
	.hod-split__text { max-width: 36rem; margin: 0 auto !important; text-align: center !important; }
	.hod-split__text p, .hod-split__text .hod-h3 { margin-left: auto !important; margin-right: auto !important; max-width: 34rem; }
	.hod-s.hod-cat { flex-direction: row !important; min-height: clamp(520px, 58svh, 720px); }
	.hod-cat > .e-con { width: 50% !important; flex: 0 0 50%; }
	.hod-cat .hod-split__media { position: relative; overflow: hidden; }
	.hod-cat .hod-split__img { position: absolute !important; inset: 0; height: 100%; }
	.hod-cat .hod-split__img .elementor-widget-container, .hod-cat .hod-split__img a { height: 100%; }
	.hod-cat .hod-split__img img { height: 100%; aspect-ratio: auto; }
	.hod-s .hod-cat .hod-cat__body, body.hod-overlap .hod-cat .hod-cat__body { --padding-top: 3.5rem; --padding-bottom: 3.5rem; --padding-left: 2rem; --padding-right: 2.5rem; --padding-block-start: 3.5rem; --padding-block-end: 3.5rem; --padding-inline-start: 2rem; --padding-inline-end: 2.5rem; }
	.hod-cat .hod-cat__text, .hod-cat .hod-cat__text * { text-align: right; }
	.hod-cat .hod-cat__text p, .hod-cat .hod-cat__text .hod-h3 { margin-left: auto; margin-right: 0; max-width: 22rem; }
	.hod-cat h1 { font-size: clamp(1.45rem, .6rem + 2.1vw, 2rem); letter-spacing: .16em; }
	.hod-cat .hod-cat__text .hod-h3 { font-size: .74rem; letter-spacing: .2em; }
	.hod-cat .hod-cat__text p:not([class]) { font-size: 15.5px; line-height: 1.8; }
	/* Länkraden: Färgval centrerat överst, Bearbetning | Pris bredvid varandra under. */
	.hod-s.hod-cat-bar { --padding-top: 2.4rem; --padding-bottom: 2.4rem; --padding-block-start: 2.4rem; --padding-block-end: 2.4rem; }
	.hod-bar { align-items: center; text-align: center; gap: 1.8rem; }
	.hod-bar__group--farg { margin: 0; }
	.hod-bar__group--farg .hod-farger, .hod-bar__links { justify-content: center; }
	.hod-bar__end { flex-direction: row; justify-content: center; gap: 0; }
	.hod-bar__end .hod-bar__group, .hod-bar__end .hod-bar__group:first-child { padding: 0 2.25rem; border-left: 1px solid rgba(70, 64, 61, .4); }
	.hod-bar__end .hod-bar__group:first-child { border-left: 0; }
}

@media (max-width: 767px) {
	.hod-s h2, .hod-s .hod-h2 { font-size: 1.05rem; letter-spacing: .2em; }
	/* Startsidan */
	.hod-hero h1 { font-size: clamp(1.3rem, 6.2vw, 1.6rem); letter-spacing: .1em; line-height: 1.35; }
	.hod-hero .hod-hero__sub { font-size: .66rem; letter-spacing: .2em; margin-top: 1rem; }
	.hod-hero .hod-hero__text { font-size: 14.8px; line-height: 1.75; max-width: 21rem; margin-top: 1.4rem; }
	.hod-hero__row { padding: 0 1.25rem; }
	.hod-bildspel img { object-position: 62% center; }
	.hod-bildspel__slide:nth-child(1) img { object-position: 68% center; }
	.hod-bildspel__slide:nth-child(3) img { object-position: 40% center; }
	.hod-bildspel::after { background: linear-gradient(to bottom, rgba(40, 30, 22, .34), rgba(40, 30, 22, .2) 45%, rgba(40, 30, 22, .32)); }
	.hod-hero h1, .hod-hero p { text-shadow: 0 1px 16px rgba(0, 0, 0, .35); }
	/* Citat */
	.hod-quote__row { display: block !important; }
	.hod-quote__row > .hod-quote__mark, .hod-quote__row > .hod-quote__body { width: 100% !important; }
	.hod-quote .hod-quote__mark p { text-align: left; margin-bottom: .6rem; }
	.hod-quote .hod-quote__body { padding-left: 1.25rem; }
	/* Rutor: bild och text kvadratiska, staplade */
	.hod-tile { grid-template-columns: 1fr; gap: 0; margin-bottom: 1rem !important; }
	.hod-tile--flip .hod-tile__media { order: -1; }
	.hod-s .hod-tile__card { --padding-top: 1.6rem; --padding-bottom: 1.6rem; --padding-left: 1.6rem; --padding-right: 1.6rem; --padding-block-start: 1.6rem; --padding-block-end: 1.6rem; --padding-inline-start: 1.6rem; --padding-inline-end: 1.6rem; }
	.hod-tile__card .hod-tile__text p { font-size: .76rem; line-height: 1.7; }
	.hod-tile__card .hod-tile__text p.is-kortad { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
	.hod-tile__card .elementor-heading-title { margin-bottom: .8rem; }
	.hod-tile__card .hod-btn .elementor-button { margin-top: 1rem; }
	/* Material: två i bredd, utan beskrivning */
	.hod-cards > .hod-card { flex-basis: calc((100% - .75rem) / 2) !important; }
	.hod-cards { gap: .75rem !important; }
	.hod-card .elementor-image-box-wrapper { padding: .6rem .6rem 1.1rem; }
	.hod-s .hod-card .elementor-image-box-title { font-size: .66rem; letter-spacing: .18em; margin-top: .9rem !important; }
	.hod-card .elementor-image-box-description { display: none; }
	.hod-card--offert .elementor-image-box-img a::after { font-size: .75rem; }
	.hod-cards > .hod-card--offert { order: 99; }
	/* Stenkatalogen */
	.hod-stenar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
	.hod-sten { padding: .5rem .5rem .9rem; }
	.hod-sten__snart { font-size: .5rem; letter-spacing: .18em; }
	.hod-stenar__sok { margin: 0 .25rem 1.75rem; }
	/* Sten-sidan */
	.hod-heropanel__top { padding-top: 3.5rem; }
	.hod-heropanel .hod-heropanel__top h1 { font-size: 2rem; }
	.hod-heropanel .hod-heropanel__top .hod-h3 { font-size: .66rem; letter-spacing: .22em; }
	.hod-heropanel__cols { padding: 3.25rem 1.5rem 3.75rem; }
	.hod-heropanel__cols > .hod-heropanel__col { padding-bottom: 3rem; }
	.hod-heropanel__cols > .hod-heropanel__col + .hod-heropanel__col { padding-top: 3rem; }
	/* Kategorisidor: stor bild överst med rubriken på bilden (som Sten-sidan). */
	.hod-cat .hod-split__media { position: relative; overflow: hidden; }
	.hod-cat .hod-split__img img { aspect-ratio: auto; height: 58svh; min-height: 380px; object-fit: cover; }
	.hod-cat .hod-split__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 17, 15, .45), rgba(20, 17, 15, .22) 45%, rgba(20, 17, 15, .4)); }
	.hod-cat .hod-cat__over { display: flex !important; position: absolute; inset: 0; z-index: 2; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--hodh-h) * .6) 1.5rem 0; text-align: center; }
	.hod-s .hod-cat__over p { padding: 0; margin: 0; color: var(--hod-white); text-shadow: 0 2px 22px rgba(0, 0, 0, .3); }
	.hod-s .hod-cat__over .hod-cat__over-t { font-family: var(--hod-font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.45rem, 7vw, 2rem); letter-spacing: .18em; line-height: 1.25; }
	.hod-s .hod-cat__over .hod-cat__over-s { font-family: var(--hod-font-sc); text-transform: uppercase; font-size: .66rem; letter-spacing: .22em; line-height: 1.7; margin-top: 1rem; max-width: 100%; white-space: nowrap; }
	.hod-cat .hod-cat__text h1, .hod-cat .hod-cat__text .hod-h3 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
	.hod-s .hod-cat .hod-cat__body, body.hod-overlap .hod-cat .hod-cat__body { --padding-top: 3.5rem; --padding-bottom: 3.75rem; --padding-left: 1.75rem; --padding-right: 1.75rem; --padding-block-start: 3.5rem; --padding-block-end: 3.75rem; --padding-inline-start: 1.75rem; --padding-inline-end: 1.75rem; }
	.hod-cat .hod-cat__text, .hod-cat .hod-cat__text * { text-align: center; }
	.hod-cat .hod-cat__text p { margin-left: auto; margin-right: auto; max-width: 21rem; }
	.hod-cat .hod-cat__text .hod-lead { font-size: 16.4px; line-height: 1.7; margin-bottom: 1.1rem; }
	.hod-cat .hod-cat__text p:not([class]) { font-size: 15.5px; line-height: 1.85; }
	/* Länkraden: tre flikar i en rad, valen fälls ut under. */
	.hod-s.hod-cat-bar { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px; }
	.hod-bar { display: block; }
	.hod-bar .hod-bar__tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(70, 64, 61, .18); }
	.hod-bar__tab {
		appearance: none; background: none; border: 0; border-left: 1px solid rgba(70, 64, 61, .22); border-radius: 0; cursor: pointer; margin: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 4.4rem; padding: .9rem .4rem;
		color: var(--hod-dark); font-family: var(--hod-font-sc); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
	}
	.hod-bar__tab:hover { background: rgba(255, 255, 255, .12); color: var(--hod-dark); }
	.hod-bar__tab:first-child { border-left: 0; }
	.hod-bar__tabname { display: inline-flex; align-items: center; gap: .45rem; }
	.hod-bar__tabname::after { content: ""; width: .38rem; height: .38rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .3s var(--hod-ease); }
	.hod-bar__tab[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
	.hod-bar__tab[aria-expanded="true"] .hod-bar__tabname::after { transform: translateY(.1rem) rotate(-135deg); }
	.hod-bar__tabval { font-family: var(--hod-font-ui); font-size: .58rem; letter-spacing: .18em; opacity: .75; min-height: .8em; }
	.hod-bar__tabval:empty { display: none; }
	.hod-bar .hod-bar__end { display: block; }
	.hod-bar .hod-bar__panel, .hod-bar .hod-bar__end .hod-bar__panel, .hod-bar .hod-bar__end .hod-bar__panel:first-child { display: none; padding: 1.6rem 1.5rem 1.9rem; border: 0; margin: 0; background: rgba(255, 255, 255, .22); }
	body .hod-bar[data-open="farg"] .hod-bar__panel[data-flik="farg"],
	body .hod-bar[data-open="bearb"] .hod-bar__panel[data-flik="bearb"],
	body .hod-bar[data-open="pris"] .hod-bar__panel[data-flik="pris"] { display: block; animation: hodFadeUp .35s var(--hod-ease) both; }
	.hod-bar .hod-bar__panel .hod-bar__label { display: none; }
	.hod-bar .hod-bar__mob { display: block !important; }
	.hod-bar .hod-farger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .6rem; }
	.hod-bar .hod-farger button { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .3rem 0; font-size: .64rem; }
	.hod-bar .hod-farger button::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--sw, transparent); box-shadow: inset 0 0 0 1px rgba(70, 64, 61, .3); }
	.hod-bar .hod-farger button[data-farg=""]::before { background: conic-gradient(#f3f1ec 0 25%, #a3a09a 0 50%, #2f2d2b 0 75%, #d9cbb3 0); }
	.hod-bar .hod-bar__panel .hod-bar__links { display: flex !important; flex-direction: column; align-items: center; gap: 1.1rem; }
	.hod-bar .hod-bar__panel .hod-bar__links a { font-size: .68rem; letter-spacing: .22em; }
	/* Snart-sidor: smalare, lugnare textspalt */
	.hod-s.hod-soon { padding: 6rem 1rem; }
	.hod-soon__row { padding: 0 2.25rem; max-width: 23rem; }
	.hod-soon h1 { font-size: 1.75rem; letter-spacing: .2em; }
	.hod-soon .hod-h2 { font-size: .68rem; letter-spacing: .24em; line-height: 1.7; margin: .9rem auto 2rem; max-width: 16rem; }
	.hod-soon .hod-soon__text p:not(.hod-h2) { font-size: 15.1px; line-height: 1.75; margin: 0 auto .95rem; max-width: 18.5rem; text-wrap: pretty; }
	.hod-soon .hod-soon__contact { margin-top: 1.4rem; margin-bottom: 1.4rem; }
	/* Bearbetning */
	.hod-subkort { grid-template-columns: 1fr; }
	.hod-profiler { gap: 1.6rem .9rem; }
	.hod-s .hod-profil__text { font-size: 13px; }
	.hod-s .hod-profil__namn { font-size: .64rem; letter-spacing: .16em; }
	/* Sidfoten: menyer i tre kolumner med tunna linjer, loggan centrerad */
	.hodf__inner { padding: 3.5rem 1.5rem 0; }
	.hodf__offert { display: block; text-align: center; margin-bottom: 3.5rem; padding: 1.05rem 1rem; font-size: 1.05rem; letter-spacing: .26em; }
	.hodf__title { font-size: 1.6rem; margin-bottom: 1.6rem; }
	.hodf__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
	.hodf__hours { margin-top: .4rem; }
	.hodf th, .hodf td { padding-right: .8rem; padding-bottom: .25rem; }
	.hodf__social { margin-top: 2.2rem; gap: .8rem; }
	.hodf__social a { width: 26px; height: 26px; }
	.hodf__contact { padding-bottom: 3rem; }
	.hodf__right { display: flex; flex-direction: column; align-items: stretch; gap: 3rem; padding-top: 3rem; }
	.hodf__menus { display: grid; grid-template-columns: 1fr 1.15fr 1.1fr; gap: 0; }
	.hodf__menu, .hodf__menu:first-child { padding: 0 .55rem; border-left: 1px solid rgba(255, 255, 255, .6); text-align: left; }
	.hodf__menu:first-child { padding-left: 0; border-left: 0; }
	.hodf__menu:last-child { padding-right: 0; }
	.hodf__menu .hodf__label { font-size: .6rem; letter-spacing: .12em; white-space: normal; margin-bottom: .8rem !important; }
	.hodf__menu li { font-size: .54rem; letter-spacing: .1em; line-height: 2.2; white-space: normal; }
	.hodf__logo { align-self: center; margin: .5rem auto 0; }
	.hodf__logo img { width: 104px; }
	.hodf__bottom { margin-top: 3rem; padding-top: 1.6rem; justify-content: center; text-align: center; font-size: .58rem; padding-bottom: 7.5rem; }
	.hodf a[href^="tel"], .hodf td, .hodf th { text-decoration: none; color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
	.hod-bildspel__slide img { animation: none !important; }
	.hod-hero__row, .hod-soon__row { animation: none; }
	.hod-img img, .hod-card img { transition: none; }
}

/* Rubriken på Bearbetning m.fl. undersidor: alltid på en rad. Storleken följer textspaltens bredd
   (container-enheter), men blir aldrig större än vanliga H1. */
.hod-split :has(> .hod-h1) { container-type: inline-size; width: 100%; }
.hod-split .hod-split__text:has(.hod-h1) { width: 100%; }
.hod-split .hod-h1 { white-space: nowrap; font-size: min(var(--hod-h1-size), calc(100cqw / 14)); }

/* Kategorisidorna i mobilen: mjukt mörkt lager bakom rubriken, något större underrubrik
   och (för Kalksten) bilden förskjuten så att skålarna inte ligger bakom texten. */
@media (max-width: 767px) {
	.hod-cat .hod-cat__over { background: radial-gradient(ellipse 85% 34% at 50% calc(50% + var(--hodh-h) * .3), rgba(18, 15, 13, var(--hod-over-styrka, .42)), rgba(18, 15, 13, calc(var(--hod-over-styrka, .42) * .48)) 60%, rgba(18, 15, 13, 0) 100%); }
	.hod-s .hod-cat__over .hod-cat__over-s { font-size: .76rem; }
	body.hod-sida-granit .hod-cat, body.hod-sida-keramik .hod-cat { --hod-over-styrka: .52; }
	body.hod-sida-kalksten .hod-cat .hod-split__media { overflow: hidden; }
	body.hod-sida-kalksten .hod-cat .hod-split__img img { object-position: 0% 50%; transform: scale(1.5); transform-origin: 0% 100%; }
	/* Bildjusteringar per kategorisida (mobil): köksön/bänken längre ned, rubriken på lugnare yta. */
	body.hod-sida-kvartskomposit .hod-cat .hod-split__img img, body.hod-sida-kvartsit .hod-cat .hod-split__img img { object-position: 50% 0%; }
	body.hod-sida-marmor .hod-cat .hod-split__media { overflow: hidden; }
	body.hod-sida-marmor .hod-cat .hod-split__img img { transform: scale(1.35); transform-origin: 40% 0%; }
}