/* ------------------------------------------------------------------
   Dalafisk – testimonials
   ------------------------------------------------------------------
   Ported from HTMLdesigns/ (.omd), cards included. An earlier pass embedded
   the Judge.me app block instead, on the belief that per-review data was only
   available as the app's own HTML. It is not: judgeme.reviews_grid is a json
   metafield carrying rating, body, reviewer_name, product_title and
   verified_buyer — everything the design's card shows — so the cards are now
   server-rendered from real data and match the design exactly.

   Design class names mapped to the theme's vocabulary:
     omd         -> dalafisk-testimonials
     omd__snitt  -> dalafisk-testimonials__average
     karusell    -> dalafisk-testimonials__track
     omdkort     -> dalafisk-testimonials__card
   ------------------------------------------------------------------ */

.dalafisk-testimonials {
	background: var(--dalafisk-testimonials-bg, var(--dalafisk-card-bg));
}
/* The doubled class is deliberate. `.dalafisk-section` sets the vertical
   padding with a shorthand (72px … 0) and every Dalafisk section AFTER this one
   links dalafisk-base.css again — indexes 18, 21 and 23 against this file's 17 —
   so a later copy of that single-class rule was beating these equally-specific
   longhands. The band came out 72px on top with no bottom padding at all
   instead of the design's 56/56. Two classes settle it whatever the link order. */
.dalafisk-testimonials.dalafisk-testimonials {
	padding-top: 56px;
	padding-bottom: 56px;
}

.dalafisk-testimonials__average {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 7px;
	margin-bottom: 0;
	font-size: 14px;
	color: var(--dalafisk-testimonials-average, var(--dalafisk-text-3));
}

.dalafisk-testimonials__content {
	margin-top: 4px;
}

/* When no app block has been added yet, say so in the editor rather than
   rendering an empty grey band the merchant cannot explain. */
.dalafisk-testimonials__empty {
	padding: 32px;
	border: 1.5px dashed var(--dalafisk-card-border);
	border-radius: 20px;
	background: var(--dalafisk-white);
	color: var(--dalafisk-text-4);
	font-size: 15px;
	text-align: center;
}

/* ---------- carousel plumbing (mirrors dalafisk-featured-collection) ----------
   <theme-scroll> is display:flex row by default, which put the section header
   and the card row side by side instead of stacked. */
.dalafisk-testimonials__scroll {
	display: block;
}
/* The row bleeds past the section's gutter so the cut-off card runs to the
   screen edge, as `.karusell { margin-inline: -24px }` does in the design.
   `!important` is load-bearing here, not laziness: <theme-scroll> hands this
   element to OverlayScrollbars, which writes `padding:0; margin-left/right:0;
   width:calc(100% + 0px)` as INLINE styles — so the plain declarations below
   were dead and the row stayed clamped to the 1392px content width. The
   width has to be re-stated too, or the negative margins only shift the row
   left instead of widening it. `margin` shorthand also clears app.css's
   `margin-bottom: 20px !important`, which would otherwise double up with the
   20px of padding the design uses to clear the scrollbar area. */
.dalafisk-testimonials .theme-scroll--inner {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 24px;
	width: calc(100% + 48px) !important;
	margin: 0 -24px !important;
	padding: 0 24px 20px !important;
	/* OverlayScrollbars ALSO writes `left: -15px` inline whenever the browser
	   uses classic (space-taking) scrollbars, to push the native bar out of
	   sight. That shifted the whole bled row 15px off-centre. Our own
	   `scrollbar-width: none` already hides that bar, so the offset is pure
	   damage here. */
	left: 0 !important;
	scrollbar-width: none;
}
.dalafisk-testimonials .theme-scroll--inner::-webkit-scrollbar {
	display: none;
}
/* OverlayScrollbars draws its own 3px bar in a sibling element, so
   `scrollbar-width: none` above never reaches it. The design has no visible
   scrollbar on the row. */
.dalafisk-testimonials .os-scrollbar {
	display: none;
}
.dalafisk-testimonials .carousel__slide {
	scroll-snap-align: start;
	display: flex;
}
/* Arrows belong in the section header, as in the design — app.css floats
   .flickity-nav over the slides at top:50%; right:-23px. Two classes deep so
   this wins regardless of stylesheet order. */
.dalafisk-testimonials .theme-scroll-nav {
	position: static;
	display: flex;
	gap: 10px;
	flex: none;
}
.dalafisk-testimonials .flickity-nav {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	transform: none;
	/* The other half of app.css's centring is `margin-top: -23px`, which the
	   position reset left behind: both arrows floated 23px above the heading and
	   collapsed .theme-scroll-nav from 40px to 17px, breaking the header's
	   baseline alignment. */
	margin: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	display: grid;
	place-items: center;
	background: var(--dalafisk-testimonials-card-bg, var(--dalafisk-white));
	color: var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	padding: 0;
	transition: background .15s, color .15s;
}
.dalafisk-testimonials .flickity-nav:hover:not(:disabled) {
	background: var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	color: var(--dalafisk-testimonials-card-bg, var(--dalafisk-white));
}
.dalafisk-testimonials .flickity-nav:disabled {
	opacity: .25;
	cursor: default;
}
.dalafisk-testimonials .flickity-nav svg {
	width: 18px;
	height: 18px;
}
/* app.css hides carousel arrows below 768px (`.theme-scroll .flickity-nav`).
   The design keeps them at every width — 40px on desktop, 30px on phones — so
   that rule is cleared here. Three classes to win whatever the link order. */
.dalafisk-testimonials.dalafisk-testimonials .flickity-nav {
	display: grid;
}

/* ---------- undo Pinnacle's <blockquote> treatment ----------
   app.css styles the bare element as a pull-quote: centred, 75px/45px padding,
   1.375rem grey text, and a 9rem decorative “ pinned above it. All of that
   landed on the design's compact review card. The element stays a blockquote
   because that is what it is; the leaked paint is reset instead. */
.dalafisk-testimonials .dalafisk-testimonials__card {
	position: relative;
	text-align: left;
	border-left: 0;
	color: var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	font-size: inherit;
	/* app.css also sets line-height:1.4 on the element, which the footer's
	   product line inherited — measured 17.5px against the design's 19.375px. */
	line-height: 1.55;
}
.dalafisk-testimonials .dalafisk-testimonials__card::before {
	content: none;
}
.dalafisk-testimonials .dalafisk-testimonials__card p {
	color: var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	text-align: left;
}

/* ---------- the quote cards (design .karusell / .omdkort) ---------- */
.dalafisk-testimonials__track {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.dalafisk-testimonials__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	/* 24/26/22 at every width. The design has a `@media (max-width: 640px)` rule
	   dropping this to 20/20/18, but it is written as `.omdkort` against the
	   `.karusell .omdkort` that sets it here, so it never actually applies —
	   measured at 390px the design's card still has 24px/26px/22px. This matches
	   what the design renders, not the rule it never reaches. */
	padding: 24px 26px 22px;
	background: var(--dalafisk-testimonials-card-bg, var(--dalafisk-white));
	border-radius: 20px;
}
.dalafisk-testimonials__track .carousel__slide {
	flex: 0 0 min(380px, 82vw);
	/* The design carries the same line with the same reason: "min-width:0 —
	   annars sätter kortens nowrap-rubriker bredden i stället för flex-basis".
	   A flex item's automatic minimum size is its min-content width, and the
	   nowrap product line under the longest title measured 403px, stretching
	   that one card past the 380 every other card sits at. With the minimum
	   released the line ellipsizes instead, which is what it is set up to do. */
	min-width: 0;
}
/* In the design `.omdkort` IS the flex item, so it is always the full 380px.
   Here the slide is the flex item and the card sits inside it, sizing itself to
   max-content — which only stopped mattering once the quote was clamped and the
   meta line set to nowrap: short reviews then produced visibly narrow cards
   (measured 220px next to 380px). Same fix as dalafisk-featured-collection. */
.dalafisk-testimonials .carousel__slide > * {
	width: 100%;
}
/* `flex: 1` on the quote pushes the footer to the bottom, so names line up
   across cards of different quote lengths. */
/* The star row: the design sets `svg { display: block }` globally, which is what
   keeps `.stjarnor` exactly as tall as the stars (15px). Without it the inline
   SVGs sit on a text baseline and the row takes the card's 24.8px line-height,
   adding ~10px of air above the quote. Scoped to the card so the ratings in the
   product cards and on the product page are left as they are. */
.dalafisk-testimonials__card .dalafisk-rating__star svg {
	display: block;
}

/* The quote is set in the heading face (design: `font-family: var(--rubrik)` =
   Prompt). That comes from the `heading-font` class on the <p>, which the theme
   generates from the merchant's heading-font setting — this used to read
   `var(--dalafisk-heading-font, inherit)`, a token nothing defines, so the
   quotes silently fell back to the body face. */
.dalafisk-testimonials__card p {
	flex: 1;
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -.01em;
	/* Three lines, as the design. Its own longest quote runs to exactly three
	   (76.68px at 25.56px a line), which is what makes its cards 209.5px tall.
	   Real Judge.me bodies are not written to that length — a single 167-character
	   review stretched the whole stretched row to 280px and left ~100px of dead
	   space under the short quotes. Clamping restores the design's proportion;
	   the full text stays on the product page in the Judge.me widget. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
/* ---------- the card as a link to its product ----------
   Judge.me's own cards carousel makes each quote a link to the product it is
   about; doing the same is most of what makes this read as the app's widget
   rather than a static quote wall. Same stretched-overlay pattern as
   dalafisk-product-card: an empty <a> over the card, so the blockquote keeps
   its semantics and a screen reader gets one short label instead of the whole
   quote as a link name. The card is already position:relative, from the
   blockquote reset above. */
.dalafisk-testimonials__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
/* The design's link language is an underline on hover (`.lank:hover`), so the
   card borrows it rather than inventing a lift or a shadow the design has
   nowhere else. It lands on the product name only — that is where the card
   goes. 3px rather than the design's 4px because this line is 12.5px, where a
   4px offset reads as a detached rule. */
.dalafisk-testimonials__product {
	text-underline-offset: 3px;
}
.dalafisk-testimonials__card--linked:hover .dalafisk-testimonials__product,
.dalafisk-testimonials__card--linked:focus-within .dalafisk-testimonials__product {
	text-decoration: underline;
}
/* Keyboard users get a real focus ring on the card, since the link itself is
   invisible. */
.dalafisk-testimonials__link:focus-visible {
	outline: 2px solid var(--dalafisk-testimonials-card-text, var(--dalafisk-ink));
	outline-offset: 2px;
}

.dalafisk-testimonials__card footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dalafisk-testimonials__card footer b {
	font-size: 14.5px;
	font-weight: 600;
}
/* Stars in the average line and on every card, so the section carries its own
   rating colour instead of reaching for the global --dalafisk-rating-color. */
.dalafisk-testimonials .dalafisk-rating__stars {
	color: var(--dalafisk-testimonials-stars, var(--dalafisk-rating-color));
}
.dalafisk-testimonials__card footer span {
	font-size: 12.5px;
	color: var(--dalafisk-testimonials-meta, var(--dalafisk-text-4));
	/* One line, as every card in the design has. Real product titles are longer
	   than the design's copy — "1,5Kg Svensk vildlax + 2,5 Kg Torskrygg 180-250G
	   · Verifierat köp" wrapped to two, and because the cards stretch to equal
	   height that one review added 19.4px to all twelve. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Kept for the @app fallback path, which only renders if the metafield is
   unavailable. */
.dalafisk-testimonials .jdgm-carousel,
.dalafisk-testimonials .jdgm-widget {
	font-family: inherit;
}
.dalafisk-testimonials .jdgm-carousel-item {
	border-radius: 20px;
}

/* ---------- scroll reveal ---------- */
.dalafisk-motion .dalafisk-testimonials[data-dalafisk-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-motion .dalafisk-testimonials[data-dalafisk-inview] {
	opacity: 1;
	transform: none;
}

@media (max-width: 640px) {
	/* Measured off the design at 390px: 40px on top, 56px underneath. `.sektion`
	   drops the top padding to 40 in its own media block, but `.omd`'s
	   padding-bottom:56px is never overridden, so the band is asymmetric here. */
	.dalafisk-testimonials.dalafisk-testimonials {
		padding-top: 40px;
		padding-bottom: 56px;
		/* The design narrows every section's gutter to 20px on phones
		   (`.wrap, .sektion { padding-inline: 20px }`); dalafisk-base.css only
		   changes the top padding, so this section kept the desktop 24px. Those
		   8px are what let "Vad kunderna säger" sit on one line beside the 70px
		   arrow pair — at 24px the heading column falls to 248px, one pixel under
		   what the line needs, and the heading wraps. The scroller below already
		   assumed the design's 20px. */
		padding-inline: 20px;
	}
	.dalafisk-testimonials__track {
		gap: 10px;
	}
	.dalafisk-testimonials__card p {
		font-size: 16.5px;
	}
	/* The design shrinks every arrow to 30px below 640px, but keeps the 18px
	   icon inside it and the header's 24px gap — measured at 390px, where the
	   30px pair takes 70px and "Vad kunderna säger" still sits on one line. */
	.dalafisk-testimonials .flickity-nav {
		width: 30px;
		height: 30px;
	}
	.dalafisk-testimonials .theme-scroll--inner {
		scroll-padding-left: 20px;
		width: calc(100% + 40px) !important;
		margin: 0 -20px !important;
		padding: 0 20px 16px !important;
	}
}