/* ------------------------------------------------------------------
   Dalafisk – shared tokens and components
   ------------------------------------------------------------------
   Loaded by every dalafisk-* section via {{ 'dalafisk-base.css' | asset_url |
   stylesheet_tag }}. The browser dedupes the request, so sections stay
   self-contained and no Pinnacle core file has to be edited to load it.

   Typography is deliberately NOT defined here. Pinnacle applies the
   heading_font / body_font pickers globally to h1-h6 and body in
   snippets/head-variables.liquid, and exposes .heading-font / .body-font
   for anything else. Dalafisk uses that cascade (Prompt + Jost) instead of
   its own font tokens.

   Ported from HTMLdesigns/ :root. Swedish design names are mapped to the
   theme's English vocabulary: ink, vit->white, canvas, kortbg->card-bg,
   linje->line, gron->rating-color, max->max-width.
   ------------------------------------------------------------------ */

:root {
	--dalafisk-ink: #1a1a1a;
	--dalafisk-white: #fff;
	--dalafisk-canvas: #f2f2f2;
	--dalafisk-footer-bg: #f7f7f7;
	--dalafisk-card-border: #dedede;
	--dalafisk-card-bg: #f4f4f4;
	--dalafisk-pill-border: #d0d0d0;
	--dalafisk-line: #ccc;
	--dalafisk-text-2: #444;
	--dalafisk-text-3: #555;
	--dalafisk-text-4: #666;
	--dalafisk-text-5: #777;
	--dalafisk-hatch: repeating-linear-gradient(135deg, #ececec 0 10px, #f7f7f7 10px 20px);
	--dalafisk-rating-color: #00b67a; /* Trustpilot green */
	--dalafisk-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* The design centres content at 1760px. Pinnacle's own grid_width setting
	   is 1440px; these are intentionally different and Dalafisk sections use
	   this token so they match the design rather than Pinnacle's grid. */
	--dalafisk-max-width: 1760px;

	/* Announcement bar geometry the hero has to sit under. */
	--dalafisk-announcement-height: 36px;
	--dalafisk-announcement-gap: 3px;
	--dalafisk-announcement-inset: 15px;
}

/* ------------------------------------------------------------------
   Baseline inheritance — re-establish the design's own body defaults
   ------------------------------------------------------------------
   The design sets `body { color: #1a1a1a; font: 400 16px/1.55 }` and colours
   headings with the same ink. Pinnacle sets different values globally
   (app.css: body #292625 / line-height 1.6, and h1-h6 { color: var(--color-heading) }
   = rgb(29,35,48)), so anything in a Dalafisk section that INHERITS rather
   than declares its own value silently picked up Pinnacle's.

   Measured before this rule: 4 section headings rendered rgb(29,35,48)
   instead of #1a1a1a, 3 bold nodes rendered rgb(41,38,37), and 7 nodes had
   line-height 1.032x too large. Rebinding --color-heading here (rather than
   overriding h2 with !important) keeps it in Pinnacle's idiom.
   ------------------------------------------------------------------ */
.dalafisk-hero,
.dalafisk-section,
.dalafisk-media-with-text,
.dalafisk-guide-panel,
.dalafisk-page-hero,
.dalafisk-about-section,
.dalafisk-collection-header,
.dalafisk-collection-grid,
.dalafisk-collection-info,
.dalafisk-recipe,
.dalafisk-recipe-header,
.dalafisk-recipe-featured,
.dalafisk-recipe-grid,
.header.customHeaderStyle,
.header-announcement-bar,
.dalafisk-footer {
	--color-heading: var(--dalafisk-ink);
	color: var(--dalafisk-ink);
	line-height: 1.55;
	/* Pinnacle tracks body text in by --font-body-letter-spacing (-0.32px here);
	   the design leaves it normal. Left in place it tightens every line, which
	   is enough to re-wrap a paragraph to one fewer line than the design. */
	letter-spacing: normal;
}

/* The design tracks its headings in by -.01em (h1,h2,h3 in its base CSS);
   Pinnacle leaves them normal, so ported headings were rendering looser than
   the design. :where() keeps this at class specificity so a section's own
   heading rule — the hero's -.02em — still wins. */
.dalafisk-hero :where(h1, h2, h3),
.dalafisk-section :where(h1, h2, h3),
.dalafisk-media-with-text :where(h1, h2, h3),
.dalafisk-guide-panel :where(h1, h2, h3),
.dalafisk-page-hero :where(h1, h2, h3),
.dalafisk-about-section :where(h1, h2, h3),
.dalafisk-collection-header :where(h1, h2, h3),
.dalafisk-collection-grid :where(h1, h2, h3),
.dalafisk-collection-info :where(h1, h2, h3),
.dalafisk-recipe :where(h1, h2, h3),
.dalafisk-recipe-header :where(h1, h2, h3),
.dalafisk-recipe-featured :where(h1, h2, h3),
.dalafisk-recipe-grid :where(h1, h2, h3) {
	letter-spacing: -.01em;
}

/* Pinnacle colours links as an element selector, which beats inheritance from
   the rule above. The design's own global `a { color: inherit }` is what this
   restores. :where() keeps it at class-only specificity so a section's explicit
   link colours still win. */
.dalafisk-hero :where(a),
.dalafisk-section :where(a),
.dalafisk-media-with-text :where(a),
.dalafisk-guide-panel :where(a),
.dalafisk-page-hero :where(a),
.dalafisk-about-section :where(a),
.dalafisk-collection-header :where(a),
.dalafisk-collection-info :where(a),
.dalafisk-recipe :where(a),
.dalafisk-recipe-header :where(a),
.dalafisk-recipe-featured :where(a),
.dalafisk-recipe-grid :where(a) {
	color: inherit;
}

/* Pinnacle also sets `p { line-height: calc(var(--font-body-line-height-scale) * 1.6) }`,
   which beat inheritance on any node that did not declare its own leading.
   These are exactly the five that inherited it — measured, not guessed. They are
   listed individually rather than as a blanket `p` rule, because a blanket rule
   at this specificity also overrode the leading the design sets deliberately
   elsewhere (hero intro 1.45, card tagline 1.4, story lead/body 1.65). */
.dalafisk-product-card__price-label,
.dalafisk-section__subheading,
.dalafisk-media-with-text--signature,
.dalafisk-testimonials__average,
.dalafisk-guide-panel__list b,
/* A richtext subheading renders as `<div class="… rte"><p>…</p></div>`, so
   Pinnacle's `p` rule lands on the INNER p and the class above only ever styled
   the wrapper. Measured on Produktpaket: 24px against the design's 23.25px. */
.dalafisk-section__subheading p {
	line-height: 1.55;
}

/* ---------- section shell ---------- */
.dalafisk-section {
	padding: 72px max(24px, calc((100% - var(--dalafisk-max-width)) / 2)) 0;
}
.dalafisk-section--first {
	padding-top: 56px;
}
/* The subheading carries Pinnacle's default richtext bottom margin — on the
   wrapper when the setting is plain text (Kategorier) and on the inner <p> when
   it is richtext (Produktpaket). Either way it added 20px the design does not
   have: the design spaces the header with `.sektion__topp { margin-bottom: 24px }`
   alone, so the content below started 20px too low in both sections. */
.dalafisk-section__subheading,
.dalafisk-section__subheading p {
	margin-bottom: 0;
}

.dalafisk-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.dalafisk-section__header h2 {
	font-size: clamp(26px, 2.75vw, 36px);
	line-height: 1.13;
}
.dalafisk-section__subheading {
	margin-top: 6px;
	font-size: 15px;
	color: var(--dalafisk-text-3);
}

/* ---------- buttons ---------- */
.dalafisk-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	border: 1.5px solid var(--dalafisk-ink);
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
	transition: background .15s, color .15s;
}
.dalafisk-button:hover {
	background: var(--dalafisk-white);
	color: var(--dalafisk-ink);
}
.dalafisk-button--outline {
	background: var(--dalafisk-white);
	color: var(--dalafisk-ink);
}
.dalafisk-button--outline:hover {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white);
}
.dalafisk-button--medium {
	padding: 10px 20px;
	font-size: 16px;
}

/* ---------- inline text link (design .lank) ---------- */
.dalafisk-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	white-space: nowrap;
}
.dalafisk-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- the spinner is not red ----------
   `snippets/svg-icons.liquid` hard-codes `stroke="var(--color-accent)"` on the
   `thb-loading` circle, and this store's accent is Pinnacle's `#cb5252`. So
   every busy state in the theme drew a red ring: measured 27 of them on the
   landing page alone — the "Köp" button on each product card, the quick-view
   buttons, the cart rows' thumbnails and the search panel. Nothing else in the
   Dalafisk chrome is that red, and on the ink-filled card buttons it read as an
   error rather than as work in progress.

   `currentColor` is the right answer rather than a fixed colour, because these
   spinners sit on opposite surfaces: white on the ink buttons, ink on the white
   panels, and correct on any surface added later. It also picks up the hover
   inversion on the cards for free.

   app.css:2872 already does exactly this for `.button:not(.outline)`, pinning
   it to `--bg-body`; that rule is more specific and keeps winning, which is
   fine — on a filled button `--bg-body` and `currentColor` are both white. This
   rule reaches everything Pinnacle left out, OUTLINE buttons included.

   Attribute, not a stylesheet rule, is what it overrides: a presentation
   attribute loses to any rule at all, so `.spinner-path` on its own is enough.
   The design has no loading state to port — its prototype cart is a local
   array — so this is a judgement call, not a ported value. */
.spinner-path {
	stroke: currentColor;
}

/* …and the basket goes with the label. app.css fades a loading button's `span`s
   out so the spinner has the box to itself, but the design's buttons lead with
   an icon (`custom-add-to-cart-button.liquid`) and an `<svg>` is not a `<span>`,
   so "Lägg i korg" left a basket sitting beside the spinner. Same selector shape
   as Pinnacle's own rule, including the `[loading="true"]` form its product form
   sets. */
.button.loading .dalafisk-icon,
[loading="true"] .button .dalafisk-icon {
	opacity: 0;
}

/* ---------- icons ----------
   The design sets `svg { display: block }` globally (HTMLdesigns line 155) and
   every ported component's spacing assumes it. Inline SVGs sit on the text
   baseline instead, so each icon box carries the font's descender underneath
   it and the glyph rides high inside its own line box.

   Measured on the hero trust pill before this rule: the star SVG's centre was
   at y=55.5 against the label's y=58.32 — the stars sat 2.8px above the text
   they are supposed to be centred with, which is exactly the "aligna stjärnor
   med text, mitten" note. The same offset applied to every dalafisk-icons
   render on the site.

   Scoped to `.dalafisk-icon` rather than bare `svg`: dalafisk-base.css is
   linked once in layout/theme.liquid, so a global rule would also restyle
   Pinnacle's own icons, which are laid out as inline content. */
.dalafisk-icon {
	display: block;
}

/* A merchant-supplied icon (theme settings -> Dalafisk egna ikoner, or a block's
   own field) carries the same classes as the built-in it replaces, so every
   context rule that sizes or colours `.dalafisk-icon--ui-truck` keeps working.

   These two only cover what a pasted file brings with it that a built-in does
   not: a stray `fill`/`stroke` on the root is left alone — that is the merchant's
   choice — but the box must not be allowed to grow past the size the caller
   asked for, and a raster icon has to letterbox rather than stretch. */
.dalafisk-icon--custom {
	max-width: 100%;
}
.dalafisk-icon--image {
	object-fit: contain;
}

/* ---------- star rating ---------- */
.dalafisk-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.dalafisk-rating__stars {
	display: inline-flex;
	/* Without this the star spans stretch to the row height and the icons hang
	   from the top of their own boxes. */
	align-items: center;
	gap: 2px;
	color: var(--dalafisk-rating-color);
}
.dalafisk-rating__star--empty {
	opacity: .25;
}
.dalafisk-rating__text {
	font-size: 14px;
}

/* ---------- placeholder surface ---------- */
/* The design's hatched "image goes here" plate. In the live theme this only
   shows when a merchant has not picked an image yet. */
.dalafisk-surface {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--dalafisk-hatch);
	color: var(--dalafisk-text-5);
	font: 400 11.5px/1 var(--dalafisk-mono);
}

@media (max-width: 640px) {
	.dalafisk-section,
	.dalafisk-section--first {
		padding-top: 40px;
	}
	.dalafisk-section__header h2 {
		font-size: 25px;
	}
	.dalafisk-section__subheading {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------
   Shared keyframes for the design's entrance choreography. Sections opt in
   from their own stylesheet; the scroll-reveal state is driven by
   dalafisk-motion.js setting [data-dalafisk-inview] on the section, and the
   page-transition direction by [data-dalafisk-direction] on <html>.
   ------------------------------------------------------------------ */
@keyframes dalafisk-rise-in {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dalafisk-sink-in {
	from { opacity: 0; transform: translateY(-22px); }
	to   { opacity: 1; transform: none; }
}

/* Everything animated here must still be readable with motion turned off. */
@media (prefers-reduced-motion: reduce) {
	.dalafisk-hero--content > *,
	[data-dalafisk-reveal] {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
   Dismiss cursor — global affordance
   ------------------------------------------------------------------
   While any drawer or panel is open, the pointer becomes an X everywhere
   outside it, so it reads as "click here to close" before you click.

   WHY IT IS DONE FROM THE PAGE AND NOT ON THE OVERLAY: every one of
   Pinnacle's click-catchers is `pointer-events: none` even while its drawer
   is open — `.searchform--click-capture`, `#wrapper .click-capture` and the
   cart's `.thb-secondary-cart::before` alike. The close is a document-level
   listener, not the overlay. Setting `cursor` on them therefore does nothing:
   the pointer takes its shape from whatever is really under it, which is the
   page. Hence the two lists below.

   TO ADD ANOTHER DISMISSABLE THING, add its selector to BOTH lists:
     list 1 — the OPEN-STATE selector, which switches the cursor on
     list 2 — the panel's own ROOT, so the cursor stays normal inside it
   Open states in use, all verified against the live DOM:
     search       .header.customHeaderStyle[data-dalafisk-search]
     cart drawer  cart-drawer:not([inert])      (Pinnacle marks it inert when shut)
     mobile menu  details.mobile-toggle-wrapper[open]

   THE ART IS A PNG, DELIBERATELY — DO NOT "TIDY" IT BACK TO AN INLINE SVG.
   WebKit has never supported SVG cursors, so Safari silently ignored the SVG
   and fell through to the `pointer` fallback: computed `cursor` still read
   as the X everywhere, the page just showed an ordinary hand. That is why it
   cannot be verified by reading computed style alone — only by looking.
   32x32, hotspot 16 16, regenerated by scratchpad mkcursor.py.
   ------------------------------------------------------------------ */
:root {
	--dalafisk-cursor-dismiss: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABjklEQVR42u2XP2qEQBTGFwXFQrAIIlulWbCzTZlDBDzB9t4hV7DzDN5GSGEhWJgLWAgWL/ktBMQ4rusmzBDywbDuzHvf9+bPe46Hwz92wLKswHGcJ9d1n2k80/erorZtP/q+/xqG4dvxeJSlxhg22P7kbB+CICg+BcbT6SRZlklZllJVlbRte2k808cYNtjig+9d4ixvFEXvcRxLURQyDINcAzbY4oMvHLvEPc97YSZpmkrXdXIr8MEXDrhunjmO5/NZxnGUvcAXDrg2rwT7xtIR/T3i0yDggnPTmeDwsH97ln1tO+CE+2qqsVwcojn6vpc8z6VpGqUQY9hgOweccK+mKDlMGi2ddojJ9SRJpK7rb+P0MYYNtkvZATcaygAoJOSyanZfAvMgpuL8qlYJbjSU5RUCCooKcyH+L/WpADd2i2Wbes4gVW0Nc8Gt4gBubNFS5f6ltF7DNIit4gBu7BdrgvYAtG+B9kOoPQ2NKETaS7H2l5ERr2PtFxIjrmRGXEqNuJYb8WFizKfZn8UHuxTjH0nyIcwAAAAASUVORK5CYII=") 16 16, pointer;
}

/* Two things about this selector list:
   - `body:has(...)` on its own (the first three) puts the X on BODY, so bare
     gaps between sections show it too instead of reverting to an arrow.
   - the descendant `*` is needed because links and buttons set their own
     `cursor: pointer`, which would otherwise beat a value merely inherited.

   `theme-header` is deliberately NOT exempted here. It used to be, and that
   was the bug: the header is a full-width bar that also runs down the right
   side beneath the cart drawer, so a band across the top of every page — and
   a block under the drawer — kept its normal cursor. Crossing it flipped the
   pointer back and forth. Inheritance into the drawers is handled by the
   per-state reset below, so the header no longer needs the exemption. */
body:has(.header.customHeaderStyle[data-dalafisk-search]),
body:has(cart-drawer:not([inert])),
body:has(details.mobile-toggle-wrapper[open]),
body:has(.header.customHeaderStyle[data-dalafisk-search]) *:not(cart-drawer, .mobile-menu-drawer, search-form, .dalafisk-search-empty, .thb-predictive-search, .dalafisk-dismiss-exempt, cart-drawer *, .mobile-menu-drawer *, search-form *, .dalafisk-search-empty *, .thb-predictive-search *, .dalafisk-dismiss-exempt *),
body:has(cart-drawer:not([inert])) *:not(cart-drawer, .mobile-menu-drawer, search-form, .dalafisk-search-empty, .thb-predictive-search, .dalafisk-dismiss-exempt, cart-drawer *, .mobile-menu-drawer *, search-form *, .dalafisk-search-empty *, .thb-predictive-search *, .dalafisk-dismiss-exempt *),
body:has(details.mobile-toggle-wrapper[open]) *:not(cart-drawer, .mobile-menu-drawer, search-form, .dalafisk-search-empty, .thb-predictive-search, .dalafisk-dismiss-exempt, cart-drawer *, .mobile-menu-drawer *, search-form *, .dalafisk-search-empty *, .thb-predictive-search *, .dalafisk-dismiss-exempt *) {
	cursor: var(--dalafisk-cursor-dismiss);
}


/* …and then the X is RESET — but ONLY on the panel that is actually open.
   Excluding the panels above is not enough on its own: `cursor` INHERITS, so a
   panel merely left out of the rule still takes the X from its ancestors — that
   is how the X ended up inside the open cart. Exclusion stops the value being
   SET; it does nothing about what is inherited.

   WHY PER-STATE and not one shared list: a panel that is NOT open should show
   the X like anything else you can click through to dismiss. Resetting all of
   them on every state left small dead patches in the header (the collapsed
   search field, say) that kept an arrow while the cart was open. Each state
   below therefore names only its own panel; the others inherit the X.

   Reset on the ROOT ONLY, never `root *`: descendants then inherit `auto`,
   while the drawer's own links and buttons keep the `pointer` from their own
   rules. Resetting the whole subtree instead flattens those to an arrow. */
body:has(.header.customHeaderStyle[data-dalafisk-search]) :is(search-form, .thb-predictive-search, .dalafisk-search-empty, .dalafisk-dismiss-exempt) {
	cursor: auto;
}
body:has(cart-drawer:not([inert])) :is(cart-drawer, .dalafisk-dismiss-exempt) {
	cursor: auto;
}
body:has(details.mobile-toggle-wrapper[open]) :is(.mobile-menu-drawer, .dalafisk-dismiss-exempt) {
	cursor: auto;
}

/* …with ONE exception carved back out. Pinnacle renders
   `.searchform--click-capture` — a fixed, full-viewport overlay — as a CHILD of
   `<search-form>`, so the reset above reaches it by inheritance and the plain
   arrow came back over the WHOLE page whenever the search was open. It is the
   page's dismiss surface, not part of the panel, so it takes the dismiss cursor
   like anything else outside. `#wrapper .click-capture` (cart drawer + mobile
   menu) is listed for the same reason; it is not nested in a panel today, but
   it is the same kind of surface. An explicit rule beats an inherited value. */
body:has(.header.customHeaderStyle[data-dalafisk-search]) :is(.searchform--click-capture, .click-capture),
body:has(cart-drawer:not([inert])) :is(.searchform--click-capture, .click-capture),
body:has(details.mobile-toggle-wrapper[open]) :is(.searchform--click-capture, .click-capture) {
	cursor: var(--dalafisk-cursor-dismiss);
}

/* ------------------------------------------------------------------
   Dismiss cursor — the follower itself
   ------------------------------------------------------------------
   The X you actually see is this DOM element, not the `cursor:` image.
   `dalafisk-cursor.js` positions it and toggles .is-active / .is-pressed;
   it also rewrites --dalafisk-cursor-dismiss to `none` once it is running,
   which is what hides the native arrow. Until then the PNG above is used,
   so no-JS still gets an X rather than no cursor at all.

   Sized from 0 like Snusify's .mouse-cursor: the open/close animation IS the
   width/height transition, so there is nothing to show or hide.

   WHICH IS ONLY TRUE IF NOTHING PAINTS AT ZERO. A box-shadow with a spread
   still draws on a 0x0 box, so the resting ring painted a 2.8px ink dot — and
   because `place()` only writes --dalafisk-cursor-x/y once the follower first
   activates, that dot sat on the CSS fallback position, `50%/50%`, dead centre
   of the viewport, at z-index 2147483000, on every page until a panel opened.
   Visible on every screenshot of this theme, reported by the merchant as "en
   pixel i mitten av skärmen som är kvar hela tiden".

   The ring is therefore part of what grows: spread 0 at rest, 1.4px when
   active. The background needs no such treatment — a background does not paint
   outside a zero-sized box.
   ------------------------------------------------------------------ */
.dalafisk-cursor {
	position: fixed;
	top: var(--dalafisk-cursor-y, 50%);
	left: var(--dalafisk-cursor-x, 50%);
	z-index: 2147483000;            /* above every Pinnacle drawer and app embed */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 0;
	border-radius: 50%;
	color: var(--dalafisk-ink, rgb(26, 26, 26));
	background: var(--dalafisk-white, rgb(255, 255, 255));
	box-shadow: 0 0 0 0 currentColor;
	transform: translate(-50%, -50%);
	pointer-events: none;           /* must never become the hit target itself */
	user-select: none;
	transition: width .18s ease, height .18s ease, box-shadow .18s ease;
}

.dalafisk-cursor__icon {
	width: 0;
	height: 0;
	transition: width .18s ease, height .18s ease;
}

.dalafisk-cursor.is-active {
	width: 34px;
	height: 34px;
	box-shadow: 0 0 0 1.4px currentColor;
}
.dalafisk-cursor.is-active .dalafisk-cursor__icon { width: 15px; height: 15px; }

/* Press feedback — impossible with a bitmap cursor, and the main reason the
   follower is worth the extra moving parts. */
.dalafisk-cursor.is-active.is-pressed { width: 44px; height: 44px; }
.dalafisk-cursor.is-active.is-pressed .dalafisk-cursor__icon { width: 19px; height: 19px; }

/* Never on touch: there is no pointer to follow. The script bails on the same
   test, this is belt and braces for the element itself. */
@media not all and (hover: hover) and (pointer: fine) {
	.dalafisk-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dalafisk-cursor,
	.dalafisk-cursor__icon { transition: none; }
}


/* ==================================================================
   Header: the compact mark at rest, on every page but the landing page
   ==================================================================
   The design does this with a page-level class — `<body class="katsida">`:
       body.katsida .topp .marke   { width: 70px }
       body.katsida .marke__skylt  { height: 60px; top: -8px }
   It is on SIX of the seven design files. Only dalafisk-landningssida.html has
   no body class, so the big hanging sign belongs to the landing page alone and
   every other page starts with the compact mark.

   The header already renders these values for its SHRUNK state
   (custom-header-style.css:277-284) — this makes that state the RESTING one on
   these templates rather than duplicating the sizes. `top` is -33px here and
   -14px when shrunk — see the note on the `top` rules below for why the design's
   declared -8px is NOT the value to port.

   THIS LIVES IN dalafisk-base.css, NOT in the product, collection or recipe
   stylesheet, because every page type needs it and base is the one file they
   all load. It started life in dalafisk-product.css scoped to the product
   template alone, which is why every other page kept the landing page's big
   sign.

   SCOPED BY EXCLUSION, NOT BY LIST. This used to be `body:is(<17 template
   classes>)`, and every page whose class was not on that list kept the big
   sign — which is how /collections/not, served by the catch-all
   `collection.json` (`template-collection`, not `template-collection-dalafisk`),
   ended up wearing the landing page's 144px sign. A list has to be maintained;
   an exclusion does not. The design's own rule is an exclusion too: `katsida`
   is on six of the seven design files and dalafisk-landningssida.html is the
   one without it. So the compact mark is the DEFAULT and the landing page is
   the single exception.

   `:not()` takes the specificity of its argument, exactly as `:is()` did, so
   the swap changed no weights: this chain still out-weighs
   `.header.customHeaderStyle:not([data-dalafisk-shrunk]):not([data-dalafisk-search]) .logoimg`
   (0,5,0) — measured (0,5,1) — and every template that was on the list keeps
   rendering exactly what it rendered.

   `template-index` is the class Shopify emits for templates/index.json, the
   Dalafisk landing page. A template added later gets the compact mark with no
   edit here, which is the whole point. It also means om-oss is covered whether
   or not `page.om-oss` is ever assigned in admin. */
body:not(.template-index) .header.customHeaderStyle .logolink {
	width: 70px;
}

body:not(.template-index) .header.customHeaderStyle .logoimg {
	height: 60px;
}

/* `top` follows the SAME rule as the landing page's big sign, not the design's
   declared -8px. In the design `body.katsida .marke__skylt { top: -8px }` is
   (0,2,1) and loses to `.topp:not([data-krympt]):not([data-sok]) .marke__skylt
   { top: -33px }` at (0,3,1), so -8px never renders while the bar is on screen
   — measured on HTMLdesigns/dalafisk-kategorisida-fisk.html: computed top -33px,
   sign 2.2px under the bar. Porting the declared value instead of the effective
   one dropped the sign to 27.2px below the bar on every one of these templates,
   which is the "logo ska sitta i kant med annoucement bar" note.

   -14px is kept for the shrunk row, where the bar has slid away and the sign
   has nothing to hang from. These selectors carry the same weight as the height
   rule above, so they also out-weigh the header stylesheet's own pair. */
body:not(.template-index) .header.customHeaderStyle:not([data-dalafisk-shrunk]) .logoimg {
	top: -33px;
}

body:not(.template-index) .header.customHeaderStyle[data-dalafisk-shrunk] .logoimg {
	top: -14px;
}

/* The same `katsida` scope also carries the gap to the footer:
       body.katsida main { padding-top: calc(148px + …); padding-bottom: 60px }
   `.dalafisk-section` is `padding: 72px … 0` — sections space themselves from
   ABOVE, so the last one on a page has nothing under it and sits flush against
   the footer's top rule. Measured 0px on the recipe index. The design solves it
   once, on the page wrapper, rather than per section; `#main-content` is this
   theme's `<main>` (layout/theme.liquid:107).

   Deliberately NOT on the landing page, which is the one design file without
   `katsida` — its last band runs into the footer on purpose. */
body:not(.template-index) #main-content {
	padding-bottom: 60px;
}

/* ---------------------------------------------------------------------------
   NO RESULTS (.sok__noll)

   One block, three homes: the header panel, the search page and 404. It lives
   in the base sheet rather than in a section stylesheet because the PANEL is
   part of the header and therefore possible on every page — a dedicated sheet
   would have to be linked everywhere anyway, and the panel's markup arrives by
   fetch, too late to bring a stylesheet of its own without a flash.

   Class-scoped throughout. The broad selectors that cost 40ms of style recalc
   earlier in this file's life are exactly what this section avoids.
   --------------------------------------------------------------------------- */
.dalafisk-nohits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
}

.dalafisk-nohits__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dalafisk-nohits__heading {
	font-size: 21px;
	line-height: 1.2;
	margin: 0;
}

.dalafisk-nohits__explain {
	font-size: 15px;
	line-height: 1.5;
	color: var(--dalafisk-text-3);
	margin: 0;
}

.dalafisk-nohits__suggest {
	border-bottom: 1.5px solid var(--dalafisk-ink);
	color: var(--dalafisk-ink);
	font-weight: 600;
	cursor: pointer;
}

.dalafisk-nohits__help {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	padding: 14px;
	background: #f1f1f2;
	border-radius: 16px;
}

.dalafisk-nohits__help svg {
	flex: none;
}

.dalafisk-nohits__help a {
	text-decoration: underline;
	text-underline-offset: 2px;
	/* The design's own tap target is the phone number itself. Inline links in a
	   sentence are exempt from the 24px minimum, but this one is the point of
	   the box, so it gets the height anyway. */
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

.dalafisk-nohits__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--dalafisk-text-5);
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e2e2;
	margin: 0 0 12px;
}

.dalafisk-nohits__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* The design's `.kortliten` — smaller than the product card, and buttonless. */
.dalafisk-nohits-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: left;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 18px;
	color: var(--dalafisk-ink);
}

.dalafisk-nohits-card__media {
	display: block;
	height: 130px;
	background: var(--dalafisk-hatch);
}

.dalafisk-nohits-card__media img,
.dalafisk-nohits-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dalafisk-nohits-card .dalafisk-product-card__badge {
	top: 10px;
	left: 10px;
	font-size: 11px;
	padding: 3px 9px;
}

.dalafisk-nohits-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px;
}

.dalafisk-nohits-card__title {
	font-size: 15px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dalafisk-nohits-card__meta {
	font-size: 12px;
	color: var(--dalafisk-text-4);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dalafisk-nohits-card__price {
	font-size: 15px;
	margin-top: 4px;
}

/* On a page there is room for the design's two columns and a real card row;
   in the 408px panel everything stays stacked. */
@media (min-width: 750px) {
	.dalafisk-nohits--page {
		grid-template-columns: minmax(280px, 1fr) 2fr;
		gap: 40px;
	}

	.dalafisk-nohits--page .dalafisk-nohits__cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.dalafisk-nohits--page .dalafisk-nohits-card__media {
		height: 170px;
	}
}