/*
 * Återanvändbar "svepbar rad"-komponent (.np-hscroll).
 *
 * Bygger på samma mönster som Shopifys Dawn-tema och de flesta moderna
 * e-handelssajter använder för svepbara produkt-/varumärkesrader: en
 * `overflow-x: auto` + `scroll-snap-type`-container. Mus/trackpad
 * (wheel-event) och pil-knapparna använder native scrollBy rakt av.
 *
 * TOUCH är däremot en UNDANTAGS-lösning, inte native scroll (se
 * initTouchDirectionLock() i assets/js/scroll-carousel.js för hela
 * bakgrunden): på riktig iOS Safari "håller kvar" ett overflow-x:auto-
 * element scroll-ägarskapet för TOUCH efter att det en gång skrollats
 * sidledes - varje efterföljande touch som landar på/nära elementet
 * tolkas då som en fortsättning på DEN sidledes skrollningen istället för
 * att lämnas vidare till sidans egna lodräta scroll, tills en touch
 * startar helt utanför elementet. Bekräftat via ett helt isolerat
 * testfall (en tom div med ENDAST overflow-x:auto, inget annat alls)
 * direkt på en riktig iPhone - alltså inget vi kan lösa med mer CSS.
 * touch-action: pan-y nedan gör därför att webbläsaren ALDRIG äger den
 * sidledes riktningen för touch - JS:en sköter sidledes touch-drag helt
 * själv, medan lodrätt touch (sidscroll) lämnas helt orört/nativt.
 *
 * Använd genom att lägga klassen "np-hscroll" på en wrapper runt valfritt
 * innehåll (t.ex. woodmart_shortcode_brands() med style=grid, eller ett
 * [products]-shortcode), plus två knappar med klasserna
 * "np-hscroll-arrow np-hscroll-arrow--prev" / "--next" - se
 * assets/js/scroll-carousel.js för knapp-logiken.
 */

.np-hscroll {
	position: relative;
}

.np-hscroll .wd-grid-g,
.np-hscroll ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	/* Utan denna blir overflow-y automatiskt "auto" också (CSS-regeln att
	   om EN av overflow-x/-y sätts till nåt annat än "visible" så byts den
	   andra ut mot "auto"). */
	overflow-y: hidden;
	/* touch-action: auto (default) - HELT native touch-scroll i båda
	   riktningar, precis som .np-brand-hero-track (se brand-hero-carousel.css).
	   Tidigare pan-y + initTouchDirectionLock() i JS (preventDefault +
	   transform per bildruta) löste "vertikal scroll fastnar"-buggen (se
	   filhuvudet) men gjorde själva svepet märkbart mindre smidigt på riktig
	   iPhone (bekräftat av användaren: samma typ av rad ovanför, hero-
	   karusellen, som ENDAST använder native scroll utan någon JS-touch-
	   hantering alls, kändes helt smidig - "Our Brands" med JS-hanteringen
	   gjorde det inte). preventDefault() stänger av webbläsarens egen,
	   kompositor-trådsdrivna svep-fysik och tvingar allt genom huvudtråden
	   istället, vilket är den sortens paus/hack som kändes. mandatory
	   scroll-snap (se nedan) ersätter JS:ens "snappa till närmaste kort". */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 16px !important; /* Lätt luft mellan rutorna - satt explicit så den inte beror på Woodmarts --wd-gap-variabel. */
	/* Webbläsarens "scroll anchoring" (kompenserar automatiskt scrollLeft när
	   innehåll ovanför/inuti scroll-ytan skiftar layout, t.ex. när bilder
	   färdigladdas efter initLoop()'s jumpScrollLeft()) körde annars över vårt
	   avsiktliga 10px-vänsterinsteg (se .np-hscroll-mobile) en liten stund
	   efter sidladdning - bekräftat via debug-loggning att jumpScrollLeft()
	   bara anropades EN gång med rätt värde, men scrollLeft ändå drev iväg
	   efteråt utan att gå via vår kod. */
	overflow-anchor: none;
}

.np-hscroll .wd-grid-g::-webkit-scrollbar,
.np-hscroll ul.products::-webkit-scrollbar {
	display: none;
	height: 0;
}

.np-hscroll .wd-grid-g > .wd-col,
.np-hscroll .wd-grid-g > li.product {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Standard: 4 synliga rutor på desktop, 2 på surfplatta, ~1.15 (för att
   antyda att det finns fler) på mobil - matchar tidigare per_row-värden.
   Bredden räknar bort gap:et ovan så att exakt 4/2 rutor får plats utan
   att skjuta ut en bit av nästa ruta i onödan. */
.np-hscroll .wd-grid-g > .wd-col {
	flex-basis: calc( 25% - 12px );
	max-width: calc( 25% - 12px );
}

@media ( max-width: 1024px ) {
	.np-hscroll .wd-grid-g > .wd-col {
		flex-basis: calc( 50% - 8px );
		max-width: calc( 50% - 8px );
	}
}

@media ( max-width: 576px ) {
	.np-hscroll .wd-grid-g > .wd-col {
		flex-basis: 85%;
		max-width: 85%;
	}
}

@media ( max-width: 782px ) {
	/* Bryter ut till HELA skärmbredden, inte bara till kanten av .container.
	   Det finns två inkapslade lager .container-padding (15px vardera) på
	   den här sidan: temats egna <main class="container"> OCH .np-home-
	   content (som också har klassen "container") - -15px kapade bara det
	   INRE lagret, vilket lämnade en synlig vit kant på 15px kvar i varje
	   sida (bekräftat via Playwright: en <main>-nivå på 390px bred med
	   padding-inline:15px, plus ETT till 15px-lager från .np-home-content
	   självt). -30px kapar båda lagren så raden verkligen går kant-till-
	   kant med den fysiska skärmen. Samma utbrytning som .np-hscroll-mobile
	   använder för produktraden - så "Our Brands" och "Best Selling
	   Products" ligger i linje med varandra på mobil. */
	.np-hscroll {
		margin-inline: -30px;
	}

	.np-hscroll .wd-grid-g,
	.np-hscroll ul.products {
		/* Ingen egen gutter längre - användaren ville ha bort den vita
		   padding:en helt, inte bara flytta ut svep-ytan till kanten. 10px
		   kvar bara på vänster sida (inte höger) - explicit önskemål. */
		padding-inline: 10px 0;
		/* KRÄVS för att 10px-insteget ovan faktiskt ska sitta kvar: med
		   scroll-snap-type:mandatory (se basregeln ovan) rättar webbläsaren
		   annars TYST tillbaka varje scrollLeft-position som inte räknas som
		   "godkänd" snap-position - och utan denna rad är den enda godkända
		   positionen där kortets kant ligger exakt vid scroll-ytans kant
		   (0px), INTE 10px in. scroll-padding-inline-start omdefinierar var
		   "kanten" räknas vara för snap-syften, så både JS:ens jumpScrollLeft
		   (initLoop() i JS) och native touch-swipe landar på samma,
		   konsekventa 10px-insteg. Bekräftat via debug-loggning: utan denna
		   rad hoppade JS:en initialt till rätt position, men webbläsaren
		   drev sedan tyst tillbaka den till 0px inom kort. */
		scroll-padding-inline-start: 10px;
	}
}

.np-hscroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: #111;
	transition: opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.np-hscroll-arrow:hover {
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
}

.np-hscroll-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.np-hscroll-arrow--prev {
	left: -22px; /* Halva knappens bredd (44px) - så den hamnar hälften utanför bilden. */
}

.np-hscroll-arrow--next {
	right: -22px;
}

@media ( max-width: 782px ) {
	.np-hscroll-arrow {
		display: none;
	}
}

/* Liten svep-indikator under raden: ett ljust "spår" med en mörkare
   "tumme" som glider i takt med scrollningen (se updateHint() i
   scroll-carousel.js) - en visuell bekräftelse på att raden går att
   svepa/scrolla i sidled. */
.np-hscroll-hint-track {
	position: relative;
	width: 120px;
	height: 4px;
	margin: 14px auto 0;
	border-radius: 2px;
	background: rgba( 0, 0, 0, 0.08 );
	overflow: hidden;
}

.np-hscroll-hint {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	min-width: 24px;
	border-radius: 2px;
	background: rgba( 0, 0, 0, 0.35 );
}

/* Variant: "np-hscroll-mobile" - samma svepbara-rad-teknik som ovan, men
   ENDAST aktiv under mobil-brytpunkten. Desktop/surfplatta behåller sin
   vanliga rutnätslayout (flera rader) helt orörd - använd den här klassen
   när du bara vill göra en sektion svepbar på mobil, t.ex. en produktrad
   som annars visar 2 kolumner i bredd och annars skulle brytas till fler
   rader. Kräver ingen JS (pilar behövs sällan på mobil - rent touch-svep
   räcker), men går fint att kombinera med .np-hscroll-arrow om man vill. */
@media ( max-width: 782px ) {
	/* Bryt ut till HELA skärmbredden - se den utförliga kommentaren vid
	   .np-hscroll ovan: två inkapslade .container-padding-lager (temats
	   <main class="container"> + .np-home-content, som också har klassen
	   "container") behöver kapas, -15px kapade bara det ena och lämnade en
	   synlig vit kant kvar i varje sida. */
	.np-hscroll-mobile {
		margin-inline: -30px;
	}

	.np-hscroll-mobile .wd-grid-g,
	.np-hscroll-mobile ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		/* Se kommentaren vid .np-hscroll ovan - touch-action: auto (default),
		   helt native touch-scroll, ingen JS-hantering. */
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 12px !important;
		/* Ingen egen gutter längre - kort-till-kort-raden ska gå helt
		   kant-till-kant med skärmen, inte bara svep-ytan. */
		padding-inline: 0;
		/* scroll-padding-inline-start flyttar snap-punkten in från
		   vänsterkanten (inte containerns padding, utan var webbläsaren
		   "fäster" ett kort vid scroll-snap) - så en flik av FÖREGÅENDE kort
		   alltid syns till vänster när man bläddrat förbi det första kortet,
		   precis som nästa kort redan syns till höger (75%-bredden). 27px,
		   INTE 15px: 12px av det äts upp av gap:et mellan korten (annars
		   syns bara 3px av föregående kort + 12px tomt mellanrum, knappt
		   urskiljbart som "ett kort") - 12px gap + 15px faktiskt synlig
		   kortyta = 27px, verifierat via Playwright. Ingen motsvarande
		   scroll-padding-inline-end - höger-fliken kommer redan gratis av
		   att korten bara är 75% breda. */
		scroll-padding-inline-start: 27px;
	}

	.np-hscroll-mobile .wd-grid-g::-webkit-scrollbar,
	.np-hscroll-mobile ul.products::-webkit-scrollbar {
		display: none;
		height: 0;
	}

	.np-hscroll-mobile .wd-grid-g > .wd-col,
	.np-hscroll-mobile .wd-grid-g > li.product {
		scroll-snap-align: start;
		flex-shrink: 0;
		/* 1 och 1/3 produkt synligt åt gången (100% / 1.333 ≈ 75%). Nu när
		   raden går kant-till-kant med skärmen (ingen dold .container-
		   padding kvar att räkna procenten mot) stämmer den "räknade"
		   siffran direkt - verifierat via Playwright. */
		flex-basis: 75%;
		max-width: 75%;
	}
}