/* ==========================================================================
   Figma design refresh — 2026-09-15
   Overlay stylesheet: keeps the (currently unbuildable, drifted) SCSS/gulp
   pipeline untouched and layers the new visual design on top instead.
   See .agent/knowledge/gotchas.md for why this exists as its own file.
   ========================================================================== */

/* ---- Page canvas: cream, not the old green fallback ----
   Confirmed by sampling the Figma screenshot directly: #F3EDDF runs behind
   the intro copy AND the whole product grid, not just the intro. The old
   `body{background-color:#afc2af}` (sage green) was showing through
   everywhere a section didn't set its own background. */
body {
	background-color: #F3EDDF;
	/* style.css sets `overflow-x: hidden` here and nothing for
	   overflow-y. Per spec, having ONE axis as anything other than
	   visible/clip forces the OTHER axis to compute as `auto` even when
	   it's explicitly authored as `visible` (tried that first — no
	   effect) — quietly turning body into its own scroll container. That
	   broke `position: sticky` on .mobile-topbar: it stuck to body's own
	   (always exactly content-sized, so never-scrolling) box instead of
	   the real viewport, and just scrolled away like a normal element.
	   `clip` is the one value exempt from that promotion rule — it still
	   clips horizontal overflow exactly like `hidden` did, but doesn't
	   turn body into a scroll container, so sticky correctly attaches to
	   the real viewport again. */
	overflow-x: clip;
	overflow-y: visible;
}

/* ---- Header height, for the hero's min-height calc below ----
   Fallback values measured directly (headless browser, real render):
   desktop #nymeny 74px + #nycatmeny 49px = 123px; mobile .mobile-topbar
   64px (see the matching max-width:800px breakpoint further down).
   scripts.js (initHeaderHeightVar) overwrites this with the live
   measured height on load/resize, so this stays correct even if nav
   content/padding changes later — these are just the pre-JS fallback. */
:root {
	--header-height: 123px;
}

@media (max-width: 800px) {
	:root {
		--header-height: 64px;
	}
}

/* ---- Typography: Neutra Text is the design's primary typeface ----
   Checked every rendered text node across all 7 Figma views (homepage,
   cart drawer, checkout forms, mobile menu) via their canonical
   view.html: zero use Inter, hundreds use 'Neutra Text' — the "347
   Inter usages" in design-tokens.json's aggregate summary doesn't match
   any actual visible content and appears to count something else
   (non-visible metadata). 'NeutraText-Book' is the one real locally
   hosted weight (see @font-face in style.css) — it's used here as the
   stand-in for every "Neutra Text" weight Figma calls for, since no
   separate medium/bold cut exists on this site; Inter is kept only as
   a fallback, not removed, in case that ever changes. */
body,
#nymeny, #nycatmeny,
.shop__intro, .shop__disclaimer,
.header__hero-text,
.shop__category__item__description,
.shop__category__item__description p,
input, textarea, button, select {
	font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
}

/* ---- Top wrapper: no longer a fixed teal dev bar ---- */
.brasklappar {
	/* Sticky (not fixed) for the same reason as .mobile-topbar below —
	   it stays in normal flow (no compensating padding needed anywhere,
	   .header__inner's height math is untouched) and just clings to the
	   top once scrolled past. Wraps both #nymeny and #nycatmeny so the
	   whole nav (not just one bar) stays visible on desktop. */
	position: sticky;
	top: 0;
	height: auto;
	background-color: transparent;
	z-index: 1000;
}

/* ---- Main nav bar ----
   #nymeny is just the full-bleed white bar; .nymeny__inner is the actual
   content row (logo, nav, social icons, cart), capped to a max-width and
   centered so it doesn't stretch edge-to-edge on wide viewports (that's
   what was pushing the logo into the far left corner). */
#nymeny {
	background-color: #ffffff;
	padding: 16px 32px;
	height: auto;
	text-align: left;
	border-bottom: 1px solid rgba(29, 29, 27, 0.08);
}

#nymeny .nymeny__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
}

#nymeny .nymeny__logo {
	flex: 0 0 auto;
	line-height: 0;
}

#nymeny .nymeny__logo img {
	position: static;
	transform: none;
	padding-left: 0;
	height: 38px;
	width: auto;
}

#nymeny .menu-huvudmeny-container {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

#nymeny .menu-huvudmeny-container ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nymeny .menu-huvudmeny-container li {
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	color: #1D1D1B;
	display: inline-block;
}

#nymeny .menu-huvudmeny-container a {
	color: #1D1D1B;
	text-decoration: none;
}

#nymeny .menu-huvudmeny-container a:hover {
	color: #E6A226;
}

/* Facebook / Instagram menu items become small icons */
#nymeny .menu-item-69 a,
#nymeny .menu-item-70 a {
	display: inline-flex;
	width: 18px;
	height: 18px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	opacity: 0.75;
}

#nymeny .menu-item-69 a {
	background-image: url('../images/assets/icon-facebook.svg');
}

#nymeny .menu-item-70 a {
	background-image: url('../images/assets/icon-instagram.svg');
}

#nymeny .menu-item-69 a:hover,
#nymeny .menu-item-70 a:hover {
	opacity: 1;
}

/* Cart pill */
.nymeny__cart {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #ECB89F;
	color: #1D1D1B;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.nymeny__cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.nymeny__cart svg {
	width: 16px;
	height: 16px;
	fill: #1D1D1B;
	flex: 0 0 auto;
}

.nymeny__cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background-color: #000000;
	color: #ffffff;
	font-size: 9px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.nymeny__cart:hover {
	background-color: #e6a988;
}

/* "Bumped" on add-to-cart — see bumpCartIcon() in scripts.js. Targets
   just the icon (+ badge), not the whole .nymeny__cart pill, so "Din
   varukorg" doesn't wobble along with it; on mobile-topbar__cart the icon
   IS the whole button (no separate text label there), so the class is
   applied directly to it instead. */
@keyframes cart-bump {
	0% {
		transform: scale(1) rotate(0deg);
	}
	25% {
		transform: scale(1.18) rotate(-8deg);
	}
	50% {
		transform: scale(1.1) rotate(6deg);
	}
	70% {
		transform: scale(1.12) rotate(-4deg);
	}
	85% {
		transform: scale(1.04) rotate(2deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}

.nymeny__cart-icon.is-bumping,
.mobile-topbar__cart.is-bumping {
	animation: cart-bump 0.45s ease;
	transform-origin: center;
}

/* ---- Category bar ---- */
#nycatmeny {
	background-color: #AFC2AF;
	padding: 14px 32px;
	height: auto;
}

#nycatmeny .menu-cat-menu-container ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nycatmeny .menu-cat-menu-container li {
	display: inline;
	padding-left: 0;
	font-size: 14px;
}

#nycatmeny .menu-cat-menu-container a {
	color: #1D1D1B;
	text-decoration: none;
	font-weight: 500;
}

#nycatmeny .menu-cat-menu-container a:hover {
	color: #ffffff;
}

/* ---- Kill the legacy underline/hover-shift hack ----
   style.css has a blanket `a, a:visited { border-bottom: 2px solid #fff;
   padding-bottom: 3px }` — invisible on white backgrounds, but shows as
   a white line under every link on #nycatmeny's green bar. marcus.css
   also re-adds that same border specifically on #nymeny a:hover/:active
   (after resetting it to border:0 on :link/:visited), which caused a
   2px layout shift — e.g. the header content nudging down whenever you
   hover the logo. Zero it on the actual text links/logo/icons only —
   NOT `.nymeny__cart`, which sets its own real `padding: 10px 22px` for
   the pill button and would otherwise get its bottom padding stripped
   too (same `#nymeny a` selector also matches the cart's own <a>). */
#nymeny .nymeny__logo,
#nymeny .nymeny__logo:link,
#nymeny .nymeny__logo:visited,
#nymeny .nymeny__logo:hover,
#nymeny .nymeny__logo:active,
#nymeny .menu-huvudmeny-container a,
#nymeny .menu-huvudmeny-container a:link,
#nymeny .menu-huvudmeny-container a:visited,
#nymeny .menu-huvudmeny-container a:hover,
#nymeny .menu-huvudmeny-container a:active,
#nycatmeny a,
#nycatmeny a:link,
#nycatmeny a:visited,
#nycatmeny a:hover,
#nycatmeny a:active {
	border-bottom: 0;
	padding-bottom: 0;
}

/* .nymeny__cart itself is still an `#nymeny a`, so marcus.css's
   `#nymeny a:hover/:active { border-bottom: 2px solid #fff }` (an ID
   selector — beats .nymeny__cart's own class rule on specificity
   regardless of source order) was adding the same 2px hover shift to the
   cart pill. Zero just the border here, deliberately not padding-bottom
   — .nymeny__cart's own `padding: 10px 22px` is real and correct. */
#nymeny .nymeny__cart,
#nymeny .nymeny__cart:link,
#nymeny .nymeny__cart:visited,
#nymeny .nymeny__cart:hover,
#nymeny .nymeny__cart:active {
	border-bottom: 0;
}

/* ---- Hero ---- */
header.header {
	padding: 0;
	/* style.css sets background-image:url(../images/assets/hero.jpg) — a
	   static fallback image from before the video background existed.
	   The video (.header__video) covers this now, so drop it rather than
	   have it flash/show through before the video paints. */
	background-image: none;
}

#content {
	margin-top: 0;
}

.header__inner {
	padding: 0;
	border: 0;
	position: relative;
	/* Fills exactly one viewport below the nav bar(s) — --header-height
	   is set above (fallback) and kept live by initHeaderHeightVar() in
	   scripts.js, so this holds on both desktop and mobile even if the
	   nav's own height changes later. */
	min-height: calc(100svh - var(--header-height));
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.header__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header__overlay {
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 27, 0.45);
}

.header__content {
	position: relative;
	z-index: 1;
	max-width: 760px;
	padding: 48px 24px;
	margin: 0 auto;
}

.header__logo {
	display: block;
	margin: 0 auto 28px;
	width: 140px;
	height: auto;
}

.header__headline {
	margin: 0 0 24px;
}

.header__headline-image {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 auto;
}

.header__hero-text {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	margin: 0 0 32px;
}

.header__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.header__cta {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #1D1D1B;
	transition: background-color .15s ease;
}

.header__cta--primary {
	background-color: #F3EDDF;
}

.header__cta--primary:hover {
	background-color: #ffffff;
}

.header__cta--secondary {
	background-color: rgba(255, 255, 255, 0.6);
}

.header__cta--secondary:hover {
	background-color: rgba(255, 255, 255, 0.85);
}

.header__play {
	margin-top: 28px;
}

.header__play img {
	width: 44px !important;
	cursor: pointer;
}

/* ---- Sub-page hero (page.php) ----
   Same building blocks as the front page's video hero (overlay, content,
   logo, headline graphic), but with the page's featured image as the
   background instead of the video, and a shorter band rather than a full
   viewport — the page content itself should start above the fold.
   style.css's old `.header { background-image: hero.jpg }` used to fill
   this; that's dropped above for the video, which is why sub-pages were
   rendering as an empty cream box with white-on-cream logo/text. */
.header__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.header--page .header__inner {
	min-height: clamp(380px, 58vh, 580px);
}

.header--page .header__overlay {
	background: rgba(29, 29, 27, 0.42);
}

.header--page .header__content {
	width: 100%;
	box-sizing: border-box;
	padding: 64px 32px;
}

.header--page .header__logo {
	width: 170px;
	margin: 0 auto 36px;
}

.header--page .header__headline-image {
	width: 100%;
	max-width: 560px;
}

/* Sub-page content: drop style.css's white "card" look (.hentry white
   background + 1px #ccc border, and a hairline under .hentry header) so
   the content sits directly on the page's cream canvas. */
.page-template-default .hentry {
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.page-template-default .hentry header {
	border-bottom: 0;
	/* Only the top padding is kept: header + .entry-content each added
	   24px between them, which pushed page.php's fallback title h1 68px
	   away from the content. With these two zeroed, that h1 and an h1
	   the editor put at the top of the content both land in the same
	   spot with exactly their own 20px margin below. */
	padding-bottom: 0;
	/* Breathing room between the hero and the page content. */
	margin-top: 40px;
}

.page-template-default .hentry footer {
	border-top: 0;
}

.page-template-default .hentry .entry-content {
	padding-top: 0;
}

.page-template-default .hentry h1 {
	margin-top: 0;
	margin-bottom: 20px;
}

@media (max-width: 700px) {
	.header--page .header__inner {
		min-height: 300px;
	}

	.header--page .header__content {
		padding: 44px 28px;
	}

	.header--page .header__logo {
		width: 120px;
		margin-bottom: 24px;
	}

	.header--page .header__headline-image {
		max-width: 300px;
	}
}

/* ---- Category titles ("FAVORITER JUST NU" etc.) ----
   The old rule only drew the orange double-line divider on the *first*
   category (:first-of-type); Figma repeats it on every one, centered. */
.page-shop .shop__category_title {
	display: block;
	position: relative;
	/* style.css's own .shop__category_title rule sets
	   font-family:LinotypeBrewery-Black — another leftover from the
	   pre-refresh theme (see the product-title h2 fix above for the
	   same issue). Figma has every category heading ("Frukost",
	   "Favoriter just nu", …) as Neutra Text 700 / 15px / 28px
	   line-height, uppercase. */
	font-family: 'NeutraText-Book', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 28px;
	letter-spacing: .25em;
	margin: 64px auto 40px;
	width: fit-content;
}

.page-shop .shop__category_title:before,
.page-shop .shop__category_title:after {
	content: '';
	height: 2px;
	width: 140px;
	background-color: #E6A226;
	position: absolute;
	top: 50%;
	margin-top: -1px;
}

.page-shop .shop__category_title:before {
	left: 100%;
	margin-left: 24px;
}

.page-shop .shop__category_title:after {
	right: 100%;
	margin-right: 24px;
}

/* ---- Product cards ---- */
.shop__category__item {
	padding: 8px 16px;
}

.shop__category__item__inner {
	background-color: transparent;
}

.shop__category__item:hover .shop__category__item__inner {
	background-color: transparent;
}

.shop__category__item__image {
	height: 220px;
	border-radius: 4px;
}

/* matchHeight() (scripts.js, via libs.js) already equalizes every card's
   description box to the tallest one in its row — but that alone only
   equalizes the CONTAINER height; the actions row (button/info/price)
   still just follows normal top-down flow after a variable-length
   title+description, landing at a different vertical position per card
   (verified: same card height, different .shop__category__item__actions
   offsets). Flex column + margin-top:auto on .shop__category__item__actions
   below pins it to the bottom of that already-equalized box instead. */
.shop__category__item__description {
	padding: 16px 12px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.shop__category__item__description h2 {
	/* Was 'LinotypeBrewery-Black' — a leftover from the pre-refresh
	   theme, a decorative serif with nothing to do with the Figma
	   design (which isn't referenced anywhere in it). Figma has every
	   product title as 'Neutra Text', weight 700, e.g. "Kanelbulle" /
	   "Kardemummabulle" on the homepage view. NeutraText-Book is the
	   only real weight hosted locally, so 700 here is a synthetic
	   (browser fake-)bold, not a true separate bold cut — the closest
	   available match without sourcing/licensing a real Neutra Text
	   Bold webfont. */
	font-family: 'NeutraText-Book', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	color: #1D1D1B;
	margin: 0 0 8px;
}

.shop__category__item__description .description {
	font-size: 14px;
	line-height: 1.5;
	color: #1D1D1B;
	margin: 0;
}

/* Row holding the add/remove pill, the info toggle, and the price —
   order fixed to match Figma (2026-09-16): button, then info icon, then
   price pushed all the way to the right. Previously these were plain
   inline/inline-block siblings of h2/.description inside
   .shop__category__item__description (itself text-align:center), which
   put the price right after the pill rather than at the row's right
   edge — a flex row was needed, not just a DOM reorder, to actually push
   price to "längst till höger". Button+info are wrapped together in
   .shop__category__item__actions-left so they act as one group on the
   left while `justify-content: space-between` sends .price to the right
   edge of the card's content width. */
.shop__category__item__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	margin-bottom: 12px;
}

.shop__category__item__actions-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* The add/remove/amount pill — one continuous control, Figma-style */
.shop__category__item .controls {
	position: static;
	width: auto;
	margin: 0;
	display: inline-flex;
	align-items: stretch;
	background-color: #ECB89F;
	border-radius: 999px;
	overflow: hidden;
	font-weight: 500;
	font-size: 14px;
	color: #1D1D1B;
	vertical-align: middle;
}

.shop__category__item .remove,
.shop__category__item .add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	background-image: none;
	background-size: auto;
	cursor: pointer;
	padding: 0 14px;
	line-height: 2.6;
	font-size: 18px;
}

.shop__category__item .remove {
	padding-right: 4px;
}

/* The +/- glyphs render as near-invisible hairlines in NeutraText-Book
   (same underlying issue as the cart drawer's stepper buttons — see
   .cart-drawer__stepper-btn) — Arial fixes that on its own, at the
   regular weight; bold made the glyphs too heavy (2026-09-16 feedback),
   so weight is left at normal here, size bumped instead. */
.shop__category__item .remove,
.add__plus {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
}

.shop__category__item .amount {
	position: static;
	display: inline-flex !important;
	align-items: center;
	font-weight: 700;
	font-size: 17px;
	padding: 0 2px;
}

.shop__category__item .add {
	gap: 6px;
	padding-left: 4px;
}

.add__label {
	font-size: 15px;
	white-space: nowrap;
}

.add__icon {
	width: 18px;
	height: 18px;
	fill: #1D1D1B;
	flex-shrink: 0;
}

.shop__category__item .price {
	position: static;
	display: inline-block;
	font-weight: 700;
	font-size: 15px;
	color: #1D1D1B;
	white-space: nowrap;
}

.shop__category__item .info-toggle {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid #1D1D1B;
	background-image: none;
	font-size: 12px;
	font-style: italic;
	font-family: Georgia, serif;
	color: #1D1D1B;
}

/* ---- Ingredients popover (2026-09-16) ----
   Confirmed via computed stacking checks that the old z-index:5 (style.css)
   was actually losing to two things: the sticky nav (#nymeny, z-index:1000
   — see .header/.mobile-topbar rules) whenever the opened card was near
   the top of the viewport, and this card's own decorative
   .frame__top/right/bottom/left corner accents (z-index:10, style.css) at
   the box's edges. 1500 clears the sticky nav with room to spare, while
   staying well below the mobile menu / cart drawer overlay tier
   (9999–10001) — those are full-screen states this popover never needs to
   compete with.
   Selector kept as `.shop__category .item-ingredients.is-visible` (not
   just `.item-ingredients.is-visible`) to MATCH style.css's specificity
   (0,3,0) exactly rather than lose to it — a plain override here loaded
   later still loses a specificity fight, it only wins ties. Learned this
   the hard way: an earlier `.item-ingredients.is-visible { z-index: 1500
   }` here compiled and served fine but had zero visible effect, still
   computing to 5, because style.css's 3-class selector outranked this
   file's 2-class one regardless of load order. */
.shop__category .item-ingredients.is-visible {
	z-index: 1500;
}

.shop__category .item-ingredients__inner {
	position: relative;
}

.item-ingredients__close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: 0;
	/* Same reasoning as .cart-drawer__close: NeutraText-Book renders × as
	   a near-invisible hairline (not a symbol font); Arial bold is
	   unambiguous regardless of weight. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #1D1D1B;
	cursor: pointer;
	padding: 4px;
}

/* ---- "Favoriter just nu" — editor-curated teaser row ----
   Same card look as the real product grid, but the whole card is a plain
   link (to the matching product further down) rather than its own
   add/remove cart control — these aren't bakeryDB products, so they can't
   safely drive the real order total. */
.shop__category__item--favorite .shop__category__item__inner {
	display: block;
	color: inherit;
	text-decoration: none;
}

.shop__category__item--favorite .controls--static {
	display: inline-flex;
	background-color: #ECB89F;
	border-radius: 999px;
	padding: 0;
	overflow: hidden;
}

.shop__category__item--favorite .controls--static .add {
	padding: 0 16px;
	line-height: 2.6;
}

/* ---- Intro section ("Vad är du sugen på idag?") ---- */
/* Full-bleed cream band behind both the intro and the disclaimer text,
   regardless of the ancestor wrappers' own padding (classic box-shadow
   spread + clip-path full-bleed trick — .shop__intro and .shop__disclaimer
   are plain siblings inside <main>, with no shared wrapper to color). */
.shop__intro,
.shop__disclaimer {
	position: relative;
	background-color: #F3EDDF;
	box-shadow: 0 0 0 100vmax #F3EDDF;
	clip-path: inset(0 -100vmax);
}

.shop__intro {
	max-width: 640px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	text-align: center;
}

.shop__disclaimer {
	margin: 0 auto;
	padding: 0 24px 48px;
}

.shop__intro__divider {
	display: block;
	width: 90px;
	height: 18px;
	margin: 0 auto 22px;
	background: url('../images/assets/wheat-icon.png') center/contain no-repeat;
}

.shop__intro__eyebrow {
	font-family: 'NeutraText-Book', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #1D1D1B;
	margin: 0 0 16px;
}

.shop__intro__text {
	font-size: 16px;
	line-height: 1.6;
	color: #1D1D1B;
	margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
	.header__headline-image {
		max-width: 320px;
	}

	.header__content {
		padding: 48px 20px;
	}

	.header__hero-text {
		font-size: 16px;
	}
}

/* ---- Mobile navigation ----
   The Responsive Menu plugin is active but wires up no markup on this
   site (verified: nothing matching its usual selectors renders in the
   DOM at any width) — below 800px there was previously no way at all to
   reach the nav or category links. Replacing that gap with a small
   self-contained toggle: a compact top bar (logo + hamburger) that reveals
   the *same* #nymeny / #nycatmeny content as a full-screen panel, instead
   of hiding it outright. See initMobileMenuToggle() in scripts.js. */
.mobile-topbar {
	display: none;
}

@media (max-width: 800px) {
	#nymeny,
	#nycatmeny {
		display: none;
	}

	.mobile-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 14px 20px;
		border-bottom: 1px solid rgba(29, 29, 27, 0.08);
		/* Sticky (not fixed) deliberately — it stays in normal flow so it
		   still pushes .header__inner down exactly as before (the hero's
		   `min-height: calc(100svh - var(--header-height))` needs that),
		   it just clings to the top instead of scrolling away once you
		   pass it. */
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.mobile-topbar__logo img {
		height: 30px;
		width: auto;
		display: block;
	}

	.mobile-topbar__actions {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.mobile-topbar__cart {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 999px;
		background-color: #ECB89F;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	.mobile-topbar__cart svg {
		width: 16px;
		height: 16px;
		fill: #1D1D1B;
	}

	.mobile-topbar__cart-count {
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 16px;
		height: 16px;
		padding: 0 3px;
		border-radius: 999px;
		background-color: #000000;
		color: #ffffff;
		font-size: 9px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	.mobile-topbar__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 5px;
		width: 30px;
		height: 30px;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	.mobile-topbar__toggle span {
		display: block;
		height: 2px;
		background-color: #1D1D1B;
		width: 26px;
		transition: width .15s ease;
	}

	.mobile-topbar__toggle span:nth-child(2) {
		width: 18px;
	}

	/* Full-screen mobile menu panel, per Figma node 77:14668 ("Mobile
	   menu"): its own logo + close row, left-aligned 29px links with
	   "Vårt sortiment" as an expandable submenu of the shop categories
	   (replacing the old separate green category panel), a social icon
	   row and a full-width cart pill. Measurements are from the 393px-wide
	   Figma frame. See initMobileMenuToggle() in scripts.js. */
	.mobile-menu {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		/* Above the hero (.header, z-index:999) and the sticky topbar, but
		   below the cart drawer + its backdrop (10000+), which the menu's
		   own cart pill opens. */
		z-index: 9999;
		background-color: #ffffff;
		padding: 0 32px 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;
		visibility: hidden;
		opacity: 0;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}

	body.mobile-menu-open .mobile-menu {
		visibility: visible;
		opacity: 1;
		transition: opacity .2s ease;
	}

	/* Page underneath shouldn't scroll along behind the panel. */
	body.mobile-menu-open {
		overflow: hidden;
	}

	.mobile-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40px 4px 0 6px;
	}

	.mobile-menu__logo,
	.mobile-menu__logo:link,
	.mobile-menu__logo:visited,
	.mobile-menu__logo:hover,
	.mobile-menu__logo:active {
		line-height: 0;
		border-bottom: 0;
		padding-bottom: 0;
	}

	.mobile-menu__logo img {
		display: block;
		height: 49px;
		width: auto;
	}

	.mobile-menu__close {
		position: relative;
		width: 32px;
		height: 32px;
		margin-right: -4px;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	.mobile-menu__close span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 29px;
		height: 2px;
		background-color: #1D1D1B;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.mobile-menu__close span + span {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.mobile-menu__list,
	.mobile-menu__sub,
	.mobile-menu__social {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mobile-menu__list {
		/* Figma: logo bottom at y137, first link at y198, links on a 69px
		   pitch (29px text ≈ 35px line box + 34px between). */
		margin-top: 44px;
		padding: 0 29px 0 15px;
	}

	.mobile-menu__item {
		padding: 0;
	}

	.mobile-menu__link,
	.mobile-menu__link:link,
	.mobile-menu__link:visited,
	.mobile-menu__link:hover,
	.mobile-menu__link:active {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		padding: 17px 0;
		background: none;
		border: 0;
		font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
		font-size: 29px;
		font-weight: 400;
		line-height: 1.2;
		color: #282828;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.mobile-menu__link[aria-current="page"] {
		color: #E6A226;
	}

	/* "+" that turns into "−" when the submenu is open. */
	.mobile-menu__plus {
		position: relative;
		flex: 0 0 auto;
		width: 21px;
		height: 21px;
	}

	.mobile-menu__plus::before,
	.mobile-menu__plus::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 1.5px;
		background-color: #1D1D1B;
		transform: translateY(-50%);
		transition: transform .2s ease;
	}

	.mobile-menu__plus::after {
		transform: translateY(-50%) rotate(90deg);
	}

	.js-mobile-submenu-toggle[aria-expanded="true"] .mobile-menu__plus::after {
		transform: translateY(-50%) rotate(0deg);
	}

	.mobile-menu__sub {
		padding: 0 0 12px 18px;
	}

	.mobile-menu__sub li {
		padding: 0;
	}

	.mobile-menu__sub a,
	.mobile-menu__sub a:link,
	.mobile-menu__sub a:visited,
	.mobile-menu__sub a:hover,
	.mobile-menu__sub a:active {
		display: block;
		padding: 9px 0;
		border-bottom: 0;
		font-size: 22px;
		line-height: 1.2;
		color: #282828;
		text-decoration: none;
	}

	.mobile-menu__social {
		display: flex;
		gap: 36px;
		margin-top: 30px;
		padding-left: 15px;
	}

	.mobile-menu__social li {
		padding: 0;
	}

	.mobile-menu__social a,
	.mobile-menu__social a:link,
	.mobile-menu__social a:visited,
	.mobile-menu__social a:hover,
	.mobile-menu__social a:active {
		display: block;
		line-height: 0;
		border-bottom: 0;
		padding-bottom: 0;
		color: #000000;
	}

	.mobile-menu__social svg {
		width: 31px;
		height: 31px;
		fill: currentColor;
	}

	.mobile-menu__social .mobile-menu__instagram {
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
	}

	.mobile-menu__instagram-dot {
		fill: currentColor;
		stroke: none;
	}

	.mobile-menu__cart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 53px;
		margin-top: 28px;
		padding: 9px 28px 9px 29px;
		border: 0;
		border-radius: 999px;
		background-color: #ECB89F;
		font-size: 20px;
		line-height: 1.6;
		color: #000000;
		cursor: pointer;
		box-sizing: border-box;
		transition: background-color .15s ease;
	}

	.mobile-menu__cart:hover {
		background-color: #e6a988;
	}

	.mobile-menu__cart svg {
		width: 26px;
		height: 23px;
		fill: #1D1D1B;
		flex: 0 0 auto;
	}
}

@media (min-width: 801px) {
	.mobile-menu {
		display: none;
	}
}

/* ==========================================================================
   Cart drawer — slide-in panel from "Din varukorg", per Figma node 53:14017
   ("Varukorg") / 53:11786 ("Varukorg – OBS", the low-total notice state).
   This is a *view* onto the existing .cart/.chosen-items order flow further
   down the shop page — see cartDrawer in scripts.js. That existing cart is
   intentionally left as-is, unstyled by this section.
   ========================================================================== */
.cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(29, 29, 27, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 10000;
}

.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	max-width: 90vw;
	background-color: #ffffff;
	transform: translateX(100%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	/* Cart drawer Figma view (53:14017) is Neutra Text throughout too,
	   same as the rest of the site — see the note on the body rule
	   above. */
	font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
	color: #1D1D1B;
}

/* Box-shadow only while open — its 24px blur bled a faint line in from
   the right edge even while the drawer sat off-screen at
   translateX(100%), visible on both mobile and desktop. */
body.cart-drawer-open .cart-drawer {
	box-shadow: -8px 0 24px rgba(29, 29, 27, 0.15);
}

body.cart-drawer-open .cart-drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}

body.cart-drawer-open .cart-drawer {
	transform: translateX(0);
}

body.cart-drawer-open {
	overflow: hidden;
}

.cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(29, 29, 27, 0.12);
	flex: 0 0 auto;
}

.cart-drawer__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cart-drawer__basket {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background-color: #ECB89F;
}

.cart-drawer__basket svg {
	width: 16px;
	height: 16px;
	fill: #1D1D1B;
}

.cart-drawer__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: #000000;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.cart-drawer__close {
	background: none;
	border: 0;
	/* Was font-weight:300 (Inter) — after the site-wide Neutra Text switch
	   this inherited NeutraText-Book at that same thin weight, and that
	   font wasn't designed as a symbol font: × rendered as a barely
	   visible hairline. Arial renders × distinctly at any weight, and a
	   heavier weight makes it unambiguous regardless of font. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #1D1D1B;
	cursor: pointer;
	padding: 0;
}

.cart-drawer__items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 24px;
}

.cart-drawer__empty {
	padding: 32px 0;
	color: #5D5D5D;
	font-size: 14px;
	text-align: center;
}

.cart-drawer__item {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(83, 83, 83, 0.25);
}

.cart-drawer__item-image {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 4px;
	background-color: #F3EDDF;
	background-size: cover;
	background-position: center;
}

.cart-drawer__item-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cart-drawer__item-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.cart-drawer__item-name {
	font-size: 13px;
	font-weight: 700;
}

.cart-drawer__item-remove {
	flex: 0 0 auto;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	color: #5D5D5D;
	padding: 0;
}

.cart-drawer__item-remove:hover {
	color: #1D1D1B;
}

.cart-drawer__item-price {
	font-size: 12px;
	color: #5D5D5D;
}

.cart-drawer__item-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
}

.cart-drawer__stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #1D1D1B;
	border-radius: 4px;
	overflow: hidden;
}

.cart-drawer__stepper-btn {
	background: none;
	border: 0;
	width: 26px;
	height: 26px;
	/* Same fix as .cart-drawer__close — thin-weight NeutraText-Book
	   rendered −/+ as near-invisible hairlines. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	color: #1D1D1B;
}

.cart-drawer__stepper-value {
	min-width: 26px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	border-left: 1px solid #1D1D1B;
	border-right: 1px solid #1D1D1B;
	padding: 0 6px;
	line-height: 26px;
}

.cart-drawer__item-total {
	font-size: 13px;
	font-weight: 700;
}

.cart-drawer__notice {
	position: relative;
	margin: 16px 24px;
	padding: 14px 16px;
	background-color: #ECB89F;
	border-radius: 5px;
	font-size: 12px;
	line-height: 1.4;
	color: #000000;
	flex: 0 0 auto;
}

.cart-drawer__notice::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 24px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #ECB89F;
}

.cart-drawer__totals {
	flex: 0 0 auto;
	padding: 0 24px;
}

.cart-drawer__totals-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid rgba(83, 83, 83, 0.1);
	font-size: 13px;
	font-weight: 700;
}

.cart-drawer__totals-row--total {
	font-size: 14px;
}

.cart-drawer__ctas {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px;
}

.cart-drawer__cta {
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
	box-sizing: border-box;
}

.cart-drawer__cta--secondary {
	background-color: #F3EDDF;
	border: 1px solid #1D1D1B;
	color: #1D1D1B;
}

.cart-drawer__cta--secondary:hover {
	background-color: #ffffff;
}

.cart-drawer__cta--primary {
	background-color: #ECB89F;
	border: 0;
	color: #000000;
}

.cart-drawer__cta--primary:hover {
	background-color: #e6a988;
}

.cart-drawer__cta.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.cart-drawer__recommendations {
	flex: 0 0 auto;
	padding: 20px 24px;
	background-color: #F3EDDF;
	border-top: 3px solid #E6A226;
}

.cart-drawer__recommendations h3 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.cart-drawer__recommendation {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #ffffff;
	border-radius: 4px;
	padding: 8px;
}

.cart-drawer__recommendation-image {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	background-color: #F3EDDF;
	background-size: cover;
	background-position: center;
}

.cart-drawer__recommendation-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cart-drawer__recommendation-name {
	font-size: 13px;
	font-weight: 700;
}

.cart-drawer__recommendation-price {
	font-size: 12px;
	color: #5D5D5D;
}

.cart-drawer__recommendation-add {
	flex: 0 0 auto;
	background-color: #ECB89F;
	border: 0;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}

.cart-drawer__recommendation-add:hover {
	background-color: #e6a988;
}

@media (max-width: 480px) {
	.cart-drawer {
		width: 100%;
		max-width: 100vw;
	}
}

/* ==========================================================================
   "Beställning & leverans" content block — per Figma node 77:14518,
   placed right after "Favoriter just nu".
   ========================================================================== */
.order-info,
.sample-teaser,
.video-teaser {
	/* style.css has a bare `main { max-width: 1100px; margin: 0 auto }`
	   tag-selector rule, so every direct child of <main> — these colored
	   sections included — gets clipped to that centered 1100px column
	   instead of running to the real viewport edges. Breaking out with
	   viewport-relative width + negative margins is independent of
	   whatever the parent's own max-width happens to be. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.order-info {
	background-color: #C4D2C4;
	padding: 96px 40px;
}

.order-info__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 80px;
}

.order-info__media {
	position: relative;
	flex: 1 1 420px;
	max-width: 500px;
}

.order-info__frame {
	position: absolute;
	left: -16px;
	bottom: -16px;
	width: 100%;
	height: 100%;
	border: 3px solid #E6A226;
	z-index: 0;
}

.order-info__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.order-info__content {
	flex: 1 1 380px;
	max-width: 480px;
}

.order-info__eyebrow {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1D1D1B;
}

.order-info__text {
	margin: 0 0 32px;
	font-size: 15px;
	line-height: 1.6;
	color: #1D1D1B;
}

.order-info__cta {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid #1D1D1B;
	border-radius: 999px;
	color: #1D1D1B;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.order-info__cta:hover {
	background-color: #ffffff;
}

@media (max-width: 800px) {
	.order-info {
		padding: 30px 24px;
	}

	.order-info__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.order-info__media {
		/* Base rule's `flex: 1 1 420px` sets a *width* basis for the desktop
		   row layout. In this column layout the same basis applies to
		   height instead, stretching the box past the image's real
		   (aspect-ratio-driven) height and detaching .order-info__frame
		   from it. Reset to auto so height comes from content. */
		flex: none;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.order-info__frame {
		left: -10px;
		bottom: -10px;
	}

	.order-info__content {
		/* Same bug: `flex: 1 1 380px` is a desktop-row width basis, read as
		   a height here, leaving dead space below the text/CTA. */
		flex: none;
		width: 100%;
		max-width: 100%;
	}
}

/* ---- Anchor-jump offset ----
   The sticky header (.brasklappar / .mobile-topbar) sits on top of the
   page now, so a plain #anchor jump would land the target flush at y:0,
   half-hidden behind it. scroll-margin-top shifts the "landed" position
   down by the header's own live-measured height (same --header-height
   var the hero's min-height calc uses), on both desktop and mobile. */
#om-bakery,
#favoriter-just-nu,
#vart-sortiment {
	scroll-margin-top: var(--header-height);
}

/* Category headings get 20px more breathing room below the sticky header
   than the other anchor targets above — request 2026-09-16. Also mirrored
   in the #nycatmeny click handler in scripts.js: that handler bypasses
   the native #anchor jump (preventDefault, animates scrollTop by hand),
   so this scroll-margin-top alone only covers the fallback paths (no-JS,
   direct #hash URL, browser back/forward) — the JS's own manually
   computed offset needs the same +20 or clicking a category in the nav
   bar would land 20px short of where a plain hash jump now would. */
.shop__category__anchor {
	scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ==========================================================================
   Site footer — per Figma node 75:9178 ("Footer").
   ========================================================================== */
.site-footer {
	background-color: #ECB89F;
	padding: 56px 40px 0;
}

.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
}

.site-footer__brand {
	flex: 1 1 260px;
	max-width: 300px;
}

.site-footer__logo {
	display: block;
	height: 44px;
	width: auto;
	margin-bottom: 20px;
}

.site-footer__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #1D1D1B;
}

.site-footer__nav {
	flex: 1 1 160px;
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__nav-list a {
	color: #1D1D1B;
	text-decoration: none;
	font-size: 14px;
}

.site-footer__nav-list a:hover {
	color: #ffffff;
}

.site-footer__contact {
	flex: 1 1 260px;
	max-width: 320px;
	display: flex;
	gap: 48px;
}

.site-footer__eyebrow {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1D1D1B;
}

.site-footer__contact-col p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.45;
	color: #1D1D1B;
}

.site-footer__contact-col a {
	color: #1D1D1B;
	text-decoration: none;
}

.site-footer__contact-col a:hover {
	color: #ffffff;
}

.site-footer__social {
	display: flex;
	gap: 16px;
}

.site-footer__social a {
	display: inline-flex;
}

.site-footer__social svg {
	width: 25px;
	height: 25px;
	fill: #1D1D1B;
}

.site-footer__social a:hover svg {
	fill: #ffffff;
}

.site-footer__divider {
	max-width: 1200px;
	margin: 0 auto;
	height: 3px;
	background-color: #E6A226;
}

.site-footer__copyright {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 0;
	font-size: 10px;
	color: #1D1D1B;
}

@media (max-width: 800px) {
	.site-footer {
		padding: 40px 24px 0;
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 32px;
	}

	/* Same flex-basis-flips-axis bug as .order-info__media/.sample-teaser__media
	   (see gotchas.md): these three carry `flex: 1 1 <px>` sized for the
	   desktop row layout. Once .site-footer__inner switches to
	   flex-direction: column, that basis is read as a *height*, stretching
	   each section (260px/160px/260px) well past its actual content and
	   producing the oversized gaps between brand/nav/contact. */
	.site-footer__brand,
	.site-footer__nav,
	.site-footer__contact {
		flex: none;
		width: 100%;
	}

	.site-footer__contact {
		max-width: 100%;
	}
}

/* ==========================================================================
   "Provpåse" teaser — per Figma nodes 33:23047-33:23051, right before the
   footer. Same media+content two-column pattern as .order-info, but sits
   on the plain page background (no tinted panel in Figma for this one).
   ========================================================================== */
.sample-teaser {
	/* Missed on the first pass — Figma has a full-width #C4D2C4 rectangle
	   (node 33:22615, "Rectangle 7") behind this whole section, same
	   sage green as .order-info. It wasn't near the Provpåse text nodes
	   in the source, only findable by its y-position (12112-12650,
	   spanning the Provpåse content exactly). */
	background-color: #C4D2C4;
	padding: 96px 40px;
}

.sample-teaser__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 80px;
}

.sample-teaser__media {
	position: relative;
	flex: 1 1 420px;
	max-width: 500px;
}

.sample-teaser__frame {
	position: absolute;
	left: -16px;
	bottom: -16px;
	width: 100%;
	height: 100%;
	border: 3px solid #E6A226;
	z-index: 0;
}

.sample-teaser__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.sample-teaser__content {
	flex: 1 1 380px;
	max-width: 480px;
}

.sample-teaser__eyebrow {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1D1D1B;
}

.sample-teaser__text {
	margin: 0 0 32px;
	font-size: 15px;
	line-height: 1.6;
	color: #1D1D1B;
}

.sample-teaser__cta {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid #1D1D1B;
	border-radius: 999px;
	color: #1D1D1B;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.sample-teaser__cta:hover {
	background-color: #F3EDDF;
}

@media (max-width: 800px) {
	.sample-teaser {
		padding: 30px 24px;
	}

	.sample-teaser__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.sample-teaser__media {
		/* Same flex-basis-flips-axis bug as .order-info__media — see the
		   gotcha note in .agent/knowledge/gotchas.md. */
		flex: none;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.sample-teaser__frame {
		left: -10px;
		bottom: -10px;
	}

	.sample-teaser__content {
		/* Same bug as .order-info__content — see gotchas.md. */
		flex: none;
		width: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   Category "Se fler …" — cap each category at 6 visible products, reveal
   the rest on click. .shop__category__item is display:inline-block (see
   style.css), a wrapping inline-flow layout — unlike a CSS grid, toggling
   display:none → inline-block on individual items reflows cleanly with no
   leftover gaps, so a plain display swap + a fade/slide-in on top of it is
   enough for a "subtle" reveal without fighting the grid.
   ========================================================================== */
.shop__category__item--overflow {
	display: none;
}

.shop__category__items.is-expanded .shop__category__item--overflow {
	display: inline-block;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.shop__category__items.is-expanded.is-revealed .shop__category__item--overflow {
	opacity: 1;
	transform: translateY(0);
}

.shop__category__show-more {
	display: block;
	margin: 24px auto 0;
	padding: 12px 28px;
	background: none;
	border: 1px solid #1D1D1B;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1D1D1B;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.3s ease;
}

.shop__category__show-more:hover {
	background-color: #F3EDDF;
}

.shop__category__show-more.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Video section — per Figma node 33:22649 ("Rectangle 6"), right before the
   footer. rgba(93,93,93,1) confirmed as the correct fill (matches the raw
   sampled #5D5D5D — this one stays grey, unlike order-info/sample-teaser's
   sage green). Clicking it reuses .js-toggle-video (see showHideVideo() in
   scripts.js) — the exact same overlay/autoplay-with-sound behavior as the
   hero's own "Se videon om By the Bakery" button, just a second entry
   point into it.
   ========================================================================== */
.video-teaser {
	background-color: rgba(93, 93, 93, 1);
	padding: 96px 40px;
}

.video-teaser__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.video-teaser__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	background: none;
}

.video-teaser__thumbnail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-teaser__play::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 27, 0.3);
	transition: background-color 0.15s ease;
}

.video-teaser__play:hover::after {
	background: rgba(29, 29, 27, 0.4);
}

.video-teaser__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.video-teaser__play:hover .video-teaser__icon {
	transform: translate(-50%, -50%) scale(1.08);
}

.video-teaser__icon svg {
	width: 22px;
	height: 22px;
	fill: #1D1D1B;
	margin-left: 3px;
}

.video-teaser__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 2;
	text-align: center;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 800px) {
	.video-teaser {
		padding: 64px 24px;
	}
}

/* ==========================================================================
   Checkout page — Figma "Kund-id" (44:11240) / "Ny kund" (77:14313)
   New standalone page (pages/page-checkout.php) at /kassa/. Confirmed
   2026-09-15 to have full feature parity with the old footer cart
   (same fields, delivery-time picker, vat/total calc, 200kr minimum,
   same mailer.php submit contract) — see decisions.md.
   ========================================================================== */

.page-checkout {
	max-width: none;
	padding: 0;
}

/* ---- Old footer cart: hidden, not deleted (2026-09-15) ----
   `/kassa/` now fully replaces it (confirmed above). Markup and JS
   (article.cart.next-disabled, formFunction, cartStepFunction in
   scripts.js) are left completely in place — this is a pure visual hide,
   easy to revert, kept as a working reference until this whole block
   (markup + JS) is deleted outright in a later pass (see decisions.md
   "Checkout moved to its own page" for the removal checklist).
   cartDrawer/checkoutPage keep working: they read .chosen-items/.moms/
   .end-price via plain selectors, which still work on hidden elements —
   only paint is affected, not the DOM/JS.
   Targets `.cart` alone, NOT `.cart.next-disabled` — addRemoveItems.
   toggleTooltip() in scripts.js actively removes the `next-disabled`
   class once the order total reaches 200kr, so a selector requiring that
   class would make the old cart pop back into view past that threshold. */
.cart {
	display: none;
}

/* .page-pusher only ever existed to reserve space for .cart's fixed
   bottom bar so it wouldn't cover the real footer (see footer.php) —
   NOT a no-op now that .cart is hidden above: jQuery's .height(), used by
   setPusherSize() in scripts.js, briefly un-hides a display:none element
   to measure the size it WOULD have if shown (its normal `swap()`
   dimension-reading trick), so it was still reporting .cart's ~91px
   height and recreating the exact "ugly margin against the footer" this
   was originally built to prevent — just now permanently, since .cart
   never becomes visible again to justify the space. */
.page-pusher {
	display: none;
}

.checkout {
	background-color: #F3EDDF;
	padding: 64px 40px 96px;
}

.checkout__inner {
	max-width: 1040px;
	margin: 0 auto;
	display: grid;
	/* minmax(0, …), not bare 1fr: a 1fr track's minimum is the column's
	   min-content width, so any unbreakable row inside it (the step
	   indicator) would widen the column past the viewport on mobile and
	   drag every field + the summary card out with it. */
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	align-items: start;
}

.checkout__header {
	margin-bottom: 32px;
}

.checkout__title {
	font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	color: #1D1D1B;
	margin: 0 0 20px;
	text-transform: uppercase;
}

.checkout__steps {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.checkout__step {
	display: flex;
	align-items: center;
	gap: 8px;
}

.checkout__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	border: 1px solid #ECB89F;
	font-weight: 700;
	font-size: 12px;
	color: #736B66;
}

.checkout__step.is-active .checkout__step-num {
	background-color: #ECB89F;
	border-color: #ECB89F;
	color: #1D1D1B;
}

.checkout__step-label {
	font-weight: 500;
	font-size: 14px;
	color: #000000;
}

.checkout__step.is-active .checkout__step-label {
	font-weight: 700;
	color: #1D1D1B;
}

.checkout__step-line {
	width: 40px;
	height: 0;
	border-top: 2px solid #ECB89F;
}

.checkout__section-title {
	font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: #1D1D1B;
	margin: 0 0 16px;
}

/* style.css and the .checkout__fields grid below both set `display` on
   elements the checkout toggles with the `hidden` attribute (new/existing
   customer fields, headings, summary notices) — which silently beats the
   browser's own [hidden] rule and left e.g. the new-customer fields
   visible for existing customers. */
.checkout [hidden] {
	display: none !important;
}

/* ---- Delivery day + time: forced first step (2026-09-28) ----
   Calendar always open (flatpickr inline, date only) next to a separate,
   required time <select>. See checkoutPage.initDeliveryPicker. */
.checkout__when {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 16px 32px;
	align-items: start;
	margin-bottom: 32px;
}

.checkout__when-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	color: #1D1D1B;
	margin: 0 0 12px;
}

.checkout__when-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #ECB89F;
	font-size: 12px;
	line-height: 1;
}

/* flatpickr inline calendar, restyled to the checkout's cards. */
.checkout__when .flatpickr-calendar.inline {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 1px solid rgba(83, 83, 83, 0.25);
	border-radius: 8px;
	font-size: 15px;
}

.checkout__when .flatpickr-calendar.inline:before,
.checkout__when .flatpickr-calendar.inline:after {
	display: none;
}

.checkout__when .flatpickr-rContainer {
	display: block;
	max-width: none;
}

.checkout__when .flatpickr-month {
	height: 36px;
	line-height: 28px;
	font-weight: 700;
	color: #1D1D1B;
}

.checkout__when .flatpickr-next-month:hover,
.checkout__when .flatpickr-prev-month:hover,
.checkout__when .flatpickr-next-month svg:hover,
.checkout__when .flatpickr-prev-month svg:hover {
	color: #1D1D1B;
	fill: #1D1D1B;
}

.checkout__when span.flatpickr-weekday {
	font-size: 12px;
	font-weight: 500;
	color: #5D5D5D;
}

/* style.css gives every number input a white box; the year field here is
   a header control, not a form field. */
.checkout__when .flatpickr-current-month input.cur-year {
	display: inline-block;
	width: 4.5ch;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
}

/* Flex grid rather than flatpickr's own inline-block days, which wrap to
   8 per row once the calendar is wider than its default 19rem. */
.checkout__when .flatpickr-days {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.checkout__when .flatpickr-day {
	flex: 0 0 14.2857%;
	width: 14.2857%;
	max-width: none;
	height: 40px;
	line-height: 38px;
	font-weight: 500;
	color: #1D1D1B;
}

.checkout__when .flatpickr-day:hover,
.checkout__when .flatpickr-day:focus {
	background-color: #F3EDDF;
	border-color: #F3EDDF;
}

/* !important: style.css sets .today / .selected colours with !important
   (the shop page's old picker), which no selector here could outrank. */
.checkout__when .flatpickr-day.today,
.checkout__when .flatpickr-day.today:hover {
	background: transparent !important;
	border-color: transparent !important;
	color: rgba(29, 29, 27, 0.25);
}

.checkout__when .flatpickr-day.selected,
.checkout__when .flatpickr-day.selected:hover,
.checkout__when .flatpickr-day.selected:focus {
	background: #1D1D1B !important;
	border-color: #1D1D1B !important;
	color: #FFFFFF;
}

.checkout__when .flatpickr-day.disabled,
.checkout__when .flatpickr-day.disabled:hover,
.checkout__when .flatpickr-day.prevMonthDay,
.checkout__when .flatpickr-day.nextMonthDay {
	color: rgba(29, 29, 27, 0.25);
	background: transparent;
	border-color: transparent;
}

/* Time: a big, labelled control of its own instead of flatpickr's small
   hour/minute fields — customers kept missing those. */
.checkout__time-field {
	position: relative;
	display: block;
	max-width: 240px;
}

.checkout__time-field:after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #1D1D1B;
	border-bottom: 2px solid #1D1D1B;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* 16px keeps iOS from zooming in when the select takes focus. */
select.checkout__delivery-time {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 14px 44px 14px 18px;
	background-color: #FFFFFF;
	background-image: none;
	border: 2px solid #1D1D1B;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: #1D1D1B;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.checkout__when-step--time.needs-attention select.checkout__delivery-time {
	border-color: #D9822B;
	box-shadow: 0 0 0 4px rgba(236, 184, 159, 0.6);
	animation: checkout-attention 1.2s ease-out 1;
}

.checkout__when-step--time.needs-attention .checkout__when-num {
	background-color: #D9822B;
	color: #FFFFFF;
}

@keyframes checkout-attention {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
	.checkout__when-step--time.needs-attention select.checkout__delivery-time {
		animation: none;
	}
}

.checkout__when-hint {
	font-size: 13px;
	color: #5D5D5D;
	margin: 10px 0 0;
}

.checkout__when-status {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 16px;
	border-radius: 5px;
	background-color: #ECB89F;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #000000;
}

.checkout__when-status.is-complete {
	background-color: #FFFFFF;
	border: 1px solid rgba(83, 83, 83, 0.25);
	font-weight: 700;
}

.checkout__when-status.is-complete:before {
	content: '\2713';
	margin-right: 8px;
}

/* Customer details stay locked (a disabled <fieldset> also keeps them
   out of the submitted form) until both day and time are chosen. */
.checkout__details {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.checkout__details:disabled > :not(.checkout__details-locked) {
	opacity: 0.4;
}

.checkout__details-locked {
	display: none;
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 14px;
	color: #1D1D1B;
}

.checkout__details:disabled .checkout__details-locked {
	display: block;
}

.checkout__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
	margin-bottom: 24px;
}

.checkout__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.checkout__field label {
	font-weight: 700;
	font-size: 13px;
	color: #1D1D1B;
}

.checkout__field input {
	background-color: #FFFFFF;
	border: 1px solid rgba(83, 83, 83, 0.25);
	border-radius: 4px;
	padding: 12px 14px;
	font-weight: 300;
	font-size: 14px;
	color: #1D1D1B;
}

.checkout__field input::placeholder {
	color: #5D5D5D;
}

.checkout__weekly-note {
	font-weight: 500;
	font-size: 15px;
	color: #000000;
	margin: 0 0 32px;
}

.checkout__weekly-note a {
	color: #000000;
}

.checkout__customer {
	padding-top: 24px;
	border-top: 1px solid rgba(83, 83, 83, 0.25);
}

.checkout__customer-heading {
	margin-bottom: 16px;
}

.checkout__agree {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 13px;
	color: #1D1D1B;
	cursor: pointer;
}

.checkout__agree input {
	width: 16px;
	height: 16px;
	accent-color: #ECB89F;
}

.checkout__agree a {
	color: #1D1D1B;
	text-decoration: underline;
}

.checkout__summary {
	background-color: #FFFFFF;
	border: 1px solid rgba(83, 83, 83, 0.25);
	border-radius: 8px;
	padding: 24px;
	position: sticky;
	top: calc(var(--header-height) + 24px);
}

.checkout__summary-title {
	font-family: 'NeutraText-Book', 'Inter', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 28px;
	color: #1D1D1B;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.checkout__summary-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.checkout__summary-item {
	display: flex;
	gap: 12px;
}

.checkout__summary-item-image {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background-color: #F3EDDF;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.checkout__summary-item-body {
	flex: 1;
	min-width: 0;
}

.checkout__summary-item-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #1D1D1B;
}

.checkout__summary-item-meta {
	font-weight: 500;
	font-size: 12px;
	color: #5D5D5D;
	margin-top: 2px;
}

.checkout__summary-empty {
	font-weight: 500;
	font-size: 14px;
	color: #5D5D5D;
	margin: 0;
}

.checkout__summary-notice {
	background-color: #ECB89F;
	border-radius: 5px;
	padding: 14px 16px;
	font-size: 12px;
	line-height: 1.4;
	color: #000000;
	margin: 0 0 20px;
}

.checkout__summary-empty a {
	color: #1D1D1B;
	text-decoration: underline;
}

.checkout__summary-divider {
	display: block;
	height: 1px;
	background-color: rgba(83, 83, 83, 0.25);
	margin: 20px 0;
}

.checkout__summary-totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.checkout__summary-row {
	display: flex;
	justify-content: space-between;
	font-weight: 500;
	font-size: 13px;
	color: #5D5D5D;
}

.checkout__summary-row span:last-child {
	color: #1D1D1B;
}

.checkout__summary-row--total {
	font-weight: 700;
	font-size: 18px;
	color: #1D1D1B;
}

.checkout__summary-row--total span {
	color: #1D1D1B;
}

.checkout__submit {
	display: block;
	width: 100%;
	background-color: #ECB89F;
	border: 0;
	border-radius: 500px;
	padding: 16px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000000;
	cursor: pointer;
}

.checkout__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.checkout__toggle-customer-type {
	display: block;
	width: 100%;
	background: none;
	border: 1px solid #000000;
	border-radius: 500px;
	padding: 14px;
	font-weight: 500;
	font-size: 15px;
	color: #000000;
	cursor: pointer;
}

.checkout--success,
.checkout--error {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
}

.checkout--success__text p:first-child,
.checkout--error__text p:first-child {
	font-weight: 700;
	font-size: 24px;
	color: #1D1D1B;
	margin: 16px 0 8px;
}

@media (max-width: 900px) {
	.checkout {
		padding: 40px 24px 64px;
	}

	.checkout__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout__when {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout__time-field {
		max-width: none;
	}

	.checkout__summary {
		position: static;
	}
}

/* Steps indicator: three steps + two 40px connectors are ~390px wide at
   the desktop size — wider than a phone's content box. Let the connectors
   shrink first, then tighten type/gaps so all three labels still fit on
   one line down to a 320px viewport. */
@media (max-width: 480px) {
	.checkout {
		padding-left: 20px;
		padding-right: 20px;
	}

	.checkout__steps {
		gap: 6px;
	}

	.checkout__step {
		gap: 6px;
		flex: 0 0 auto;
	}

	.checkout__step-num {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}

	.checkout__step-label {
		font-size: 13px;
	}

	.checkout__step-line {
		flex: 1 1 40px;
		width: auto;
		min-width: 8px;
		max-width: 40px;
	}

}