/* ------------------------------------------------------------------
   Dalafisk – product carousel
   ------------------------------------------------------------------
   Ported from HTMLdesigns/ (.sektion + .karusell + .pilar).

   Uses Pinnacle's <theme-scroll> element, which is already native-scroll
   based (app.js drives scrollLeft and auto-disables the arrows at each end),
   so the design's scroll-snap feel and the theme's carousel are the same
   mechanism. Structure required by that element:
     theme-scroll > .theme-scroll--inner (the scroll viewport)
                  > .theme-scroll-nav    (the arrows)
   ------------------------------------------------------------------ */

.dalafisk-featured-collection {
	position: relative;
}

/* ---------- section header ----------
   No align-items override here on purpose. The design's `.sektion__topp` uses
   `align-items: baseline` (set on .dalafisk-section__header in dalafisk-base.css)
   so the carousel arrows sit on the HEADING's baseline. An earlier `flex-end`
   here looked identical while the header was one line — Bästsäljare has no
   subheading — but on Produktpaket, which does, it pushed the arrows to the
   bottom of the two-line text block: 48px below the design. */
.dalafisk-section__header-text h2 {
	margin: 0;
}
.dalafisk-section__header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}
.dalafisk-featured-collection__view-all {
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------- arrows (design .pilar / .pil) ---------- */
.dalafisk-featured-collection .theme-scroll-nav {
	position: static;
	display: flex;
	gap: 10px;
	flex: none;
}
/* app.css / slideshow.css / product.css all set .flickity-nav to
   position:absolute; top:50%; right:-23px so arrows float over the slides.
   The design puts them in the section header instead, so the positioning is
   reset here. These selectors are two classes deep, so they win over those
   single-class rules no matter which section loads its CSS first. */
.dalafisk-featured-collection .flickity-nav {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	transform: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--dalafisk-featured-collection-arrow, var(--dalafisk-ink));
	display: grid;
	place-items: center;
	background: var(--dalafisk-featured-collection-arrow-bg, var(--dalafisk-white));
	color: var(--dalafisk-featured-collection-arrow, var(--dalafisk-ink));
	padding: 0;
	transition: background .15s, color .15s;
}
.dalafisk-featured-collection .flickity-nav:hover:not(:disabled) {
	background: var(--dalafisk-featured-collection-arrow, var(--dalafisk-ink));
	color: var(--dalafisk-featured-collection-arrow-bg, var(--dalafisk-white));
}
.dalafisk-featured-collection .flickity-nav:disabled {
	opacity: .25;
	cursor: default;
}
.dalafisk-featured-collection .flickity-nav svg {
	width: 18px;
	height: 18px;
}

/* ---------- the scroller ---------- */
/* The row bleeds to the section's padding edge so the cut-off card runs to
   the screen edge, the way the design does with margin-inline.

   `!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 here
   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. The `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-featured-collection__scroll {
	display: block;
}
.dalafisk-featured-collection .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-featured-collection .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-featured-collection .os-scrollbar {
	display: none;
}
/* The track deliberately does NOT carry Pinnacle's .products.carousel classes.
   product-grid.css sets `.products.carousel { display: grid }`, which outranks a
   single-class rule here and would collapse the cards to grid columns. Only
   .carousel__slide is kept, because theme-scroll finds its slides with it. */
.dalafisk-featured-collection__track {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

/* 4.2 cards across by default: the fractional card is what tells people the
   row scrolls. 48px is the four 12px gaps between five columns. */
.dalafisk-featured-collection .carousel__slide {
	scroll-snap-align: start;
	min-width: 0;
	flex: 0 0 clamp(250px, calc((100% - 48px) / calc(var(--dalafisk-columns, 4) + 0.2)), 400px);
	display: flex;
}
.dalafisk-featured-collection .carousel__slide > * {
	width: 100%;
}

/* ---------- scroll reveal ---------- */
.dalafisk-motion .dalafisk-featured-collection[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-featured-collection[data-dalafisk-inview] {
	opacity: 1;
	transform: none;
}

@media (max-width: 640px) {
	/* 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 while the scroller
	   below was already written for 20 — which left the bled row 4px short at
	   each edge once the bleed actually started working. Doubled class because a
	   later copy of dalafisk-base.css would otherwise win. */
	.dalafisk-featured-collection.dalafisk-featured-collection {
		padding-inline: 20px;
	}
	.dalafisk-featured-collection .dalafisk-section__header {
		gap: 12px;
	}
	.dalafisk-featured-collection .flickity-nav {
		width: 30px;
		height: 30px;
	}
	.dalafisk-featured-collection .flickity-nav svg {
		width: 14px;
		height: 14px;
	}
	.dalafisk-featured-collection .theme-scroll--inner {
		scroll-padding-left: 20px;
		width: calc(100% + 40px) !important;
		margin: 0 -20px !important;
		padding: 0 20px 16px !important;
	}
	.dalafisk-featured-collection__track {
		gap: 10px;
	}
	.dalafisk-featured-collection .carousel__slide {
		flex: 0 0 min(78%, 300px);
	}
}