/* ------------------------------------------------------------------
   Dalafisk header
   ------------------------------------------------------------------
   Ported from HTMLdesigns/ (.topp). Design class names mapped to the
   theme's vocabulary, and Pinnacle's own component classes restyled in
   place so their wiring is kept:

     topp          -> .header.customHeaderStyle      (Pinnacle root)
     wrap          -> .dalafisk-header__wrap
     marke         -> .logolink                      (Pinnacle logo)
     marke__skylt  -> .logoimg
     huvudnav      -> .dalafisk-nav__list
     navlank       -> .dalafisk-nav__link
     mega          -> .dalafisk-mega
     mega__grupp   -> .dalafisk-mega__group
     mega__kol     -> .dalafisk-mega__col
     verktyg       -> .dalafisk-header__tools
     ikonknapp     -> .dalafisk-header__icon / .thb-secondary-area--item
     hamburgare    -> .thb-header-mobile-left
     sokfalt       -> search-form.searchform
     data-krympt   -> [data-dalafisk-shrunk]
     data-sok      -> [data-dalafisk-search]

   Breakpoint is the design's own 920/921px, not Pinnacle's.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Page chrome geometry
   ------------------------------------------------------------------
   The design does NOT stack announcement / header / content in a column.
   All three are separate fixed layers:

     .annons  top:3px, inset 15px, 36px tall, DARK, radius 15px 15px 0 0
     .topp    top:54px, transparent — it FLOATS OVER the hero
     .hero    starts at the very top of the page, radius 15px

   The dark bar's rounded top corners cap the hero's, which is why the two
   read as one block in the mockup. Rendering the header as an opaque band
   above the hero — which is what a stacked layout gives you — is the single
   biggest visual difference from the design, and a header-only screenshot
   cannot show it.

   The square BOTTOM corners belong to the landing page alone, and only
   because the hero is tucked under them. Every other design page — category,
   product, recipe, about, recipe index — sets `.annons { border-radius: 15px }`
   with nothing beneath it to cap, so the bar is a rounded block floating on
   white. See the template rule under the bar below.
   ------------------------------------------------------------------ */
:root {
	--dalafisk-chrome-top: calc(var(--dalafisk-announcement-gap, 3px) + var(--dalafisk-announcement-height, 36px) + 15px);
	/* WHERE THE HEADER ROW ACTUALLY IS — not where it is at rest.
	   `--dalafisk-chrome-top` is the at-rest offset; the shrink state moves the
	   row 40px up on phones and 59px on desktop. The three panels that hang off
	   the tools pill (predictive search, the search empty state, the cart) are
	   `position: fixed` on phones and were pinned to the AT-REST value, so
	   opening any of them on a scrolled page left the panel floating 40px below
	   the pill: the close button and the field sat on the page above it, the
	   panel's 58px of top padding became a bare white strip, and the whole thing
	   read as broken. Both the row and the panels now read this one token.

	   The design has the same latent bug — `.sokpanel { top: 74px }` is a
	   constant while `.topp[data-krympt="1"]` moves to 14px — which is why there
	   is nothing to port here. */
	--dalafisk-header-top: var(--dalafisk-chrome-top);
	/* The shrink used to run on three clocks — bar .25s, header .25s, sign .38s —
	   so the sign was still moving 130ms after the row had stopped, which reads
	   as lag. Everything that moves on the shrink now shares this one. */
	--dalafisk-shrink-clock: .32s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- announcement bar: the dark cap ---------- */
.header-announcement-bar {
	position: fixed;
	top: var(--dalafisk-announcement-gap, 3px);
	left: var(--dalafisk-announcement-inset, 15px);
	right: var(--dalafisk-announcement-inset, 15px);
	z-index: 99;
	height: var(--dalafisk-announcement-height, 36px);
	border-radius: 15px 15px 0 0;
	overflow: hidden;
	transition: transform var(--dalafisk-shrink-clock);
}
/* Rounded on all four corners everywhere the hero does not cap it. The landing
   page keeps the square bottom, which is why this is keyed off the template
   class Pinnacle puts on <body> rather than applied to the base rule. */
body:not(.template-index) .header-announcement-bar {
	border-radius: 15px;
}
.header-announcement-bar .announcement-bar {
	height: 100%;
	min-height: 0;
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
	border: 0;
	font-size: 13px;
	letter-spacing: normal;
}
.header-announcement-bar .announcement-bar--inner {
	height: 100%;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 18px;
}
.header-announcement-bar .announcement-bar--center {
	margin: 0;
	text-align: center;
}
/* The design's bar leads with a truck glyph. The announcement text is a
   richtext setting, so the icon is added here rather than pushed into the
   merchant's copy. Path is taken from snippets/dalafisk-icons.liquid (ui-truck). */
.header-announcement-bar .announcement-bar--center::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-right: 9px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.85%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2018H9%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.header-announcement-bar .announcement-bar--center {
	display: flex;
	align-items: center;
	/* Without this the centred flex item keeps its content width, overflows the
	   bar and gets sliced off at BOTH ends by the .header-announcement-bar
	   overflow:hidden — the ellipsis below never gets a chance to apply. */
	min-width: 0;
}
.header-announcement-bar .announcement-bar--center p {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--dalafisk-white);
}
/* The design sets the lead sentence in medium, separates with a small dot and
   drops the trailing clause on narrow screens rather than truncating it.
   sections/announcement-bar.liquid splits the merchant's copy on "·" into
   these parts. */
.header-announcement-bar .announcement-bar--center b,
.header-announcement-bar .announcement-bar--center strong {
	font-weight: 500;
}
.header-announcement-bar .dalafisk-annons__dot {
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}
.header-announcement-bar .dalafisk-annons__extra {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* The design carries neither social links nor a currency switcher up here.
   The settings are off as well; this is a guard so re-enabling one cannot
   break the bar's height. */
.header-announcement-bar .announcement-bar--left,
.header-announcement-bar .announcement-bar--right {
	display: none;
}
/* The bar tucks in to the hero's own 3px gutter on phones, and sheds the
   trailing clause before it would have to truncate anything. Both breakpoints
   are the design's (640 / 560), not Pinnacle's. */
@media (max-width: 640px) {
	.header-announcement-bar {
		left: var(--dalafisk-announcement-gap, 3px);
		right: var(--dalafisk-announcement-gap, 3px);
	}
}
@media (max-width: 560px) {
	.header-announcement-bar .dalafisk-annons__dot,
	.header-announcement-bar .dalafisk-annons__extra {
		display: none;
	}
}

/* ---------- the header floats over the content ---------- */
.header-section {
	position: fixed;
	top: var(--dalafisk-header-top);
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	/* ONE clock for the whole shrink — see --dalafisk-shrink-clock in :root. */
	transition: top var(--dalafisk-shrink-clock);
}
/* Once the header shrinks the design pulls the whole row tight to the window
   edge and slides the announcement bar up out of view behind it. The bar sits
   BEFORE the header in the section group, so the shrink state is read forwards
   with :has(~ …) rather than the design's plain sibling combinator.

   ON .header-section, NOT :root (2026-09-22). This used to be
   `:root:has(…) { --dalafisk-header-top: -5px }`. A custom property on the
   root is inherited by EVERY element, so each shrink/unshrink toggled the
   computed style of the whole document — measured as a 28-45ms frame exactly
   at the 40px threshold, the "laggar när den åker upp och ner". Scoped to the
   header section the recalc stays inside the header: worst frame 24ms, no
   frame over 25ms in six scripted sweeps. Everything that reads the variable
   (.thb-predictive-search, .dalafisk-search-empty, #Cart-Drawer,
   .dalafisk-mobile-menu) is a descendant of .header-section, so it still
   inherits the right value. Animating `top` itself was measured and costs
   nothing here; `transform` would break the fixed panels inside the header. */
.header-section:has(.header.customHeaderStyle[data-dalafisk-shrunk]) {
	--dalafisk-header-top: -5px;
}
.header-announcement-bar:has(~ .header-section .header.customHeaderStyle[data-dalafisk-shrunk]) {
	transform: translateY(calc(-100% - var(--dalafisk-announcement-gap, 3px)));
}

/* Content starts at the very top, under the floating chrome — but only when
   the page actually opens with a Dalafisk hero to float over. Every other
   template still needs room for the bar, or its first section would slide
   underneath. */
#main-content {
	padding-top: 0;
}
#main-content:not(:has(> .shopify-section:first-child .dalafisk-hero)) {
	/* chrome top (54px) + the header's own height + breathing room. Measured:
	   the header is 86px at desktop and ~70px below the 920px breakpoint. An
	   earlier value of +46px left content sliding 40px under the header on
	   every non-home template. */
	padding-top: calc(var(--dalafisk-chrome-top) + 86px + 16px);
}
@media (max-width: 920px) {
	#main-content:not(:has(> .shopify-section:first-child .dalafisk-hero)) {
		padding-top: calc(var(--dalafisk-chrome-top) + 70px + 12px);
	}
}

.header.customHeaderStyle {
	background: transparent;
	box-shadow: none;
	border: 0;
	/* Pinnacle gutters the header with `padding: 15px 40px`; the design runs the
	   bar edge to edge and gutters the inner wrap instead. */
	padding: 0;
}
/* Pinnacle does not paint the header band on the element itself — it uses two
   full-width pseudo-elements at z-index:-1 (::before opaque, ::after the
   fade-in used by its own sticky mode). Setting `background: transparent`
   above therefore did nothing, and the header read as a solid white bar
   running edge to edge instead of transparent chrome floating over the hero.
   In the design the only white up here is the nav pill and the tool pill. */
.header.customHeaderStyle::before,
.header.customHeaderStyle::after {
	background-color: transparent;
	/* ::after also carries the drop shadow from the header_shadow setting
	   (.header--shadow-medium), which Pinnacle fades in by adding .is-sticky on
	   scroll. With the band transparent that left a shadow hanging under
	   nothing. The design's header has no shadow in any state — the pills carry
	   their own 1px border — so it is cleared here rather than by changing the
	   merchant's header_shadow setting, which would otherwise put it back. */
	box-shadow: none;
}
/* Pinnacle's 1px hairline under the header. The design has no rule under the
   bar — the pills carry their own border. */
.header.customHeaderStyle .header--inner::before {
	display: none;
}
/* .header--inner is a flex container with a 30px gap, so the wrap shrank to its
   content and the grid could never push the tools to the right edge. */
.header.customHeaderStyle .header--inner {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	gap: 0;
}
.dalafisk-header__wrap {
	width: 100%;
}

/* ---------- the bar ---------- */
.dalafisk-header__wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-block: 14px;
	padding-inline: 35px;
	font-size: 15px;
	min-width: 0;
}

/* ---------- logo (the hanging "sign") ---------- */
.header.customHeaderStyle .logolink {
	position: relative;
	z-index: 95;
	display: block;
	width: 169px;
	height: 42px;
	flex: none;
	transition: width var(--dalafisk-shrink-clock);
	margin: 0;
}
.header.customHeaderStyle .logoimg {
	position: absolute;
	top: -14px;
	left: -4%;
	height: 144px;
	width: auto;
	max-width: none;
	transition: height var(--dalafisk-shrink-clock), top var(--dalafisk-shrink-clock);
}
/* The sign hangs from the bar's bottom edge for as long as the bar is on
   screen. Only the SHRUNK row drops it back to the base -14px, because by then
   the bar has slid away and there is nothing to hang from.

   `:not([data-dalafisk-search])` used to be on here too, which sent the search
   state back to the base -14px and left the sign floating 21.2px under a bar
   that was still visible — the "logo ska sitta i kant med annoucement bar"
   note, in the one state that is easiest to miss. The phone rule below never
   excluded search and was already correct. */
.header.customHeaderStyle:not([data-dalafisk-shrunk]) .logoimg {
	top: -33px;
}
.header.customHeaderStyle[data-dalafisk-shrunk] .logolink,
.header.customHeaderStyle[data-dalafisk-search] .logolink {
	width: 70px;
}
.header.customHeaderStyle[data-dalafisk-shrunk] .logoimg,
.header.customHeaderStyle[data-dalafisk-search] .logoimg {
	height: 60px;
}
/* Only the SHRUNK state drops the sign back to its own -14px: by then the
   announcement bar has slid away and there is nothing left to hang from.
   While the search is open the bar is still on screen, so the sign keeps the
   -33px that pins its top edge just under the bar's bottom — the design's
   "skylten hänger i annonslisten". Letting the search state fall back to -14px
   left the sign floating 21.2px below the bar (measured), which is the "logo
   ska sitta i kant med annoucement bar" note. Same reasoning as the mega-menu
   rule below, which already changes height only. */
.header.customHeaderStyle[data-dalafisk-shrunk] .logoimg {
	top: -14px;
}
.header.customHeaderStyle:has(.dalafisk-mega[data-dalafisk-open]) .logolink {
	width: 70px;
}
/* Only the height changes while a mega menu is open — `top` stays at the -33px
   set above, exactly as the design does it. Setting top:-14px here as well used
   to cancel a stray margin in custom-header-logo.css; that margin is gone, so
   this must not reintroduce the offset. */
.header.customHeaderStyle:has(.dalafisk-mega[data-dalafisk-open]) .logoimg {
	height: 60px;
}

/* ---------- pill nav ---------- */
.dalafisk-nav {
	min-width: 0;
	transition: opacity .28s ease .3s;
}
.dalafisk-nav__list {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px;
	margin: 0;
	list-style: none;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 27px;
	transition: border-radius .3s cubic-bezier(.22, 1, .36, 1), border-color .22s ease;
}
.dalafisk-nav__list:has(.dalafisk-mega[data-dalafisk-open]) {
	border-radius: 27px 27px 0 0;
	border-bottom-color: transparent;
}
/* Hides the seam between the pill and an open mega panel. */
.dalafisk-nav__list::after {
	content: "";
	position: absolute;
	z-index: 91;
	left: -1px;
	right: -1px;
	bottom: -1px;
	height: 1px;
	background: var(--dalafisk-white);
	opacity: 0;
	transition: opacity .22s ease;
}
.dalafisk-nav__list:has(.dalafisk-mega[data-dalafisk-open])::after {
	opacity: 1;
	transition: opacity .34s ease;
}
.dalafisk-nav__item {
	position: static;
	margin: 0;
}
.dalafisk-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	padding: 8px 17px;
	font-size: 17px;
	/* A <button> does not inherit line-height from the page, so this was
	   collapsing to 17px and the pill rendered 45px tall against the design's
	   54px. Measured, not guessed. */
	line-height: 1.55;
	font-weight: 500;
	border-radius: 999px;
	background: var(--dalafisk-card-bg);
	color: var(--dalafisk-ink);
	border: 0;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.dalafisk-nav__link:hover,
.dalafisk-nav__link[aria-expanded="true"] {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
}
.dalafisk-nav__chevron {
	display: inline-flex;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-nav__link[aria-expanded="true"] .dalafisk-nav__chevron {
	transform: rotate(180deg);
}

/* ---------- mega panel ---------- */
.dalafisk-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: min(1040px, calc(100vw - 48px));
	z-index: 90;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 26px;
	box-shadow: 0 18px 44px rgba(26, 26, 26, .13);
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 -70px 100% -70px round 26px);
	transition: clip-path .28s cubic-bezier(.4, 0, .6, 1), opacity .22s ease, visibility 0s .28s;
}
.dalafisk-mega[data-dalafisk-open] {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 -70px -70px -70px round 26px);
	transition: clip-path .6s cubic-bezier(.22, 1, .36, 1), opacity .34s ease, visibility 0s;
}
/* The design's `data-direkt`. Set by dalafisk-header.js for one frame on the
   OUTGOING panel while another menu takes over on hover, so its .28s collapse
   does not play against the incoming panel's .6s reveal — without it, sliding
   along the nav shuts the row and reopens it at every pill. */
.dalafisk-mega[data-dalafisk-instant],
.dalafisk-mega[data-dalafisk-instant] .dalafisk-mega__inner {
	transition: none;
}
.dalafisk-mega__inner {
	opacity: 0;
	transform: translateY(8px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding: 22px 26px 24px;
	transition: opacity .16s ease, transform .22s ease;
}
.dalafisk-mega[data-dalafisk-open] .dalafisk-mega__inner {
	opacity: 1;
	transform: none;
	transition: opacity .36s ease .04s, transform .58s cubic-bezier(.22, 1, .36, 1) .04s;
}
/* Icon-grid shape: leaf children become tiles. */
.dalafisk-mega__inner:not(.dalafisk-mega__inner--columns) {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}
.dalafisk-mega__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 22px 14px;
	border-radius: 18px;
	background: var(--dalafisk-card-bg);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	transition: background .15s, color .15s;
}
.dalafisk-mega__group:hover {
	background: #e6e6e6;
}
.dalafisk-mega__group--all {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
}
.dalafisk-mega__group--all:hover {
	background: #000;
}
/* Column shape: a child that has children of its own becomes a list. */
.dalafisk-mega__col h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	margin: 0 0 10px;
}
.dalafisk-mega__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.dalafisk-mega__col a {
	font-size: 15px;
	color: var(--dalafisk-text-2);
}
.dalafisk-mega__col a:hover {
	color: var(--dalafisk-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- tools pill ---------- */
.dalafisk-header__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 5px;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 999px;
}
/* Pinnacle's own icons restyled in place — the markup keeps its wiring.

   THE HAMBURGER IS IN THIS LIST BECAUSE THE DESIGN MAKES IT ONE OF THEM: its
   `.verktyg` holds four identical `.ikonknapp` circles on phones — menu,
   search, account, cart — measured 35/34/34/34 with an even 5px inset at each
   end of the pill. Ours was Pinnacle's bare `.mobile-toggle`: 32x32, no circle,
   no fill, and carrying `margin-left: -7px; margin-right: 10px` (app.css:2472).
   That negative margin put the glyph 2px OUTSIDE the pill's left edge against
   4px of padding on the right — the uneven spacing. Margins are zeroed here;
   the pill's own `gap: 5px` is what separates the icons. */
.dalafisk-header__icon,
.dalafisk-header__tools .mobile-toggle,
.dalafisk-header__tools .thb-secondary-area--item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Measured on the design: the icon box is 42x42 = 11px padding around a
	   20px glyph. A 22px glyph made it 44 and pushed the pill to 56 against
	   the design's 54. */
	padding: 11px;
	line-height: 0;
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dalafisk-card-bg);
	color: var(--dalafisk-ink);
	border: 0;
	margin: 0;
	cursor: pointer;
	transition: color .2s, background .15s;
}

/* The three bars are `position: absolute` at fixed offsets inside Pinnacle's
   32x32 box (`top: 10/16/22; left: 7`). Sizing the button by padding moves the
   box out from under them, so they are re-centred against the padding box
   instead — same 6px apart, so the open-state X (a ±45deg rotation about each
   bar's top-left) is geometrically unchanged. */
.dalafisk-header__tools .mobile-toggle span {
	left: 50%;
	margin-left: -9px;
}
.dalafisk-header__tools .mobile-toggle span:nth-child(1) {
	top: calc(50% - 6.75px);
}
.dalafisk-header__tools .mobile-toggle span:nth-child(2) {
	top: calc(50% - .75px);
}
.dalafisk-header__tools .mobile-toggle span:nth-child(3) {
	top: calc(50% + 5.25px);
}
.dalafisk-header__icon:hover,
.dalafisk-header__tools .thb-secondary-area--item:hover {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
}
.dalafisk-header__tools .thb-secondary-area--item svg,
.dalafisk-header__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}
.dalafisk-header__tools .thb-secondary-area {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	/* Pinnacle sizes this area for captioned icons; with the captions hidden it
	   still reserved ~47px of slack, widening the pill past the design. */
	width: auto;
	min-width: 0;
}
.dalafisk-header__tools .thb-secondary-area--item {
	margin: 0;
	min-width: 0;
}
.dalafisk-header__tools .thb-secondary-area--item-icon {
	display: block;
	line-height: 0;
	width: 20px;
	height: 20px;
}
/* The count hangs off the BUTTON's corner, not off the glyph:
     .korg__antal { position: absolute; top: -2px; right: -6px; min-width: 16px;
                    height: 16px; padding: 0 4px }
   against a 42px `.ikonknapp`. Pinnacle's `.thb-secondary-area--item-icon` is
   itself `position: relative`, so the badge resolved against that 20px box
   instead and sat squarely ON the basket, hiding most of it. Making the wrapper
   static hands the badge back to `.thb-secondary-cart` below. */
.dalafisk-header__tools .thb-secondary-area--item-icon {
	position: static;
}
.dalafisk-header__tools .thb-secondary-area--item-count {
	position: absolute;
	top: -2px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}
.dalafisk-header__tools .thb-secondary-cart {
	position: relative;
}
/* The design shows no icon captions. */
.dalafisk-header__tools .thb-secondary-area--item-text,
.dalafisk-header__tools .thb-secondary-area--item-label,
.dalafisk-header__tools .thb-secondary-area--item-amount {
	display: none;
}
/* Pinnacle's own search icon is redundant next to the design's search toggle. */
.dalafisk-header__tools .thb-secondary-search {
	display: none;
}

/* ---------- collapsing search ---------- */
/* At rest the field is closed to zero width and only the icon shows; opening it
   expands the field inline and fades the nav out, as the design does. */
.dalafisk-header__tools .searchform {
	width: 0;
	padding: 0;
	/* 36px, not the theme's 46px: the design keeps the collapsed field SHORTER
	   than the 44px icon boxes so it never drives the pill's height, and pulls
	   it in by 6px so the closed state leaves no gap. */
	height: 36px;
	margin: 0 -6px 0 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	border-radius: 999px;
	transition: width .6s cubic-bezier(.22, 1, .36, 1), padding .6s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.header.customHeaderStyle[data-dalafisk-search] .searchform {
	width: 300px;
	padding: 0 14px;
	margin-right: 0;
	opacity: 1;
	pointer-events: auto;
	/* The `overflow: hidden` above keeps the field's contents inside the pill
	   while it is animating open from zero width — but it also clipped the
	   predictive-search dropdown, which is a 765px-tall child of this 36px box.
	   The panel was rendering and populating correctly and was simply invisible.
	   Once open there is nothing left to clip, so let it out. */
	overflow: visible;
}
.dalafisk-header__tools .searchform form,
.dalafisk-header__tools .searchform .searchform--form {
	height: 100%;
	min-height: 0;
}

/* ---------- predictive search panel ----------
   The design's `.sokpanel` is a sibling of the tools pill, absolutely placed on
   the header wrap at `top:14px; right:35px; width:408px` — which lands exactly
   on the pill's own box, because the pill also grows to 408px while the search
   is open. The pill then sits ON the panel at z-index 131 and the panel's 54px
   top padding leaves room for it, so the field reads as the panel's top row.

   Pinnacle nests its panel INSIDE the field instead, so it cannot be anchored to
   the pill the same way: `.searchform--form` is position:relative and also the
   containing block for `.thb-search-submit`, so making it static to re-anchor
   the panel would throw the submit button across the header. The panel is
   therefore offset back out to the pill's edges. Both numbers are derived from
   this stylesheet's own tokens, not eyeballed:
     left  -20px  = searchform padding-left 14 + pill padding 5 + pill border 1
     right -122px = padding-right 14 + gap 6 + (toggle 0) + gap 6 + icon 42
                    + gap 6 + icon 42 + pill padding 5 + pill border 1
   If a third icon is ever added to the tools pill, `right` is what changes. */
.header.customHeaderStyle .thb-predictive-search {
	top: calc(-1 * (54px - 36px) / 2);
	left: -20px;
	right: -122px;
	width: auto;
	z-index: 90;
	max-height: calc(100vh - 110px);
	/* THE PANEL ITSELF MUST NOT SCROLL. Its 66px of top padding is what keeps
	   the content clear of the search field — and the field is lifted ABOVE the
	   panel (see the rule below), with nothing opaque behind it. Scrolling the
	   panel scrolled that padding away too, so results slid up UNDER the field
	   and the header icons: the top of the panel became a pile of overlapping
	   rows with two magnifiers in it. The scroll belongs to the inner container,
	   which begins below the padding — then the panel's top is a fixed opaque
	   strip and the results pass behind it, the way the design's mobile search
	   bar sits above its list. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
	/* The rows reflow on the PANEL's width, not the viewport's — see the row
	   rules further down. */
	container-type: inline-size;
	container-name: dalafisk-search;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(26, 26, 26, .13);
	/* 66px, not the field's 54px: the design leaves only ~9px between the
	   field and the first heading and it read as cramped. Same value on both
	   panels so the spacing does not jump when a query replaces the empty
	   state. */
	padding: 66px 18px 20px;
}
.header.customHeaderStyle .thb-predictive-search--container,
.dalafisk-search-empty__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* The footer ("Visa alla N träffar") stays put while the results scroll. */
.header.customHeaderStyle .thb-predictive-search--footer {
	flex: none;
}

/* One button, two glyphs — search when closed, X when open. See the markup in
   snippets/custom-header-style.liquid. */
.header.customHeaderStyle .dalafisk-header__search-icon {
	display: inline-flex;
	line-height: 0;
}
.header.customHeaderStyle .dalafisk-header__search-toggle [data-icon-close],
.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__search-toggle [data-icon-search] {
	display: none;
}
.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__search-toggle [data-icon-close] {
	display: inline-flex;
}

/* The design keeps the whole pill above the panel. Here the panel is a sibling
   of the input inside that pill, so the field itself has to be lifted instead —
   otherwise the panel's top padding paints straight over it. */
.header.customHeaderStyle .searchform .search-field,
.header.customHeaderStyle .searchform .thb-search-submit {
	position: relative;
	z-index: 91;
}
/* The design's field is a pill: `.sokfalt { height: 36px; border-radius: 18px }`.
   The wrapper already carries 999px, but the visible box is Pinnacle's input,
   which kept its own `border-radius: 10px` and 46px height — a rounded rectangle
   sitting inside a pill-shaped tool row. That is the "gör helt rund" note. */
.header.customHeaderStyle .searchform .search-field {
	height: 36px;
	min-height: 0;
	border-radius: 999px;
}

/* Panel internals, mapped onto Pinnacle's markup:
     .sok__rubrik  -> .thb-predictive-search--label
     .sok__kol     -> .thb-predictive-search--content
     .sok__rad     -> .predictive-search__item
     .sok__produkt -> product-card.product-cart-item
     .sok__fot     -> .thb-predictive-search--footer
   Pinnacle gutters each block with `padding: 13px 20px`; the design gutters the
   panel once (18px) and lets the rows run full width inside it, so the inner
   horizontal padding is dropped rather than nested. */
.header.customHeaderStyle .thb-predictive-search--label {
	/* NOT STICKY. predictive-search.css:26-29 pins every label at `top: 0` of the
	   scroller, which works in Pinnacle's own panel but not here: scroll this one
	   and FÖRSLAG, I KATEGORIER and PRODUKTER all pile up on the same pixel row,
	   the later ones painting over the earlier (all three measured at y=135 after
	   a 150px scroll). What the visitor sees is two or three headings stacked with
	   no content under them and one of them unreadable. The design's `.sok__rubrik`
	   has no position at all — the headings simply scroll with their section. */
	position: static;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 0 10px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--dalafisk-text-5);
	border-bottom: 1px solid #e2e2e2;
}
.header.customHeaderStyle .thb-predictive-search--content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 0;
}
/* 22px between sections, the gap the design's .sok__traff grid uses. */
.header.customHeaderStyle .thb-predictive-search--content + .thb-predictive-search--label {
	margin-top: 22px;
}
.header.customHeaderStyle .predictive-search__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 2px 0;
	font-size: 16px;
	color: var(--dalafisk-ink);
}
/* Shopify marks the matched part of a suggestion with <mark>, and nothing in the
   theme styles it — so the browser's default won and a suggestion whose whole
   text matched the query rendered as a solid YELLOW block. The design bolds the
   match instead (`fet()`), which is also what Pinnacle does for product names
   through `| highlight` -> `.highlight`. */
.header.customHeaderStyle .thb-predictive-search mark {
	background: none;
	color: inherit;
	font-weight: var(--font-body-medium-weight, 500);
}
.header.customHeaderStyle .product-cart-item {
	align-items: center;
	gap: 12px;
	padding: 9px 0;
}
.header.customHeaderStyle .product-cart-item .product-cart-item-image,
.header.customHeaderStyle .product-cart-item .product-cart-item-image a,
.header.customHeaderStyle .product-cart-item .product-cart-item-image img {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 12px;
	object-fit: cover;
}
.header.customHeaderStyle .product-cart-item .product-cart-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 15px;
}
.header.customHeaderStyle .product-cart-item .price {
	font-size: 15px;
}
.header.customHeaderStyle .thb-predictive-search--footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 18px 0 0;
	margin: 22px 0 0;
	border-top: 1px solid #e2e2e2;
}

/* ---------- search: empty state ----------
   Pinnacle renders nothing until there is input, which left the styled panel
   shell standing empty on screen. This is the design's pre-typing content.

   Unlike the predictive panel it is NOT nested in the field, so it can take the
   design's own anchoring verbatim: absolute on the header (theme-header is the
   nearest positioned ancestor) at top:14px / right:35px / width:408px, which is
   exactly `.sokpanel`'s rule. */
.dalafisk-search-empty {
	position: absolute;
	/* Pinned to the tools pill's own box, so the panel is always exactly as wide
	   as the pill. Hard-coding the design's 408px instead left a 6px crescent of
	   pill showing past the panel's top-left corner, because this pill is 414px.
	   `.dalafisk-header__tools` is made position:relative below, desktop only. */
	/* -1px, not 0: offsets resolve against the pill's PADDING box, so a flush 0
	   left the pill's own 1px border showing as a hairline around the panel.
	   Pulling out by the border width lands the panel on the pill's border box
	   exactly, and the panel's identical 1px border takes its place. */
	top: -1px;
	left: -1px;
	right: -1px;
	z-index: 89;
	max-height: calc(100vh - 110px);
	/* Same reason as the results panel above — this one scrolls too once
	   "Veckans fångst" has a few products in it. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
	/* The rows reflow on the PANEL's width, not the viewport's — see the row
	   rules further down. */
	container-type: inline-size;
	container-name: dalafisk-search;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(26, 26, 26, .13);
	/* 66px, not the field's 54px: the design leaves only ~9px between the
	   field and the first heading and it read as cramped. Same value on both
	   panels so the spacing does not jump when a query replaces the empty
	   state. */
	padding: 66px 18px 20px;
}
.dalafisk-search-empty[hidden] {
	display: none;
}
/* Pinnacle's panel element stays in the DOM with nothing in it while the field
   is empty, and it sits one layer above this one — so it drew an empty white
   box over the top of the empty state. Take it out until there is a query. */
.header.customHeaderStyle[data-dalafisk-search-idle] .thb-predictive-search {
	display: none;
}
/* Desktop only: the mobile menu DRAWER is a descendant of the tools pill and
   currently resolves against theme-header, so making the pill a containing
   block below 921px would re-anchor the drawer to a 400px-wide pill. Above it
   the drawer is display:none and nothing else here is absolutely placed. */
@media (min-width: 921px) {
	.header.customHeaderStyle .dalafisk-header__tools {
		position: relative;
	}
}
/* In the design the pill's contents sit ON the open panel — that is what the
   54px of top padding is for. The field was already lifted for the predictive
   panel; the account and cart icons need the same, or the panel covers them.

   The lift goes on the ICONS rather than on `.thb-secondary-area` itself, to
   avoid touching <cart-drawer>'s containing block — the drawer is a child of
   that element. (app.css already sets `position: relative` there, so this is
   about not adding a second owner of that behaviour, not about changing it.) */
.header.customHeaderStyle .dalafisk-header__tools .thb-secondary-area > a,
.header.customHeaderStyle .dalafisk-header__tools .thb-secondary-area > .thb-secondary-area--item {
	position: relative;
	z-index: 91;
}

/* Same treatment as the search overlay: Pinnacle dims the page behind its
   drawers with a grey scrim. The elements stay — they are what catch the
   outside click that closes a drawer — only the paint goes.

   There are TWO of them, and they are easy to miss:

   1. `.click-capture`, used by the mobile menu drawer. app.css sets it as
      `#wrapper .click-capture`, an ID selector, so a bare `.click-capture`
      loses the cascade and silently does nothing.
   2. The CART drawer does not use .click-capture at all. Its scrim is a
      ::before on the cart LINK — `.thb-secondary-cart::before`, fixed,
      full-viewport, z-index 18 — switched on by `.cart-drawer + .thb-secondary-cart::before
      { opacity: 1 }`. Nothing about the drawer element itself paints it, which
      is why probing .click-capture kept coming back clean while the page was
      visibly dimmed. */
#wrapper .click-capture {
	background: transparent;
}
.header.customHeaderStyle .thb-secondary-area--item.thb-secondary-cart::before {
	background: transparent;
}
.dalafisk-search-empty__block + .dalafisk-search-empty__block {
	margin-top: 22px;
}
.dalafisk-search-empty__label {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 0 10px;
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--dalafisk-text-5);
	border-bottom: 1px solid #e2e2e2;
}
.dalafisk-search-empty__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dalafisk-search-empty__row {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 2px 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--dalafisk-ink);
	text-align: left;
}
.dalafisk-search-empty__row:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dalafisk-search-empty__none {
	font-size: 15px;
	color: var(--dalafisk-text-5);
}

/* Pinnacle dims the page behind the search with a grey scrim on its own
   click-capture overlay. The overlay itself has to stay — it is what catches
   the outside click — so only the paint is removed, not the element. */
.header.customHeaderStyle .searchform--click-capture {
	background: transparent;
}

@media (max-width: 920px) {
	/* Empty state follows the predictive panel onto the pill's box. */
	.dalafisk-search-empty {
		position: fixed;
		top: calc(var(--dalafisk-header-top) + 14px);
		left: 35px;
		right: 35px;
		width: auto;
		/* +12px for the same breathing room as desktop. */
		padding: 58px 18px 8px;
		/* `dvh`, not `vh`: on a phone `100vh` is the height with the address bar
		   HIDDEN, so with it showing the panel ran ~90px past the bottom of the
		   screen and the last rows could not be reached. `vh` stays as the
		   fallback for anything that does not know `dvh`. */
		max-height: calc(100vh - var(--dalafisk-header-top) - 60px);
		max-height: calc(100dvh - var(--dalafisk-header-top) - 60px);
	}

	/* On a phone the design turns the whole header row into the search bar: the
	   sign goes away, the pill takes the full content width (320px at 390px
	   wide) and the panel grows straight down out of it as the SAME box, with
	   the pill's own height as the panel's top padding.

	   Without the two rules below the pill kept the sign's 96px and overflowed
	   the viewport, and the desktop offsets — which are measured from the
	   desktop icon set — pushed the panel 98px off the right edge, cutting off
	   every product name and price. */
	.header.customHeaderStyle[data-dalafisk-search] .logolink {
		display: none;
	}
	.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__tools {
		flex: 1 1 auto;
		min-width: 0;
	}
	.header.customHeaderStyle .thb-predictive-search {
		/* Fixed to the viewport, so it can never be pushed out by the pill's
		   contents the way the desktop offsets can. */
		position: fixed;
		top: calc(var(--dalafisk-header-top) + 14px);
		left: 35px;
		right: 35px;
		width: auto;
		/* +12px for the same breathing room as desktop. */
		padding: 58px 0 8px;
		/* See the note on the empty state above: `dvh` keeps the panel inside the
		   part of the screen the visitor can actually see. */
		max-height: calc(100vh - var(--dalafisk-header-top) - 60px);
		max-height: calc(100dvh - var(--dalafisk-header-top) - 60px);
	}
	/* The rows carry their own gutter once the panel's is gone. */
	.header.customHeaderStyle .thb-predictive-search--label,
	.header.customHeaderStyle .thb-predictive-search--content,
	.header.customHeaderStyle .thb-predictive-search--footer {
		padding-left: 18px;
		padding-right: 18px;
	}
}
.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__search-toggle {
	width: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: width .6s cubic-bezier(.22, 1, .36, 1), padding .6s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.header.customHeaderStyle[data-dalafisk-search] .dalafisk-nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* ---------- desktop three-column grid ---------- */
@media (min-width: 921px) {
	.dalafisk-header__wrap {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.dalafisk-nav {
		justify-self: center;
	}
	.dalafisk-header__tools {
		justify-self: end;
	}
	/* The hamburger belongs to the mobile layout only. */
	.header.customHeaderStyle .thb-header-mobile-left {
		display: none;
	}
}

@media (min-width: 921px) and (max-width: 1200px) {
	.header.customHeaderStyle[data-dalafisk-search] .dalafisk-nav__list {
		display: none;
	}
}

@media (max-width: 920px) {
	/* The shrunk row does not go tight to the edge on phones — the design keeps
	   14px so the sign still clears the window. */
	/* Same scope as the desktop rule above — see the note there. */
	.header-section:has(.header.customHeaderStyle[data-dalafisk-shrunk]) {
		--dalafisk-header-top: 14px;
	}
	/* Inline nav gives way to the hamburger, which sits in the tools pill on the
	   right — not on the left, where Pinnacle puts it. */
	.dalafisk-nav {
		display: none;
	}
	.header.customHeaderStyle .thb-header-mobile-left {
		display: inline-flex;
		order: -1;
	}
	.header.customHeaderStyle .logolink {
		width: 122px;
	}
	.header.customHeaderStyle .logoimg {
		height: 104px;
	}
	.header.customHeaderStyle:not([data-dalafisk-shrunk]) .logoimg {
		top: -30px;
	}
	.header.customHeaderStyle[data-dalafisk-shrunk] .logolink,
	.header.customHeaderStyle[data-dalafisk-search] .logolink {
		width: 62px;
	}
	.header.customHeaderStyle[data-dalafisk-shrunk] .logoimg,
	.header.customHeaderStyle[data-dalafisk-search] .logoimg {
		height: 53px;
	}
	.dalafisk-header__tools {
		gap: 5px;
		padding: 4px;
	}
	/* The account/cart pair sits in its own flex box inside the pill, and it
	   kept the desktop gap of 6 while the pill narrowed to 5. One pixel, but it
	   pushed the last icon 1px right and left the pill with a 5px inset on the
	   left against 4px on the right. The design uses 5 throughout on phones
	   (`.verktyg { gap: 5px }`) and 6 on desktop, which is why this is scoped
	   here rather than changed at the source. */
	.dalafisk-header__tools .thb-secondary-area {
		gap: 5px;
	}
	/* The search button STAYS on phones while search is open — the design's
	   `.topp[data-sok="1"] .sokknapp { width:auto; padding:8px; opacity:1;
	   pointer-events:auto }`, which deliberately reverses its desktop rule.
	   Collapsing it here too left an open search with no close control at all:
	   the panel covers the header, the button is 0px wide, and tapping outside
	   was not wired to the search. It is the close button on mobile. */
	.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__search-toggle {
		width: 20px;
		padding: 8px;
		opacity: 1;
		pointer-events: auto;
	}

	/* ...and it has to be ABOVE the results. The panel is `position: fixed;
	   z-index: 90` pinned to the pill's own edges, so it covers the entire pill
	   row; the field and the button are static and were painting and
	   hit-testing underneath it. Measured: `elementFromPoint` over the button
	   returned `.thb-predictive-search`, so the button was visible but could not
	   be tapped.

	   Only the field and the button are lifted. The account and cart icons stay
	   under the panel, which is what the design does too — its mobile search bar
	   (`.msoktopp`) REPLACES the pill's contents with a close button and a field
	   rather than squeezing the field in beside them. */
	.header.customHeaderStyle[data-dalafisk-search] .searchform--form,
	.header.customHeaderStyle[data-dalafisk-search] .dalafisk-header__search-toggle {
		position: relative;
		z-index: 91;
	}

	/* With the field open the pill is a search BAR, not a tool row: the design's
	   `.msoktopp` holds a close button and a field and nothing else. The account
	   and cart icons sit under the panel here, and Pinnacle's own submit
	   magnifier inside the field would be a SECOND magnifier next to the
	   toggle's, so both come out while searching.

	   THE HAMBURGER GOES TOO, and that is the "X sitter inte längst till
	   vänster" note. It was only ever invisible, never gone: the panel paints
	   over it, but it still held 34px of flow plus the pill's 5px gap, so the
	   close button began 44px inside the panel's left edge with nothing but
	   white in front of it. The design drops it with everything else
	   (`.topp[data-sok="1"] .verktyg > :not(.msoktopp)`, and the category
	   page's `.pd-mhuvud__knappar`). Measured against the design at 375px: its
	   close button starts 6px in from the panel's left edge, ours now 5 — the
	   pill's own 4px padding plus its 1px border. */
	.header.customHeaderStyle[data-dalafisk-search] .thb-header-mobile-left,
	.header.customHeaderStyle[data-dalafisk-search] .thb-secondary-area,
	.header.customHeaderStyle[data-dalafisk-search] .thb-search-submit {
		display: none;
	}
	/* …and the room Pinnacle reserves for that magnifier has to go with it.
	   `.search-field` carries `padding-right: 50px` for the submit button; with
	   the button hidden the phone's field was 187px wide but only 119px of it
	   usable, so the 129px placeholder was cut off mid-word ("Sök efter vad som
	   hels"). The design's phone field is `.msoktopp .falt { padding: 0 12px }`
	   with nothing reserved. */
	.header.customHeaderStyle[data-dalafisk-search] .searchform .search-field {
		padding-inline: 14px;
	}
	/* 16px IS THE iOS THRESHOLD, not a type choice. Safari zooms the whole page
	   in when a focused input is smaller than 16px, and this field inherited
	   Pinnacle's 14px — so tapping it scaled the site up, the fixed panel became
	   wider than the visible viewport, the page could be panned sideways and the
	   zoom stayed behind after closing. The theme's meta viewport allows scaling
	   up to 5x (as it should), so the only fix that does not take pinch-zoom away
	   from everyone is to meet the threshold. The design's `.msoktopp input` is
	   15px, which would zoom too — it is a mockup that was never opened on a
	   phone. One pixel apart, and it is the pixel that matters. */
	.header.customHeaderStyle .searchform .search-field {
		font-size: 16px;
	}
	/* NO WIDTH ANIMATION ON PHONES. The field does not collapse to an icon here
	   — the design swaps the whole row in at once (`.msoktopp` display:none ->
	   flex) — but this inherited the desktop collapse, so opening the search
	   animated the field from 0 to 100% over .6s. Every frame of that relaid out
	   the header AND the fixed results panel, which is already on screen from
	   frame one. That is the opening stutter. The fade stays; only the layout
	   animation goes. */
	.dalafisk-header__tools .searchform {
		transition: opacity .3s ease;
	}
	.dalafisk-header__icon,
	.dalafisk-header__tools .mobile-toggle,
	.dalafisk-header__tools .thb-secondary-area--item {
		padding: 8px;
	}
	.dalafisk-header__wrap {
		gap: 12px;
		padding-inline: 35px;
	}
	.header.customHeaderStyle[data-dalafisk-search] .searchform {
		width: 100%;
	}
}

@media (max-width: 400px) {
	.dalafisk-header__wrap {
		gap: 6px;
	}
	.header.customHeaderStyle .logolink {
		width: 96px;
	}
	.header.customHeaderStyle .logoimg {
		height: 84px;
	}
	.header.customHeaderStyle:not([data-dalafisk-shrunk]) .logoimg {
		top: -27px;
	}
	.dalafisk-header__icon,
	.dalafisk-header__tools .mobile-toggle,
	.dalafisk-header__tools .thb-secondary-area--item {
		padding: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header.customHeaderStyle .logolink,
	.header.customHeaderStyle .logoimg,
	.dalafisk-mega,
	.dalafisk-mega__inner,
	.dalafisk-header__tools .searchform {
		transition: none !important;
	}
}

/* ---------- search empty state: Populärt just nu + Veckans fångst ----------
   The design's `.sok__rad` rows and `.sok__promo` card. Both blocks are driven
   by theme settings (Dalafisk search panel) and render nothing when unset. */
.header.customHeaderStyle .dalafisk-search-empty__row {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 2px 0;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1.55;
	color: var(--dalafisk-ink);
	text-align: left;
	cursor: pointer;
}
.header.customHeaderStyle .dalafisk-search-empty__row:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.header.customHeaderStyle .dalafisk-search-empty__promo-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--dalafisk-ink);
	text-decoration: none;
}
.header.customHeaderStyle .dalafisk-search-empty__promo-media {
	height: 150px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--dalafisk-hatch);
}
.header.customHeaderStyle .dalafisk-search-empty__promo-media img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.header.customHeaderStyle .dalafisk-search-empty__promo-title {
	font-size: 16px;
	line-height: 1.35;
}
.header.customHeaderStyle .dalafisk-search-empty__promo-meta {
	font-size: 13px;
	color: var(--dalafisk-text-4);
}
.header.customHeaderStyle .dalafisk-search-empty__promo-cta {
	align-self: flex-start;
	height: auto;
	padding: 8px 18px;
	font-size: 14px;
}

/* ---------- search results: category counts, the row, quick-add ----------
   Markup: sections/predictive-search.liquid.

   THE ROW IS THE DESIGN'S LIST ROW, not a card. `.mtraff` on a phone and
   `.sok__produkt` on desktop are the same shape — thumbnail, name, a grey meta
   line — and they differ only in what closes the row: a chevron there, the
   "Korg" quick-add here. So one markup carries both and the breakpoint swaps
   the trailing control.

   WHAT THIS REPLACED, and why the replacement is simpler. The row used to carry
   the card badge as a pill above the name and the price in its own column, and
   at the panel's real width (~372px of content, whatever the window) none of it
   fitted on one line: a container query stacked it into a two-row grid and
   rows came out 97-117px tall, so three results filled a phone. Folding the
   category into the design's own meta line — "Rom & Caviar · Från 349 kr" —
   gets the whole row back onto one line at ~70px, and the category is still
   named. The container query is gone with it; nothing here now depends on the
   panel's width except the phone rules further down. */
.header.customHeaderStyle .dalafisk-search__cats {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.header.customHeaderStyle .dalafisk-search__cat {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 2px 0;
	font-size: 16px;
	color: var(--dalafisk-ink);
	text-decoration: none;
}
.header.customHeaderStyle .dalafisk-search__cat:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.header.customHeaderStyle .dalafisk-search__cat small {
	font-size: 13px;
	color: #999;
}
.header.customHeaderStyle .dalafisk-search__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
}
/* Thumbnail, text and chevron are one link; the quick-add sits outside it. */
.header.customHeaderStyle .dalafisk-search__link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--dalafisk-ink);
	text-decoration: none;
}
/* `.sok__tumme` — 52px, radius 12, and the design's hatch underneath. The
   hatch is not decoration: several product photos are cut out on white, and
   without a filled tile they read as stickers floating in the row. */
.header.customHeaderStyle .dalafisk-search__thumb {
	width: 52px;
	height: 52px;
	flex: none;
	overflow: hidden;
	border-radius: 12px;
	background: var(--dalafisk-hatch);
}
.header.customHeaderStyle .dalafisk-search__thumb img,
.header.customHeaderStyle .dalafisk-search__thumb .thb-placeholder,
.header.customHeaderStyle .dalafisk-search__thumb .thb-placeholder svg {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	object-fit: cover;
}
.header.customHeaderStyle .dalafisk-search__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Pinnacle sets `body { overflow-wrap: anywhere }` (app.css:1006) and
	   everything inherits it. `anywhere` does not just allow a break mid-word —
	   it drops the element's MIN-CONTENT WIDTH to a single character, so a flex
	   item with `min-width: 0` shrinks to one letter rather than push back
	   against its siblings. That is what rendered names one character per line.
	   `break-word` keeps the useful half: an over-long word still breaks, but
	   min-content stays the longest word. Set here, not on `body`, which is
	   shared with the live theme. */
	overflow-wrap: break-word;
}
/* TWO LINES, THEN AN ELLIPSIS. Real titles here run to
   "2,5Kg Styckfryst Torskrygg + 7st 80g fryst Kalixlöjrom"; left to wrap they
   made rows of wildly different heights and pushed the rest of the results off
   screen. A clamp is what keeps the list scannable — the full title is one tap
   away and is still on the link's `title`. */
.header.customHeaderStyle .dalafisk-search__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.3;
	color: var(--dalafisk-ink);
}
/* The design's `.meta`: "Rom & Caviar · Från 1 040 kr". Kept to one line so the
   row height is the name's alone. */
.header.customHeaderStyle .dalafisk-search__meta {
	font-size: 13px;
	line-height: 1.35;
	color: var(--dalafisk-text-4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Desktop closes the row with the quick-add, so the design's chevron — which is
   its PHONE affordance — is out of the way until the phone rules below. */
.header.customHeaderStyle .dalafisk-search__chevron {
	display: none;
	flex: none;
	line-height: 0;
	color: var(--dalafisk-text-4);
}
/* The design's `.korgliten`.

   `width: auto` IS THE LOAD-BEARING LINE. product-grid.css:412 sets
   `.product-card--add-to-cart-button { width: 100% }`, and that class has to stay
   on the element because app.js binds the quick-add to it. In a flex row with
   `flex: none` the button then took the row's ENTIRE width and the name, meta and
   thumbnail were squeezed to nothing — a full-width "Korg" bar with no product on
   it. Only the single-variant rows render as that <button>; the rest are an <a>
   without the class, which is why one row in a list looked broken and the others
   did not. And only on pages that load product-grid.css — the search results page,
   collections, product recommendations — not on the landing page, which uses the
   Dalafisk grid. dalafisk-product-card.css:146 carries the same note for the card. */
.header.customHeaderStyle .dalafisk-search__add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	width: auto;
	max-width: 100%;
	height: auto;
	padding: 5px 11px;
	border: 1.5px solid var(--dalafisk-ink);
	border-radius: 999px;
	background: var(--dalafisk-white);
	font-size: 12px;
	line-height: 1.4;
	color: var(--dalafisk-ink);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.header.customHeaderStyle .dalafisk-search__add:hover {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
}

/* ---------- the result row on a phone ----------
   The design drops the quick-add from search on a phone entirely (`.mtraff` has
   a chevron and nothing else) and runs the rows edge to edge with a hairline
   between them, so the list reads as a list rather than as a stack of cards. */
@media (max-width: 920px) {
	.header.customHeaderStyle .dalafisk-search__add {
		display: none;
	}
	.header.customHeaderStyle .dalafisk-search__chevron {
		display: inline-flex;
	}
	.header.customHeaderStyle .dalafisk-search__thumb {
		width: 44px;
		height: 44px;
	}
	.header.customHeaderStyle .dalafisk-search__name {
		font-size: 16px;
	}
	/* The rows take the gutter over from the block so the hairlines run the full
	   width of the panel, as the design's do. `gap: 0` because the hairline is
	   now what separates them. */
	.header.customHeaderStyle .dalafisk-search__rows {
		gap: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.header.customHeaderStyle .dalafisk-search__rows .dalafisk-search__row {
		padding: 0;
		border-bottom: 1px solid #e2e2e2;
	}
	/* The padding goes on the LINK, not on the row: with the quick-add gone the
	   link is the row's only target, and a phone row whose 18px gutter is dead
	   to the touch is a row that misses taps. */
	.header.customHeaderStyle .dalafisk-search__rows .dalafisk-search__link {
		padding: 12px 18px;
	}
	.header.customHeaderStyle .dalafisk-search__rows .dalafisk-search__row:last-child {
		border-bottom: 0;
	}
}

/* ---------- the panel while the first results are on their way ----------
   THE PANEL USED TO GO BLANK BETWEEN THE TWO STATES. The empty state was torn
   down the instant a character arrived, but Pinnacle does not fetch for another
   300ms (its keystroke debounce) and the answer takes a few hundred more — so
   for the best part of a second there was a white box with nothing in it, which
   read as the search having died and then come back. Reported as "the search
   and the drawer die for 2-3 seconds and then open again" after clicking a
   suggestion.

   dalafisk-header.js now holds the empty state up until the results are
   actually in the panel, and marks the wait here. The delay on both animations
   is deliberate: a fast answer should pass with no flicker at all, and only a
   wait long enough to notice gets a spinner. */
.header.customHeaderStyle[data-dalafisk-search-busy] .dalafisk-search-empty__scroll {
	animation: dalafisk-search-dim .18s ease .25s forwards;
}
.header.customHeaderStyle[data-dalafisk-search-busy] .dalafisk-search-empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid var(--dalafisk-pill-border);
	border-top-color: var(--dalafisk-ink);
	border-radius: 50%;
	opacity: 0;
	animation: dalafisk-search-spin .7s linear infinite, dalafisk-search-appear .18s ease .25s forwards;
}
@keyframes dalafisk-search-dim {
	to { opacity: .4; }
}
@keyframes dalafisk-search-appear {
	to { opacity: 1; }
}
@keyframes dalafisk-search-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.header.customHeaderStyle[data-dalafisk-search-busy] .dalafisk-search-empty__scroll {
		animation: none;
		opacity: .4;
	}
	.header.customHeaderStyle[data-dalafisk-search-busy] .dalafisk-search-empty::after {
		animation: none;
		opacity: 1;
	}
}