/* ==================================================================
   Dalafisk product page
   ==================================================================
   Styles `sections/dalafisk-product.liquid`, a renamed COPY of Pinnacle's
   `main-product.liquid`. The markup comes from Pinnacle's shared snippets,
   so everything here restyles Pinnacle's classes — it does not add structure.

   EVERY rule is scoped to `.dalafisk-product-section`. Pinnacle's own product
   page is still live on `templates/product.json` and shares these class names,
   so an unscoped rule would silently restyle it. Same containment rule as the
   rest of the port.

   Design → Pinnacle class map (HTMLdesigns/dalafisk-produktsida-lojrom.html):
     .pd-topp          → .product-grid-container
     .pd-galleri       → .product-gallery-container
     .pd-galleri__stor → .product-images__slide
     .pd-tummar        → .product-thumbnail-container
     .pd-kop           → .product-information--inner
     .pd-rubrikrad     → .product--title-container
     .pd-pris          → .product--price-container
     .pd-storlekar     → .variations / .product-form__input
     .pd-koprad        → .product-form
     .pd-loften        → .side-panel-links
     .pd-beskrivning   → .product--short-description

   Two things the design needs are SETTINGS, not CSS, and are set in
   `templates/product.dalafisk.json`: `thumbnail_position: bottom` and
   `media_aspect_ratio: square`.
   ================================================================== */

.dalafisk-product-section {
	/* The design's `.pd-topp` sits directly on the WHITE body — `body{background:
	   var(--vit)}` — and only CARDS use --kortbg (#f4f4f4). This was wrongly set
	   to --dalafisk-canvas (#f2f2f2), which painted a grey band behind the whole
	   product top; measured rgb(242,242,242) against the design's white. */
	background: transparent;
	color: var(--dalafisk-ink, #1a1a1a);
	/* Same baseline overrides the other Dalafisk roots take in
	   dalafisk-base.css: Pinnacle's app.css colours headings with
	   `--color-heading` (rgb(29,35,48)) and tracks body text in by
	   `--font-body-letter-spacing` (-0.32px); the design uses #1a1a1a and
	   normal tracking. Measured leak here: the h1 rendered rgb(41,38,37).

	   NOTE this deliberately omits the `line-height: 1.55` the other roots
	   set. Those wrap purpose-built Dalafisk markup; this section wraps
	   Pinnacle's product components and third-party app blocks (Judge.me),
	   where a blanket inherited line-height would shift content we do not
	   own. Leading is set per element instead. */
	--color-heading: var(--dalafisk-ink, #1a1a1a);
	letter-spacing: normal;
}

.dalafisk-product-section :where(h1, h2, h3) {
	letter-spacing: -.01em;
}

/* ---------- the container edge ----------
   Everything on the page has to start on ONE vertical line. It did not:
   Pinnacle's `.row` (max-width 1520, padding 25) inside `.columns` (padding 15)
   put the product top at 1360 wide starting at x=40, while the design's `.wrap`
   puts it at 1350 starting at x=45 — so the gallery, the buy column and every
   band below them sat on three different left edges.

   This is the design's own rule, `--max` being 1350 on the product page. At
   1440 it gives exactly 1350 at x=45, which in turn gives 653px columns
   ((1350 - 44) / 2) and a 620px gallery at 95% — the design's measured numbers.

   Scoped through `.thb-product-detail` so it reaches only the product's own
   row: `.row`/`.columns` are Pinnacle grid primitives and other blocks in this
   section use them too. */
.dalafisk-product-section .thb-product-detail > .row {
	max-width: none;
	padding-inline: max(24px, calc((100% - 1350px) / 2));
}

.dalafisk-product-section .thb-product-detail > .row > .columns {
	padding-inline: 0;
}

@media (max-width: 640px) {
	.dalafisk-product-section .thb-product-detail > .row {
		padding-inline: 20px;
	}
}

/* ---------- .pd-topp — two equal columns ----------
   The design's grid is `minmax(0,1fr) minmax(0,1fr); gap:44px`, which at a
   1360px container gives 658px columns and a 621px gallery at 95%.

   An earlier attempt at this DID collapse the gallery to 0px, and the reason
   matters: Pinnacle places children by `grid-template-areas`, but the children
   carry `grid-area: auto` and simply auto-place. On a product that renders
   `.product-information--under-gallery` there is a THIRD item, which
   auto-placed into an implicit third column and starved the gallery. Pinning
   that item to column 1 (where it belongs — it sits under the gallery) makes
   equal columns safe. `sticky-scroller.product-information` is
   `display: contents`, so the real second item is its inner div. */
@media only screen and (min-width: 1068px) {
	.dalafisk-product-section .product-grid-container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 44px;
	}
}

.dalafisk-product-section .product-information--under-gallery {
	grid-column: 1;
}

/* ---------- .pd-galleri ----------
   Sticky below the shrunk header (77px + 15px air). Slightly narrower than
   the column: the width sits on the GALLERY, not the image, so the thumbnail
   rail centres against the gallery rather than drifting when only the image
   would shrink. */
.dalafisk-product-section .product-gallery-container {
	position: sticky;
	top: 92px;
	width: 95%;   /* design: .pd-galleri is 95% of the column */
}

/* The rounded corners belong on the Flickity VIEWPORT, not the slides: the
   slides are `position: absolute` inside `.flickity-slider`, so sizing them
   collapses the gallery to zero width. Squareness comes from the section
   setting `media_aspect_ratio: square`, not from CSS. */
.dalafisk-product-section .product-images,
.dalafisk-product-section .flickity-viewport {
	border-radius: 20px;
	overflow: hidden;
	background: var(--dalafisk-card-bg, #f3f3f3);
}

.dalafisk-product-section .product-images__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The design floats this rail ON the image's bottom edge — half over the
   photo, half below — so it reads as attached to it.
   An earlier attempt threw the rail to x:-85 because nothing in its ancestor
   chain was positioned. `.product-image-container` is given `position:
   relative` here, which is what makes the absolute box resolve against the
   IMAGE rather than against some outer scroller. */
.dalafisk-product-section .product-image-container {
	position: relative;
}

.dalafisk-product-section .product-thumbnail-container {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 2;
	/* inline-flex so the pill shrinks to its thumbs like the design's
	   `.pd-tummar`; plain `flex` stretched it into a full-width white bar. */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	/* Pinnacle sizes this rail for its `thumbnails-left` COLUMN layout:
	   `height: 100%; align-items: start; overflow-x: auto`
	   (product.css:739). Against a zero-height parent that resolved to an 18px
	   box, and with 8px padding the 72px thumbs overflowed a 2px content box
	   and were sliced off by the overflow — the rail rendered as a thin pill
	   with the thumbnails cut in half. The design's rail is a compact pill that
	   hugs its thumbs, so it must size to content and never clip. */
	height: auto;
	overflow: visible;
	gap: 8px;
	margin: 0;
	padding: 8px;
	border-radius: 18px;
	background: var(--dalafisk-white, #fff);
	border: 1px solid var(--dalafisk-card-border, #e7e7e7);
}

/* The rail is shrink-to-fit, so the width has to sit on each thumb. */
.dalafisk-product-section .product-thumbnail {
	width: clamp(46px, 5.1vw, 74px);
	aspect-ratio: 1 / 1;
	padding: 0;          /* else the browser's button padding keeps the image off the edges */
	border-radius: 14px;
	overflow: hidden;
	background: var(--dalafisk-card-bg, #f3f3f3);
	border: 2px solid transparent;
	transition: border-color .18s;
}

.dalafisk-product-section .product-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pinnacle marks the selected thumbnail with an inset ring on a pseudo-element
   (product.css:761 and :788):

       .product-thumbnail:after                      inset 0 0 0 1px rgba(body,.15), inset 0 0 0 3px var(--bg-body)
       .product-thumbnail.is-initial-selected:after  inset 0 0 0 2px var(--color-accent), …

   `--color-accent` is #cb5252, so the selected image wore a red ring — the
   reported "röd outline" on the gallery. `.pd-tumme` has no pseudo-element at
   all: the design's whole selected state is `border-color: var(--ink)` on the
   button itself, which is what the rule below draws. Dropping the pseudo takes
   the grey hairline and the 3px white inset with it, neither of which the
   design has either.

   Both selectors are needed and neither is padding: Pinnacle's are
   `.product-gallery-container .product-thumbnail-container .product-thumbnail:after`
   (0,3,0) and `... .product-thumbnail.is-initial-selected:after` (0,4,0). A single
   `.dalafisk-product-section .product-thumbnail::after` is (0,2,0) and loses to
   both — it changed nothing, and the ring was still measurably red. */
.dalafisk-product-section .product-thumbnail-container .product-thumbnail::after,
.dalafisk-product-section .product-thumbnail-container .product-thumbnail.is-initial-selected::after {
	content: none;
}

/* `.is-active` is NOT Pinnacle's selected state — it means "this thumbnail
   belongs to the current variant", and it sits on EVERY visible thumb (measured:
   all five on /products/gosfile). Keying the ink border off it gave all five an
   identical black border and no selection at all; the only thing that actually
   distinguished the selected one was the red ring above. Pinnacle's real marker
   is `.is-initial-selected` — badly named, but it does move to the clicked
   thumbnail (verified by clicking through the rail). `[aria-pressed]` stays for
   the design's own markup. */
.dalafisk-product-section .product-thumbnail[aria-pressed='true'],
.dalafisk-product-section .product-thumbnail.is-initial-selected {
	border-color: var(--dalafisk-ink, #1a1a1a);
}

/* ---------- the rail on phones and tablets (<= 920px) ----------
   Measured on /products/hostlador-spara-upp-till-147-kr at 375px: five thumbs
   made the rail 410px wide in a 393px viewport, x = -17, cut off at both edges.
   Two causes. (1) Pinnacle's `.product-gallery-container
   .product-thumbnail-container .product-thumbnail { width: 72px }` is (0,3,0)
   and beats the clamp above at (0,2,0) on EVERY width -- 72px is what has
   always rendered, on desktop too. (2) The rail is absolute and shrink-to-fit,
   so nothing ever limited its width.

   On small screens the rail comes out of the image and becomes a normal block
   under it. That is what makes "30px to the breadcrumbs" exact regardless of
   how many thumbs there are, and it is where the design's phone screens put
   it. `<scroll-shadow>` (Pinnacle's wrapper, an inline-block sitting on a text
   baseline) has to become a block too, or its line strut adds phantom height
   under the rail -- the same effect that once floated the rating stars.

   `justify-content: flex-start`, not center: a centred flex row that overflows
   pushes its first items out to the left where no scroll can reach them. When
   the thumbs fit, `width: fit-content` plus auto margins centre the pill
   anyway. The scrollbar is hidden; scroll-shadow draws the edge fades that
   app.css configures, so the overflow is still signalled. */
@media (max-width: 920px) {
	.dalafisk-product-section .product-image-container > scroll-shadow {
		display: block;
	}
	.dalafisk-product-section .product-thumbnail-container {
		position: static;
		transform: none;
		display: flex;
		width: fit-content;
		max-width: 90%;
		margin: 0 auto;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.dalafisk-product-section .product-thumbnail-container::-webkit-scrollbar {
		display: none;
	}
	/* Pinnacle's 40px. Measured: 30px from the rail's bottom edge to the crumbs. */
	.dalafisk-product-section .product-gallery-container {
		margin-bottom: 30px;
	}
}

/* Phones: smaller thumbs and a tighter pill. (0,4,0) so it beats Pinnacle's
   72px at (0,3,0) whatever the stylesheet order. Five 52px thumbs are 296px,
   inside 90% of a 335px image (302px); a sixth starts the scroll. */
@media (max-width: 640px) {
	.dalafisk-product-section .product-gallery-container .product-thumbnail-container .product-thumbnail {
		width: 52px;
	}
	.dalafisk-product-section .product-thumbnail-container {
		gap: 6px;
		padding: 6px;
		border-radius: 16px;
	}
}

/* ---------- .pd-kop — the buy column ---------- */
.dalafisk-product-section .product-information--inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* 4px of side padding paid back with a -4px margin: the column stays
	   exactly where it was (title and gallery both at the row's 20px), but
	   Pinnacle's `overflow-x: hidden` on this element (product.css:1066, kept:
	   it is the sticky scroller) now clips 4px further out, which is exactly
	   how far a pill's focus ring reaches. Without it the ring was cut at the
	   column edge on the first and last pill of every row. */
	padding: 0 4px 8px;
	margin: 0 -4px;
	min-width: 0;
}

/* Pinnacle puts the PRICE inside `.product--title-container` alongside the
   h1, so this must stack — a `justify-content: space-between` row (what the
   design's `.pd-rubrikrad` does for title+rating) shoved the price up next to
   the title instead. The design's price is its own block further down. */
.dalafisk-product-section .product--title-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	/* Pinnacle rules a hairline under the title container (`border-bottom: 1px
	   solid var(--color-border)` in product.css). The design has no such rule —
	   title, rating and ingress run straight into the fact list. The 15px of
	   padding and 15px of margin that framed that line are already zeroed on
	   `.dalafisk-product__titlerow` below; the line itself was left behind. */
	border-bottom: 0;
}

.dalafisk-product-section .product--title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(26px, 2.65vw, 34px);
	line-height: 1.14;
	font-weight: 700;              /* design base: h1,h2 { font-weight:700 } */
	color: var(--dalafisk-ink, #1a1a1a);
}

/* ---------- price ----------
   The single most important number on the page, so it gets its own weight
   rather than flowing in with the description. */
.dalafisk-product-section .product--price-container {
	/* Column, not row: the design puts the price on its own line with the
	   `.pd-moms` note UNDER it. As a row the note sat beside the number. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: 20px;
}

.dalafisk-product-section .product--price-container .price {
	/* Family comes from the `heading-font` class on the price element (Pinnacle
	   emits it with the merchant's heading font, Prompt — the design's --rubrik).
	   It used to name --dalafisk-mono here, which rendered the most important
	   number on the page in a monospace fallback. */
	font-size: clamp(32px, 3.1vw, 42px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--dalafisk-ink, #1a1a1a);
}

.dalafisk-product-section .price-by-weight {
	margin-top: -4px;
	padding-bottom: 13px;
	font-size: 13px;
	color: var(--dalafisk-text-5, #777);
}

/* ---------- .pd-koprad — quantity + add to cart ---------- */
/* The design's `.pd-koprad` is `grid-template-columns: auto minmax(0,1fr)` —
   stepper on the left, button filling the rest. That EXACT rule breaks here:
   Pinnacle does not render a separate quantity element on this product, so the
   lone `form.form` landed in the `auto` column and the button shrank to 212px
   inside a 626px column. Flex gives the same two-up result when a quantity
   control IS present, and a full-width button when it is not. */
.dalafisk-product-section .product-form {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	align-items: stretch;
}

.dalafisk-product-section .product-form > form.form {
	flex: 1 1 100%;
	min-width: 0;
}

/* The stepper must keep its natural width. Pinnacle gives the add-to-cart
   `flex: 1 1 0%` inside `.add_to_cart_holder`, which crushed the selector from
   its intrinsic ~102px (34 + 26 + 34 + padding) down to 36px — the minus/plus
   hit areas collapsed with it. The design's `.pd-koprad` is
   `grid-template-columns: auto minmax(0,1fr)`: stepper at its own size, button
   taking the rest. */
.dalafisk-product-section .add_to_cart_holder {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.dalafisk-product-section quantity-selector.quantity {
	flex: none;
}

.dalafisk-product-section .quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: var(--dalafisk-card-bg, #f3f3f3);
	font-variant-numeric: tabular-nums;
}

/* Pinnacle positions the minus/plus ABSOLUTELY into `.quantity`'s
   `padding: 0 30px` (app.css:3436), so they contribute no width. Our padding
   of 4px removed that space and the pill collapsed to 36px with the buttons
   overlapping the input. The design lays all three out in flow, so they are
   put back to static and the row becomes a real flex row. */
.dalafisk-product-section .quantity .minus,
.dalafisk-product-section .quantity .plus {
	position: static;
}

.dalafisk-product-section .quantity button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
}

.dalafisk-product-section .quantity button:hover {
	background: var(--dalafisk-white, #fff);
}

.dalafisk-product-section .quantity input {
	min-width: 26px;
	text-align: center;
	font-weight: 600;
	border: 0;
	background: none;
}

.dalafisk-product-section .product-form__submit {
	padding: 13px 20px;
	font-size: 15.5px;
	border-radius: 999px;
}

/* ---------- .pd-beskrivning ----------
   The rule that draws the hairline above this block lives on
   `.dalafisk-product__block-heading` further down, because the heading is what
   starts the block. */
.dalafisk-product-section .product--short-description {
	font-size: 14.5px;
	color: var(--dalafisk-text-2, #444);
	line-height: 1.6;
}

/* ==================================================================
   Narrow screens — one column
   ==================================================================
   The design's breakpoint is 920/921px, same as the header. Sticky is
   dropped: a sticky gallery in a single column just pins the image over the
   buy block as you scroll past it. */
/* Pinnacle only makes this a two-column grid at `min-width: 1068px`
   (product.css:689). The sticky gallery must therefore be dropped below THAT,
   not at the design's 920px header breakpoint: between 921 and 1067 the layout
   is a single column, and a sticky gallery there pins the photo over the buy
   block as you scroll past it — which is exactly what it did. */
@media (max-width: 1067px) {
	.dalafisk-product-section .product-grid-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.dalafisk-product-section .product-gallery-container {
		position: static;
		width: 100%;
	}

	.dalafisk-product-section .variations .product-form__input {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ---------- .pd-moms — the small line under the price ----------
   Pinnacle renders it as `.product__tax.caption` inside the price container.

   THE 10px IS THE DESIGN'S EFFECTIVE GAP, NOT ITS DECLARED ONE. `.pd-moms`
   declares `margin-top: -4px`, but it sits in `.pd-kop`, a flex column with
   `gap: 14px` — so the design's real distance from the price box to this line
   is 14 - 4 = 10px (measured in a browser). Our `.product--price-container` is
   a flex column with `gap: 0`, so there is nothing for a negative margin to
   pull back against: the ported -4px/-2px left the two lines touching. */
.dalafisk-product-section .product__tax.caption,
.dalafisk-product-section .product__tax {
	margin-top: 10px;
	font-size: 13px;
	color: var(--dalafisk-text-5, #777);
}

.dalafisk-product-section .product--price-container .badges {
	font-size: 12px;
}

/* ---------- .pd-storlekar — variant pills (real markup) ----------
   Pinnacle renders each option as `input[type=radio] + label > span` inside
   `fieldset.product-form__input--block`. The radio itself is visually hidden
   and the LABEL is the pill, so `input:checked + label` is the selected state.
   `.variations` carries an inline `--variant-columns`, so the column count is
   set on the fieldset to win without touching that variable. */
.dalafisk-product-section .variations .product-form__input--block {
	display: grid;
	/* The design lays these out 4 per row. `auto-fit` put all SEVEN of this
	   product's sizes on one row and overflowed the column. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	border: 0;
	padding: 0;
	margin: 0;
	/* Pinnacle's `.variations .product-form__input--block` (product.css:435)
	   carries `overflow: hidden` for its own flex-wrap layout. Here it only
	   ever clipped: the fieldset's box is exactly the pills' box, so the 2px
	   focus ring drawn 2px OUTSIDE a pill was cut flat along the left, right
	   and bottom edges (reported 2026-09-22). Nothing depends on the clip:
	   the "Fler storlekar" collapse is `[data-dalafisk-collapsed] { display:
	   none }`, not an overflow trick. */
	overflow: visible;
}

.dalafisk-product-section .variations .form__label {
	grid-column: 1 / -1;
	font-size: 13px;
	color: var(--dalafisk-text-4, #666);
	margin-bottom: 2px;
}

.dalafisk-product-section .variations .form__label__value {
	color: var(--dalafisk-ink, #1a1a1a);
	font-weight: 600;
}

.dalafisk-product-section .variations input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dalafisk-product-section .variations input[type='radio'] + label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	margin: 0;
	/* product.css sizes these as square colour swatches —
	   `.variations .product-form__input--block input[type="radio"] + label`
	   with `height: 42px; min-width: 42px; overflow: hidden` — which capped the
	   pill at 42px and clipped the second line. The design's pill is 62.5px and
	   is sized by its CONTENT: 10 + 21.7 + 3 + 17.8 + 10. */
	height: auto;
	min-width: 0;
	overflow: visible;
	line-height: 1.55;
	padding: 10px 8px;
	border-radius: 13px;
	background: var(--dalafisk-card-bg, #f3f3f3);
	color: var(--dalafisk-ink, #1a1a1a);
	font-size: 14px;
	font-weight: 600;
	/* THE LABEL HAS TO WRAP. The design's pills read "2 kg" / "500 g", so its
	   `white-space: nowrap` never cost anything; this store's option values are
	   sentences — "Röktafisklådan ca2Kg+ 2x80G KalixLöjrom" is 255px against a
	   238px pill. Paired with the `overflow: visible` above (which the pill
	   needs so its second line is not clipped) nowrap did not clip the excess,
	   it PAINTED it: straight out of the pill and across the one beside it.

	   Wrapping is safe for the design's own values because short text does not
	   wrap. The grid stretches every pill in a row to the tallest, so a
	   two-line pill lines up with a one-line one instead of stepping. */
	white-space: normal;
	overflow-wrap: break-word;
	text-align: center;
	cursor: pointer;
	transition: background .18s, color .18s;
}

.dalafisk-product-section .variations input[type='radio'] + label:hover {
	background: #e6e6e6;
}

.dalafisk-product-section .variations input[type='radio']:checked + label {
	background: var(--dalafisk-ink, #1a1a1a);
	color: var(--dalafisk-white, #fff);
}

/* Keyboard focus has to stay visible — the radio is the focusable thing but
   it is hidden, so the ring is drawn on the label instead.

   `box-shadow: none` is what removes the BLUE ring (reported 2026-09-22):
   product.css:457 draws `box-shadow: 0 0 0 2px #015ecc` on the same
   `:focus-visible + label` state, and this rule only added an outline on top,
   so a focused, unchecked pill wore both — blue hugging the edge, ink 2px
   further out. Pinnacle's own kill switch for that ring,
   `[data-whatintent="touch"] *:focus { outline: none }`, is dead here: the
   what-input library it keys off is not loaded in this theme, and it targets
   outline, not box-shadow, anyway. */
.dalafisk-product-section .variations input[type='radio']:focus-visible + label {
	outline: 2px solid var(--dalafisk-ink, #1a1a1a);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------- .pd-lagg — add to cart ----------
   Pinnacle ships it as `.button.outline`; the design's is a filled ink pill
   spanning the column. */
.dalafisk-product-section .single-add-to-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 22px;
	border-radius: 999px;
	background: var(--dalafisk-ink, #1a1a1a);
	border: 1px solid var(--dalafisk-ink, #1a1a1a);
	color: var(--dalafisk-white, #fff);
	font-size: 15.5px;
	font-weight: 500;          /* design `.btn { font-weight: 500 }` */
	transition: background .18s, color .18s;
}

/* `border-color` is not decoration here. Pinnacle's
   `@media (hover:hover) { .button.outline:hover }` (app.css) repaints the
   button with `var(--solid-button-background)` — the merchant's ACCENT,
   #cb5252. This rule already overrode the background, so the fill stayed dark
   and only the 1px rim went red: the "röd outline" on hover. The border has to
   be named too, or Pinnacle's rule is the only one declaring it and wins by
   default. The design's button has no accent anywhere. */
.dalafisk-product-section .single-add-to-cart-button:hover {
	background: #000;
	border-color: #000;
	color: var(--dalafisk-white, #fff);
}

/* ---------- defence against the Yotpo SMS back-in-stock app ----------
   NOT a theme bug. The app extension `ysms-97/assets/handle_variant.js` hooks
   `history.pushState`/`replaceState`, so it runs on every variant change that
   product.js writes to the URL. It picks its "target" from a hardcoded list of
   selectors — ours matches on `#AddToCart` — and toggles it:

       showTrigger()  target.style.cssText = "display: none;"   (sold out)
       hideTrigger()  target.style.cssText = "display: block;"  (available)

   `block` is the app's guess at a normal button, and an inline style beats the
   rule above. The button stopped being a flex row, the basket svg is
   `display:block` (see dalafisk-icons), so it claimed a line of its own and the
   label dropped underneath it — the reported "texten flyttas ner".

   Matching the app's own inline value is deliberate: it restores the row for
   the RESTORE case only and leaves `display: none` alone, so the app can still
   hide the button on a sold-out variant and show its "Notify me" trigger
   instead. A blanket `display: flex !important` would have broken that. */
.dalafisk-product-section .single-add-to-cart-button[style*="display: block"],
.dalafisk-product-section .single-add-to-cart-button[style*="display:block"] {
	display: flex !important;
}

.dalafisk-product-section .add_to_cart_holder,
.dalafisk-product-section .product-add-to-cart-container,
.dalafisk-product-section .price-by-weight .product-form,
.dalafisk-product-section .price-by-weight form.form {
	width: 100%;
}

.dalafisk-product-section .add_to_cart_holder {
	margin-top: 4px;
}

/* ---------- .pd-usp — the fact row ----------
   Markup: snippets/dalafisk-product-facts.liquid (Pinnacle's own block renders
   one chip per `info` metafield, which overflows the design's three columns —
   see that snippet for why it is intercepted).

   The design is one pill with hairline dividers: information, not choices, so
   it must not read as another row of selectable buttons beside the size pills.
   Columns come from --dalafisk-facts, set by the snippet to the number that
   actually rendered, so two facts give an even two-column pill rather than
   three columns with a hole in them. */
.dalafisk-product-section .dalafisk-product__facts {
	display: grid;
	grid-template-columns: repeat(var(--dalafisk-facts, 3), 1fr);
	gap: 0;
	margin: 4px 0 0;
	padding: 7px 6px;
	list-style: none;
	background: var(--dalafisk-white, #fff);
	border: 1px solid var(--dalafisk-card-border, #dedede);
	border-radius: 999px;
}
.dalafisk-product-section .dalafisk-product__fact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 1px 10px;
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--dalafisk-text-4, #666);
	border-left: 1px solid var(--dalafisk-card-border, #dedede);
	/* app.css puts a marker on list items inside the product column. */
	list-style: none;
}
.dalafisk-product-section .dalafisk-product__fact::marker,
.dalafisk-product-section .dalafisk-product__fact::before {
	content: none;
	display: none;
}
.dalafisk-product-section .dalafisk-product__fact:first-child {
	border-left: 0;
}
.dalafisk-product-section .dalafisk-product__fact-icon {
	display: inline-flex;
	flex: none;
	color: var(--dalafisk-text-5, #777);
}
.dalafisk-product-section .dalafisk-product__fact-icon svg {
	width: 17px;
	height: 17px;
}
.dalafisk-product-section .dalafisk-product__fact-text {
	min-width: 0;
}
.dalafisk-product-section .dalafisk-product__fact-text b {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dalafisk-ink);
}

/* The design stacks the icon over the text on phones so three cells still fit
   one row rather than wrapping. */
@media (max-width: 640px) {
	.dalafisk-product-section .dalafisk-product__facts {
		padding: 8px 2px;
	}
	.dalafisk-product-section .dalafisk-product__fact {
		flex-direction: column;
		gap: 5px;
		padding: 0 5px;
		text-align: center;
		font-size: 10.5px;
	}
	.dalafisk-product-section .dalafisk-product__fact-text b {
		font-size: 12px;
	}
}

/* The rail is inline-flex, so its wrapper has to do the centring. */
.dalafisk-product-section .product-images + *,
.dalafisk-product-section .theme-scroll-nav {
	text-align: center;
}

/* ==================================================================
   Buy-column additions rendered by `dalafisk-product-information.liquid`
   ================================================================== */

/* ---------- .smulor — breadcrumbs inside the column ---------- */
.dalafisk-product-section .dalafisk-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 2px;
	font-size: 14px;
	color: var(--dalafisk-text-4, #666);
}

.dalafisk-product-section .dalafisk-breadcrumbs a { color: inherit; }

.dalafisk-product-section .dalafisk-breadcrumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dalafisk-product-section .dalafisk-breadcrumbs [aria-current] {
	color: var(--dalafisk-ink, #1a1a1a);
	font-weight: 500;
}

/* ---------- .pd-rubrikrad / .pd-topprad — title and rating on ONE row ----------
   `display:flex; align-items:baseline; justify-content:space-between`, the h1
   taking the slack (`flex:1 1 auto; min-width:0`) and the score against the
   column's right edge on the same baseline.

   THIS USED TO BE A ROW OF ITS OWN UNDERNEATH, on the reasoning that Pinnacle
   renders the PRICE inside `.product--title-container` and splitting them was
   not worth it. That stopped being true when the title block was forked: this
   file's title container now holds the h1 and nothing else — the price is
   emitted further down, at the design's position. The old compromise was simply
   left behind, and a pixel overlay against the design is what surfaced it; the
   stacked row pushed everything below the title down by ~44px. */
.dalafisk-product-section .dalafisk-product__titlerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	/* Pinnacle's `.product--title-container` is already a flex container — a
	   COLUMN one. Setting display/align/justify/gap therefore changed nothing
	   visible: the children still stacked, the h1 still filled the row (measured
	   653 wide with the score below it at the same x), and every property above
	   was quietly being applied to the cross axis. The direction is the fix. */
	flex-direction: row;
	flex-wrap: nowrap;
	/* and 15px of padding plus 15px of margin under the row, neither of which
	   `.pd-rubrikrad` has — 30px of space the design does not spend. */
	padding-bottom: 0;
	margin-bottom: 0;
}

.dalafisk-product-section .dalafisk-product__titlerow .product--title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.dalafisk-product-section .dalafisk-product__ratingrow {
	flex: none;
	margin: 0;
	font-size: 13px;
	color: var(--dalafisk-text-3, #555);
}

.dalafisk-product-section .dalafisk-product__ratingrow .dalafisk-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

/* Only the score is underlined, as in the design — not the stars. */
.dalafisk-product-section .dalafisk-product__ratingrow .dalafisk-rating {
	gap: 8px;
	margin: 0;
}

.dalafisk-product-section .dalafisk-product__ratingrow .dalafisk-rating__text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* On a narrow column the two would collide, so the design's own breakpoint
   stacks them — `.pd-rubrikrad` is only a flex row from 921px up. */
@media (max-width: 920px) {
	.dalafisk-product-section .dalafisk-product__titlerow {
		display: block;
	}

	.dalafisk-product-section .dalafisk-product__ratingrow {
		margin-top: 6px;
	}
}

/* `.pd-storlekar` has no bottom margin; Pinnacle's `.variations` carries 10px,
   which made the gap to the buy row 24px against the design's 14. */
.dalafisk-product-section .variations {
	margin-bottom: 0;
}

.dalafisk-product-section .dalafisk-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------- .pd-ingress ---------- */
.dalafisk-product-section .dalafisk-product__ingress {
	font-size: 15px;
	color: var(--dalafisk-text-2, #444);
	line-height: 1.55;
	margin-top: -6px;
}

/* ==================================================================
   .pd-betal, .pd-loften, .pd-detaljer
   ==================================================================
   All three replace a Pinnacle block rather than restyling one — see the
   snippets for why. The old `.side-panel-links` rules that used to stand in for
   `.pd-loften` are gone with them; they existed TWICE in this file, at two
   different specificities, which is exactly the trap this file keeps setting.
   BEFORE ADDING A RULE HERE, GREP FOR THE SELECTOR.
   ================================================================== */

/* ---------- .pd-betal — the payment marks ----------
   The design puts these in the buy row's SECOND grid column, centred under the
   button (`.pd-betal { grid-column: 2 }`). Pinnacle builds that row inside
   `product-form`, which cannot be rendered into without forking the
   add-to-cart, so the row sits as a sibling and is pushed into the button's
   column by the width of the quantity stepper plus the row's own 10px gap.
   `--dalafisk-qty-w` is pinned on the stepper below so the two agree. */
.dalafisk-product-section .dalafisk-product__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 5px;
	padding-left: calc(var(--dalafisk-qty-w, 108px) + 10px);
}

.dalafisk-product-section .dalafisk-product__payments span {
	display: block;
	line-height: 0;
}

.dalafisk-product-section .dalafisk-product__payments svg {
	display: block;
	height: 20px;
	width: auto;
}

/* The stepper's width is what the payment row is offset by, so it is pinned
   rather than left to the content. 108px is what Pinnacle's own stepper
   measures here, and it matches the design's `.pd-stegare`: 4 + 34 + 2 + 26 +
   2 + 34 + 4 = 106. */
.dalafisk-product-section .add_to_cart_holder .quantity {
	width: var(--dalafisk-qty-w, 108px);
	flex: none;
}

/* The design drops the offset at 920 (`grid-column: 1 / -1`) — below that the
   marks take the whole row instead of breaking with Amex alone on line two. */
@media (max-width: 920px) {
	.dalafisk-product-section .dalafisk-product__payments {
		padding-left: 0;
	}
}

/* ---------- .pd-loften — the promise rows ---------- */
.dalafisk-product-section .dalafisk-product__promises {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dalafisk-product-section .dalafisk-product__promises li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--dalafisk-text-3, #555);
}

.dalafisk-product-section .dalafisk-product__promises svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.dalafisk-product-section .dalafisk-product__promises b {
	display: block;
	color: var(--dalafisk-ink, #1a1a1a);
	font-weight: 600;
	font-size: 14px;
}

/* ---------- .pd-detaljer — the dropdowns ----------
   #e2e2e2, the same hairline `.pd-beskrivning` and
   `.dalafisk-product__block-heading` draw — NOT `--dalafisk-line`, which is the
   design's `--linje` (#ccc) and is a visibly darker rule. The design uses the
   literal here, so the literal is what is used. */
.dalafisk-product-section .dalafisk-product__details details {
	border-top: 1px solid #e2e2e2;
}

.dalafisk-product-section .dalafisk-product__details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 0;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.dalafisk-product-section .dalafisk-product__details summary::-webkit-details-marker {
	display: none;
}

.dalafisk-product-section .dalafisk-product__details summary > svg {
	flex: none;
	color: var(--dalafisk-text-4, #777);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.dalafisk-product-section .dalafisk-product__details details[open] summary > svg {
	transform: rotate(180deg);
}

.dalafisk-product-section .dalafisk-product__details-body {
	padding-bottom: 16px;
	font-size: 14.5px;
	color: var(--dalafisk-text-3, #555);
	line-height: 1.6;
}

.dalafisk-product-section .dalafisk-product__details-body p {
	margin: 0 0 8px;
}

.dalafisk-product-section .dalafisk-product__details-body p:last-child {
	margin-bottom: 0;
}

.dalafisk-product-section .dalafisk-product__details-body b {
	color: var(--dalafisk-ink, #1a1a1a);
	font-weight: 600;
}

/* `.pd-narings` — the design's nutrition cells.
   Two markup shapes reach this: the <dl> that dalafisk-product.js builds from
   the shop's rich-text metafield (see nutritionGrid there), and a real <table>
   if a merchant ever writes one. Both are laid out as the same grid of cells. */
.dalafisk-product-section .dalafisk-product__nutrition {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 0;
	padding-bottom: 12px;
}

.dalafisk-product-section .dalafisk-product__nutrition > div {
	padding: 11px;
	border-radius: 12px;
	background: var(--dalafisk-card-bg, #f4f4f4);
}

.dalafisk-product-section .dalafisk-product__nutrition dt {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--dalafisk-text-4, #666);
}

.dalafisk-product-section .dalafisk-product__nutrition dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--dalafisk-ink, #1a1a1a);
}

.dalafisk-product-section .dalafisk-product__details-body table {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	width: 100%;
	margin-bottom: 12px;
	border: 0;
	border-collapse: separate;
}

.dalafisk-product-section .dalafisk-product__details-body :is(thead, tbody, tfoot, tr) {
	display: contents;
}

.dalafisk-product-section .dalafisk-product__details-body :is(th, td) {
	padding: 11px;
	border: 0;
	border-radius: 12px;
	background: var(--dalafisk-card-bg, #f4f4f4);
	text-align: left;
}

.dalafisk-product-section .dalafisk-product__details-body th {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--dalafisk-text-4, #777);
}

.dalafisk-product-section .dalafisk-product__details-body td {
	font-size: 15px;
	font-weight: 600;
	color: var(--dalafisk-ink, #1a1a1a);
}

/* Phone overrides for the three blocks above.
   THEY LIVE HERE, NOT IN THE NARROW-SCREEN BLOCK FURTHER UP THE FILE, and that
   is the whole point: a media query adds no specificity, so at equal weight the
   LAST declaration wins. Stated earlier in the file than the rules they override,
   these did nothing — the payment marks stayed at 20px with a 14px gap and the
   nutrition cells stayed four across at 375px, measured 77.75px wide. */
@media (max-width: 640px) {
	.dalafisk-product-section .dalafisk-product__payments {
		gap: 11px;
	}

	.dalafisk-product-section .dalafisk-product__payments svg {
		height: 17px;
	}

	/* `.pd-narings` goes to two columns; four 11px cells do not fit a phone. */
	.dalafisk-product-section .dalafisk-product__nutrition,
	.dalafisk-product-section .dalafisk-product__details-body table {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==================================================================
   .pd-sticky — the sticky buy bar
   ==================================================================
   The markup is now `snippets/dalafisk-product-sticky.liquid`, a fork of
   Pinnacle's — see that file for why. Pinnacle's bar is still a floating CARD
   bottom-right (product.css:1685): `bottom/right: 15px` (30px >= 768),
   `max-width: 420px`, a full border and radius, parked with
   `transform: translateX(calc(100% + 50px))` and shown by
   `.sticky--visible { transform: translateX(0%) }`. Those rules match on the
   element name, so all of them still have to be undone here — `left/right: 0`
   alone cannot beat the max-width, and leaving the translateX in place parks
   the bar off-screen to the right (measured at x:1074 on a 1024px viewport).

   It lives OUTSIDE `.dalafisk-product-section` once open, hence `body:has()`:
   the plain descendant selector never matched it. */
body:has(.dalafisk-product-section) .product-add-to-cart-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 75;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	max-width: none;
	width: 100%;
	padding: 0;
	border: 0;
	border-top: 1px solid #e2e2e2;
	border-radius: 0;
	transform: translateY(101%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

body:has(.dalafisk-product-section) .product-add-to-cart-sticky.sticky--visible {
	transform: none;
}

/* Pinnacle lifts it off the corner again above 768px. */
@media only screen and (min-width: 768px) {
	body:has(.dalafisk-product-section) .product-add-to-cart-sticky {
		bottom: 0;
		right: 0;
	}
}

/* `.pd-sticky__inner wrap` — the same gutter formula as the rest of the page,
   so the bar's content sits on the page's own left edge. */
.dalafisk-sticky__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
	padding-inline: max(24px, calc((100% - 1350px) / 2));
}

.dalafisk-sticky__text {
	display: flex;
	flex-direction: column;
	margin-right: auto;
	min-width: 0;
}

.dalafisk-sticky__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dalafisk-ink, #1a1a1a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The price and the weight line share one element so the section-render
   updates both — see the snippet. They still read as two lines. */
.dalafisk-sticky__pricewrap {
	display: flex;
	flex-direction: column;
}

.dalafisk-sticky__price {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--dalafisk-ink, #1a1a1a);
}

.dalafisk-sticky__price .price {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

.dalafisk-sticky__meta {
	font-size: 13px;
	color: var(--dalafisk-text-4, #666);
}

/* The button keeps Pinnacle's own markup; only the pill shape is the design's.
   The margin reset includes the `product-form` element itself: Pinnacle gives
   it a 30px top margin, and a flex item's margin counts toward the line's cross
   size — so the bar measured 101px tall (46 + 30 + 24 padding) against the
   design's 88.5, with the button sitting 30px low inside it. */
.dalafisk-sticky__form,
.dalafisk-sticky__form .product-add-to-cart-container,
.dalafisk-sticky__form .add_to_cart_holder {
	margin: 0;
}

.dalafisk-sticky .single-add-to-cart-button {
	padding: 11px 22px;
	font-size: 15px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Same Pinnacle accent-on-hover as the button up the page, and worse here:
   this button keeps Pinnacle's colours, so `.button.outline:hover` repainted
   the WHOLE pill #cb5252, not just its rim. It renders as an outline pill at
   rest (transparent, `--color-body` border), so the design's answer for that
   shape is `.btn--kontur:hover` — invert to an ink fill with white text. */
.dalafisk-sticky .single-add-to-cart-button:hover {
	background: var(--dalafisk-ink, #1a1a1a);
	border-color: var(--dalafisk-ink, #1a1a1a);
	color: var(--dalafisk-white, #fff);
}

/* The buy button up the page reads "Lägg i korg · 1 040 kr", which is the
   design's `.pd-lagg`. The design's STICKY button is just "Lägg i korg" — the
   price is already in the bar, 40px to its left, and printing it twice in an
   88px row reads as a mistake. */
.dalafisk-sticky .atc-price {
	display: none;
}

/* The design hides the weight line and tightens the row on phones. */
@media (max-width: 640px) {
	.dalafisk-sticky__meta {
		display: none;
	}
	.dalafisk-sticky__inner {
		gap: 10px;
		padding-inline: 20px;
	}
	.dalafisk-sticky .single-add-to-cart-button {
		padding: 11px 16px;
		font-size: 14px;
	}
}

/* ---------- description heading ----------
   The design's `.pd-beskrivning` is a hairline-topped block with a 19px heading;
   Pinnacle emits only the body, so the rule is split across the heading emitted
   by dalafisk-product-information.liquid and the block itself. */
.dalafisk-product-section .dalafisk-product__block-heading {
	margin: 0 0 8px;
	padding-top: 14px;
	border-top: 1px solid #e2e2e2;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dalafisk-ink);
}
.dalafisk-product-section .dalafisk-product__block-heading + .product--short-description {
	padding-top: 0;
	border-top: 0;
}

/* The collapse itself — set by assets/dalafisk-product.js, never in CSS, so a
   failed script leaves every size visible rather than hidden behind a button
   that never appears. */
.dalafisk-product-section [data-dalafisk-collapsed] {
	display: none !important;
}

/* ==================================================================
   Price note, size pills and the "Fler storlekar" cell — the design's
   `.pd-moms`, `.pd-storlekar` and `.pd-fler`
   ================================================================== */

.dalafisk-product-section .dalafisk-product__moms {
	/* The top offset is NOT set here: this element also carries
	   `.product__tax.caption`, and that rule above is (0,3,0) to this one's
	   (0,2,0), so it wins whatever is written here. The `-4px` that used to sit
	   on this line was dead weight that read like the live value. */
	margin: 0;
	padding-bottom: 13px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dalafisk-text-5, #777);
}
.dalafisk-product-section .dalafisk-product__moms-unit {
	color: var(--dalafisk-text-3, #555);
	font-weight: 500;
}

/* The design's fieldset carries an aria-label instead of a visible legend —
   Pinnacle prints "Kalixlöjrom 80g burkar: 400g - 5 St x80G" above the row,
   which the design does not have and which repeats what the pressed pill says. */
.dalafisk-product-section .product-form__input--block > .form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The four-cell grid is declared ONCE, higher up, on
   `.dalafisk-product-section .variations .product-form__input--block`. It has to
   live on the FIELDSET, because Pinnacle emits the radios, their labels and the
   more-button as its direct children — there is no inner wrapper. Do not add a
   second, less specific copy here: `.variations` makes that rule (0,3,0), so an
   unscoped one silently loses and the phone breakpoint stops working. */
/* The pill itself is declared once, higher up, on
   `.dalafisk-product-section .variations input[type='radio'] + label` — it has
   to out-specify product.css's swatch sizing, so do not restate it here. */
/* MEASURED AGAINST THE DESIGN (1440, buy column 653px): the pill is
   157.3 x 62.5 — 10px padding, a 14px line at 1.55 (21.7px), a 3px gap, an
   11.5px line at 1.55 (17.8px), 10px padding.

   Ours came out 42px tall because Pinnacle's label carries line-height 1.25
   (computed 17.5px), so BOTH lines were short. The leading is what sets this
   pill's height, not the padding — declare it explicitly rather than inheriting
   whatever the theme happens to use. */
.dalafisk-product-section .product-form__input--block label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	/* Restating nowrap here would undo the wrap set above — this rule comes
	   later in the file at the same weight. See the note on that rule. */
	white-space: normal;
	overflow-wrap: break-word;
	text-align: center;
}
.dalafisk-product-section .dalafisk-variant__meta {
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.55;
	/* "2 kg" never wraps on its own; this is here so a longer unit cannot
	   escape the pill the way the name above did. */
	white-space: normal;
	overflow-wrap: break-word;
	color: var(--dalafisk-text-4, #666);
}
/* Selected: ink fill, no ring. Pinnacle marks the checked swatch with a 2px
   inset box-shadow in its accent (rgb(203,82,82) here), which read as a red
   error outline on the design's black pill. */
/* Pinnacle's selector is `.variations .product-form__input--block
   input[type="radio"]:checked + label` — (0,4,2). Matching .variations and
   the attribute takes this to (0,5,2) so it wins outright rather than
   relying on file order. */
.dalafisk-product-section .variations .product-form__input--block input[type="radio"]:checked + label,
.dalafisk-product-section .product-form__input--block input:checked + label {
	background: var(--dalafisk-ink);
	color: var(--dalafisk-white, #fff);
	box-shadow: none;
	border-color: transparent;
}
.dalafisk-product-section .variations .product-form__input--block input[type="radio"]:checked + label .dalafisk-variant__meta,
.dalafisk-product-section .product-form__input--block input:checked + label .dalafisk-variant__meta {
	color: rgba(255, 255, 255, .7);
}
.dalafisk-product-section .product-form__input--block input:focus-visible + label {
	outline: 2px solid var(--dalafisk-ink);
	outline-offset: 2px;
	box-shadow: none; /* see the focus note above: kills product.css's blue ring */
}

/* The more-button is the FOURTH cell, not a bar: same height and radius as a
   pill, outlined rather than filled so it does not read as a selectable size. */
.dalafisk-product-section .dalafisk-variant__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	grid-column: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 5px;
	border: 1px solid var(--dalafisk-pill-border, #d0d0d0);
	border-radius: 13px;
	background: none;
	color: var(--dalafisk-text-3, #555);
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s;
}
.dalafisk-product-section .dalafisk-variant__more:hover {
	background: var(--dalafisk-card-bg, #f4f4f4);
	border-color: var(--dalafisk-text-4, #666);
	color: var(--dalafisk-ink);
}
.dalafisk-product-section .dalafisk-variant__more b {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.55;
	white-space: nowrap;
}
.dalafisk-product-section .dalafisk-variant__more span {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--dalafisk-text-5, #777);
	white-space: nowrap;
}

/* Four columns are too tight for "1,12 kg" on a phone, so the design drops to
   three and gives the button its own full-width row. */
@media (max-width: 640px) {
	/* Same `.variations` scope as the base rule, for the reason above. */
	.dalafisk-product-section .variations .product-form__input--block {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.dalafisk-product-section .dalafisk-variant__more {
		grid-column: 1 / -1;
	}
}