/* ==================================================================
   Dalafisk product page — the four sections below the fold
   ==================================================================
   recept · omdömen · ofta köpt tillsammans · liknande produkter
   Design: HTMLdesigns/dalafisk-produktsida-lojrom.html
   Shared section chrome (.dalafisk-section*) matches the landningssida.
   ================================================================== */

.dalafisk-section__inner {
	width: 100%;
	/* The design's container is `--max: 1350px` on the PRODUCT page — the token
	   is per page type in the designs (landningssida, kategorisida and om-oss are
	   1760, receptsamling 1260), so `--dalafisk-max-width` stays 1760 globally and
	   only these sections pin to 1350.
	
	   THE FORMULA IS THE DESIGN'S OWN, and it replaces `max-width: 1350px` plus
	   `padding-inline: clamp(16px, 3vw, 40px)`. Those two together made the
	   CONTENT 1350 − 80 = 1270 rather than 1350: the cap and the padding were
	   both applied, so the band sat 40px inside the edge everything else lines up
	   on. Measured 1270 at x=85 against the design's 1350 at x=45.
	
	   `max(24px, …)` keeps a real gutter once the viewport is narrower than the
	   cap, which is the whole reason the design writes it this way.
	
	   THE GUTTER IS SET ON THE SHELL, NOT HERE. `.dalafisk-section` already
	   carries the same formula against the 1760 token, so putting it on the inner
	   as well padded the band twice — 24 + 24 — and `100%` inside the already
	   padded shell was 1392, not the viewport, so the cap never even engaged.
	   Measured 1344 at x=48. The shell's own value is overridden instead, and
	   this element just fills it. */
}

/* These three sections are the only users of `.dalafisk-section__inner`, so the
   override can be listed rather than guessed at with `:has()`.

   THE CLASS IS DOUBLED ON PURPOSE. Every Dalafisk section re-links
   dalafisk-base.css, so a later section's copy of it re-declares
   `.dalafisk-section` AFTER this file — and at equal specificity (0,1,0) the
   later declaration wins, which is why the single-class version of this rule
   measured 1392 at x=24, the shell's value, not this one. Doubling to (0,2,0)
   settles it by weight instead of by load order. Same fix the rest of the port
   uses; see the note at the top of dalafisk-base.css. */
.dalafisk-product-recipes.dalafisk-product-recipes,
.dalafisk-product-reviews.dalafisk-product-reviews,
.dalafisk-product-bundle.dalafisk-product-bundle {
	padding-inline: max(24px, calc((100% - 1350px) / 2));
}

/* Heading row: title left, link right, baselines aligned — design .sektion__topp */
.dalafisk-section__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.dalafisk-section__sub {
	margin-top: 6px;
	font-size: 15px;
	color: var(--dalafisk-section-sub, var(--dalafisk-text-3, #555));
}

.dalafisk-link {
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--dalafisk-section-link, var(--dalafisk-ink, #1a1a1a));
}

/* ---------- recept — design .pd-recept ---------- */
.dalafisk-recipes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.dalafisk-recipe-card {
	display: flex;
	flex-direction: column;
	background: var(--dalafisk-product-recipes-card-bg, var(--dalafisk-card-bg, #f3f3f3));
	border-radius: 20px;
	overflow: hidden;
	color: inherit;
}

.dalafisk-recipe-card__media {
	height: 170px;
	overflow: hidden;
	background: var(--dalafisk-product-recipes-media-bg, var(--dalafisk-white, #fff));
}

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

.dalafisk-recipe-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 18px;
	flex: 1;
}

/* The design's `.receptkort h3` declares no colour at all, so it follows the
   card — which is the whole point on the collection row, where
   `.receptkort:hover { background: var(--ink); color: var(--vit) }` turns the
   card to ink. Pinnacle colours every h1-h6 with `var(--color-heading)`, which
   dalafisk-base.css rebinds to the Dalafisk ink, so the title kept that ink on
   an ink background and VANISHED on hover: measured rgb(26,26,26) text on
   rgb(26,26,26). Only the one-line excerpt was left readable, which is what the
   "hover recept längst ner på collectionsida" screenshots show. */
.dalafisk-recipe-card__title {
	font-size: 17.5px;
	font-weight: 500;
	color: inherit;
}

.dalafisk-recipe-card__meta {
	font-size: 13px;
	color: var(--dalafisk-product-recipes-muted, var(--dalafisk-text-4, #666));
}

/* The meta line's separator, the design's `.rkort__meta i` — a 3px dot between
   "15 min", "4 pers" and the basket count.

   NOT on the collection row, which puts the article's EXCERPT in this slot and
   clamps it to one line with `display:-webkit-box`. Unscoped, this rule matched
   there too, at the same (0,2,0) specificity as the clamp and in a file that
   loads after dalafisk-collection.css — so it won, `display:flex` disabled the
   clamp, and a long excerpt grew the meta from 22px to 43px and stretched the
   whole row. Measured on /collections/fisk. */
.dalafisk-product-recipes--product .dalafisk-recipe-card__meta,
.dalafisk-product-recipes--article .dalafisk-recipe-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.dalafisk-product-recipes--product .dalafisk-recipe-card__meta i,
.dalafisk-product-recipes--article .dalafisk-recipe-card__meta i {
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--dalafisk-product-recipes-muted, var(--dalafisk-text-5, #888));
}

/* On a phone the card is about 159px wide and the meta line's flex items are
   anonymous text runs, which a flex container is free to break mid-word: the
   measured result was "60 min · 6 per s · Avanc erad". Laid out as ordinary
   text it wraps at spaces instead, and the dots keep their alignment as
   inline-blocks. The design has no rule here — its own grid breaks the same way
   at this width. */
@media (max-width: 640px) {
	.dalafisk-product-recipes--product .dalafisk-recipe-card__meta,
	.dalafisk-product-recipes--article .dalafisk-recipe-card__meta {
		display: block;
		line-height: 1.5;
	}
	.dalafisk-product-recipes--product .dalafisk-recipe-card__meta i,
	.dalafisk-product-recipes--article .dalafisk-recipe-card__meta i {
		display: inline-block;
		vertical-align: middle;
		margin: 0 7px;
	}
}

/* ---------- the shopping list on a product page — design .pd-varor ----------
   The card is a <div> with a link stretched across it (see the section), so the
   footer's button is a sibling of the link rather than inside it. Everything
   here is scoped to `--product`: the collection row draws the same class names
   as a plain card and must not inherit any of it. */
.dalafisk-product-recipes--product .dalafisk-recipe-card {
	position: relative;
}
.dalafisk-recipe-card__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dalafisk-recipe-card__item {
	display: grid;
	grid-template-columns: 16px 1fr auto;
	align-items: center;
	gap: 9px;
	font-size: 14px;
}
.dalafisk-recipe-card__item svg {
	display: block;
	flex: none;
	color: var(--dalafisk-ink, #1a1a1a);
}
.dalafisk-recipe-card__item em {
	font-style: normal;
	font-size: 13px;
	color: var(--dalafisk-product-recipes-muted, var(--dalafisk-text-4, #666));
}
.dalafisk-recipe-card__item b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The design's `.pd-ovrigt` is one short line ("gräddfil, dill, potatis"), and
   it is unclamped there because the mock recipes have three pantry items. A
   real one on this shop has nineteen, which turned the card into a paragraph
   and left the row of cards at wildly different heights. Two lines keeps the
   design's intent — a glance at what you need at home — and the recipe page
   still lists every one of them. */
.dalafisk-recipe-card__pantry {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--dalafisk-text-5, #888);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* The footer is the shared basket component; only the design's product-page
   proportions are set here (design .pd-receptkort__fot). */
.dalafisk-product-recipes--product .dalafisk-recipe-basket {
	padding-top: 12px;
	border-top: 1px solid #e2e2e2;
}
.dalafisk-product-recipes--product .dalafisk-recipe-basket__label {
	font-size: 12.5px;
}
.dalafisk-product-recipes--product .dalafisk-recipe-basket__sum {
	font-size: 17px;
}
.dalafisk-product-recipes--product .dalafisk-recipe-basket__add {
	padding: 9px 16px;
	font-size: 14px;
}

/* ---------- "Fler recept" inside a recipe — design .rkort's footer ----------
   No button here: the whole card is a link, and the design answers the same
   question with an arrow. */
.dalafisk-product-recipes--article .dalafisk-recipe-basket {
	padding-top: 12px;
	border-top: 1px solid #e2e2e2;
}
.dalafisk-product-recipes--article .dalafisk-recipe-card:hover .dalafisk-recipe-basket__arrow {
	transform: translateX(3px);
}

/* ---------- omdömen — design .pd-omdomen ---------- */
.dalafisk-reviews {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 44px;
	align-items: start;
}

.dalafisk-reviews__summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 22px;
	border-radius: 20px;
	background: var(--dalafisk-product-reviews-surface, var(--dalafisk-card-bg, #f3f3f3));
}

.dalafisk-reviews__score {
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
}

.dalafisk-reviews__count {
	font-size: 13.5px;
	color: var(--dalafisk-product-reviews-muted, var(--dalafisk-text-4, #666));
}

.dalafisk-reviews__score {
	/* The design sets `font-family: var(--rubrik)` here — Prompt. `heading-font`
	   is Pinnacle's own utility carrying the merchant's heading font, so the
	   number follows the theme setting instead of naming a family twice. */
	font-variant-numeric: tabular-nums;
}

/* The design's `.pd-snitt .btn { width: 100% }`. */
/* NOTE: this button has always rendered at `.dalafisk-button`'s own size —
   13px/26px, 16px, 45px tall. It used to also declare `padding: 11px 20px;
   font-size: 15px`, which never once applied: both rules are single-class, and
   dalafisk-base.css was re-linked by every section, so base always came last and
   won. Base is now linked once up front, which would have handed those
   declarations the win and silently shrunk the button to 40px — so they are
   dropped rather than kept, and the button keeps the size it has always had.
   If the smaller button was the intent, restore them as
   `.dalafisk-reviews__write.dalafisk-reviews__write` (0,2,0) to mean it. */
.dalafisk-reviews__write {
	width: 100%;
	margin-top: 4px;
}

.dalafisk-reviews__list {
	min-width: 0;   /* Judge.me's widget is wide; without this it blows the grid out */
	display: flex;
	flex-direction: column;
	gap: 16px;      /* .pd-recensioner */
	align-items: stretch;
}

/* `.pd-recensioner > .lank` — left-aligned, not stretched across the column. */
.dalafisk-reviews__all {
	align-self: flex-start;
	font-size: 15px;
}

/* ==================================================================
   Judge.me, reshaped to the design
   ==================================================================
   The widget arrives with a header of its own — the words "Kundrecensioner",
   the average, the review count and a write-review button — every one of which
   the design puts in the summary card to the left. Left alone, the band showed
   the score twice, the count twice and two different write buttons. These rules
   hide THAT HEADER ONLY; the review list, its sort control, the paging and the
   review form are all still Judge.me's own.

   Class names belong to an app and can change with an app update. Each rule is
   therefore additive — it hides or restyles, never supplies layout the widget
   needs — so a renamed class shows Judge.me's stock widget rather than a
   collapsed one.
   ================================================================== */
.dalafisk-product-reviews .jm-review-widget-minimal-header__title,
.dalafisk-product-reviews .jm-average-rating-display--minimal-header,
.dalafisk-product-reviews .jm-review-widget-minimal-header__action-buttons,
.dalafisk-product-reviews .jdgm-rev-widg__header {
	display: none;
}

/* With the title and average gone the header is just the sort control, which
   the design puts at the top of the column, left to right. */
.dalafisk-product-reviews .jm-review-widget__header {
	padding-bottom: 0;
}

/* `.pd-omd` — each review as a bordered card. The design's card border is
   `--kortram` (#dedede) = `--dalafisk-card-border`, not `--dalafisk-line`
   (#ccc), which is the darker rule used for dividers. */
.dalafisk-product-reviews .jm-review-item__body {
	padding: 20px 22px 22px;
	border: 1px solid var(--dalafisk-product-reviews-line, var(--dalafisk-card-border, #dedede));
	border-radius: 18px;
}

.dalafisk-product-reviews .jm-review-content {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dalafisk-product-reviews-text, var(--dalafisk-text-2, #444));
}

/* ---------- ofta köpt tillsammans — design .pd-paket ---------- */
.dalafisk-bundle__panel {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 24px;
	align-items: center;
	padding: 22px;
	border-radius: 20px;
	background: var(--dalafisk-product-bundle-surface, var(--dalafisk-card-bg, #f3f3f3));
}

.dalafisk-bundle__items {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dalafisk-bundle__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.dalafisk-bundle__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: var(--dalafisk-product-bundle-media-bg, var(--dalafisk-white, #fff));
}

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

.dalafisk-bundle__title {
	font-size: 14px;
	font-weight: 500;
}

.dalafisk-bundle__title a { color: inherit; }

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

.dalafisk-bundle__plus {
	flex: none;
	font-size: 20px;
	color: var(--dalafisk-product-bundle-muted, var(--dalafisk-text-4, #666));
}

.dalafisk-bundle__buy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

.dalafisk-bundle__total {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--dalafisk-product-bundle-total, var(--dalafisk-ink, #1a1a1a));
}

.dalafisk-bundle__form { margin-top: 8px; }
.dalafisk-bundle__submit { width: 100%; }

/* The bundle band renders its wrapper unconditionally — the <product-recommendations>
   element has to exist for its fetch to run at all. When the store has no
   complementary products configured for a product, the fetch returns a section
   with no panel, which would otherwise leave an empty ~72px gap. */
.dalafisk-product-bundle:not(:has(.dalafisk-bundle__panel)) {
	display: none;
}

/* ---------- liknande produkter ----------
   This section is built on Pinnacle's `.row > .small-12.columns` rather than
   `.dalafisk-section__inner`, so it needs the container rule of its own —
   without it the card row started at x=40 while everything above it started at
   x=45, which is visible as a step in the left edge. */
.dalafisk-product-recommendations .products.carousel {
	/* `--column-gap`, not `gap`. Pinnacle sizes the columns with
	   `calc((100% - (var(--column-gap) * (cols - 1))) / cols)`, so setting `gap`
	   alone changed the RENDERED gap to 12 while the width maths kept using 20 —
	   the row then came up 24px short of the container (4 cards measured 322.5,
	   totalling 1326 inside 1350). Setting the variable keeps both in step. */
	--column-gap: 12px;

	/* The design shows four cards and a sliver of the fifth (measured: cards at
	   x 45, 367, 689, 1011, 1333 inside 1350) — the peek is what says the row
	   scrolls. Dividing by `cols + 0.2` reserves it. Same trick, same 0.2, as
	   the landningssida's carousel in dalafisk-featured-collection.css.
	
	   THIS IS ALSO WHAT FIXED THE CROPPING. At six columns the card was 210 wide
	   against a fixed 317 tall media box — an 0.66 portrait frame holding square
	   product shots, so `object-fit: cover` threw away a third of every image and
	   blew up what was left by 1.5x. How much it zoomed depended on where each
	   photo's subject sat, which is why no two looked the same size. The design's
	   card is 310 x 317 — near square — and barely crops at all. */
	grid-auto-columns: calc(
		(100% - (var(--column-gap) * (var(--mobile-columns) - 1))) / calc(var(--mobile-columns) + 0.2)
	);
}

.section-dalafisk-product-recommendations > .row {
	max-width: none;
	padding-inline: max(24px, calc((100% - 1350px) / 2));
}

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

/* ==================================================================
   Narrow screens — design breakpoint 920/921px, same as the header
   ================================================================== */
/* The design narrows the summary card before it stacks it. */
@media (max-width: 1100px) {
	.dalafisk-reviews { grid-template-columns: 260px 1fr; gap: 28px; }
}

/* The design drops the gutter to 20px on phones (`.wrap, .sektion`). */
@media (max-width: 640px) {
	.dalafisk-product-recipes.dalafisk-product-recipes,
	.dalafisk-product-reviews.dalafisk-product-reviews,
	.dalafisk-product-bundle.dalafisk-product-bundle,
	.section-dalafisk-product-recommendations > .row {
		padding-inline: 20px;
	}
}

@media (max-width: 920px) {
	.dalafisk-recipes__grid { grid-template-columns: 1fr; }
	.dalafisk-reviews { grid-template-columns: 1fr; gap: 24px; }
	.dalafisk-bundle__panel { grid-template-columns: 1fr; }
	.dalafisk-bundle__items { flex-wrap: wrap; }
}