/* .davi-product-slider - a real, standalone, reusable class (like .btn or
   .davi-container), not a one-off for the home page: use it on ANY product
   list that should become a horizontally-scrolling slider below the
   desktop breakpoint (2026-09-21 - "unikatowa klasa, którą będziemy
   używać wszędzie gdzie będziemy mieli listę produktów"). Mobile-first:
   base is a real horizontal scroll-snap slider (Figma node 2:2
   "mobile-showcase"), staying a slider through the whole mobile+tablet
   range - only real desktop (>=1024px) switches to a grid. Real mobile
   card width (215px) and gap (20px) from node 2:10/2:118.
   .davi-product-slider-frame (below) is the matching wrapper class for
   whatever directly contains a .davi-product-slider - carries the
   bleed-to-the-viewport-edge job (SKLEP.md: padding belongs on the
   elements inside a container, not the section itself, whenever a child
   needs to bleed past it), kept separate from .davi-tab-panel since a
   slider frame doesn't require tabs and tabs don't require a slider.
   Moved out of davi-home.css into its own shared file (2026-09-26,
   client: "czemu nie użyliśmy gotowego modułu z głównej gdzie mamy
   listingi produktów") - davi-home.css only loads on is_front_page()
   (functions.php), so PDP's related-products section could never have
   reached this component no matter what markup it used; same real
   landmine already fixed once for .davi-section/.davi-container/
   --section-pad this same day. Declarations unchanged from the home
   page version, so nothing there changes either. */
.davi-product-slider-frame {
	padding-block: 0;
	/* .davi-section (the actual parent - frames sit outside .davi-container,
	   not outside .davi-section itself) still applies its own padding-inline
	   to every child, which was silently clawing back the "bleed to the
	   viewport edge" effect from the other side (found 2026-09-21 via a
	   real boundingClientRect check: the grid's right edge stopped short of
	   the viewport by exactly --page-padding-inline, not at the edge).
	   Cancel it here with a matching negative margin, then let
	   .davi-product-slider's own padding-left reintroduce just the left
	   inset. Reset to 0 at the desktop grid tier below, where the frame
	   re-contains itself normally. */
	margin-inline: calc(-1 * var(--page-padding-inline));
}

.davi-product-slider {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	padding-left: var(--page-padding-inline);
	padding-right: 0;
	/* scroll-padding-left (not just padding-left): a scroll-snap container
	   auto-corrects its initial scroll position to the snap machinery's own
	   idea of the scrollport's start edge, which by default EXCLUDES
	   padding - the real rendered scrollLeft was 19px on load, not 0,
	   silently scrolling the left inset out of view (found 2026-09-21 via
	   a real scrollLeft check, not assumed - the computed padding-left
	   value itself was always correct, the browser was just scrolling
	   past it). scroll-padding tells the snap machinery the padding IS
	   part of the usable scrollport, so scrollLeft:0 keeps it visible. */
	scroll-padding-left: var(--page-padding-inline);
	list-style: none;
	margin: 0;
}

.davi-product-slider::-webkit-scrollbar {
	display: none;
}

.davi-product-slider > li {
	flex: 0 0 215px;
	/* min-width:0 - flex items default to min-width:auto, which lets a
	   long enough price/spec text force the item WIDER than its own fixed
	   215px flex-basis regardless of flex-shrink:0 (a well-known flexbox
	   gotcha, not a bug in the flex-basis value itself). Found 2026-09-21:
	   real cards measured 257-289px wide instead of a uniform 215px,
	   varying by how long each product's own price/title text happened to
	   be. */
	min-width: 0;
	scroll-snap-align: start;
}

.davi-product-slider > li:last-child {
	/* Without this, scrolling all the way right leaves the last card
	   flush against the viewport edge - padding-right on the slider
	   itself stays 0 on purpose (SKLEP.md: no right padding on a
	   bleeding element, only on the content inside it), so the closing
	   inset has to come from the last item instead. Reset to 0 at the
	   desktop grid tier below, where there's no scrolling to bleed. */
	margin-right: var(--page-padding-inline);
}

.davi-product-slider__dots {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 20px;
	padding-inline: var(--page-padding-inline);
}

.davi-product-slider__dot {
	/* min-width/min-height: some global button/tap-target rule was forcing
	   these to ~38px tall regardless of the explicit 6px height/width
	   above (found 2026-09-18 via a real computed-style check - width
	   rendered correctly at 6px, height silently stayed ~38px, stretching
	   every dot into a tall oval instead of a circle). Overriding min-*
	   here is what actually fixes it - the explicit height alone wasn't
	   enough once something else set a larger min-height. */
	width: 6px;
	height: 6px;
	min-width: 6px;
	min-height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(var(--card-border));
	cursor: pointer;
	flex-shrink: 0;
}

.davi-product-slider__dot.is-active {
	background: rgb(var(--base));
}

@media (min-width: 1024px) {
	/* No padding-inline here: .davi-section (the actual parent) already
	   applies --page-padding-inline unconditionally to every child - adding
	   it again here doubled the inset to 200px instead of 100px (found
	   2026-09-21 via a real computed-style comparison against the section
	   heading, which only has the one, correct 100px inset). max-width
	   alone is enough once margin-inline:auto replaces the mobile tier's
	   negative-margin bleed override. */
	.davi-product-slider-frame {
		margin-inline: auto;
		max-width: var(--page-width);
	}

	.davi-product-slider {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow-x: visible;
		gap: 1.5rem;
		padding-left: 0;
		padding-right: 0;
	}

	.davi-product-slider > li {
		flex: initial;
	}

	.davi-product-slider > li:last-child {
		margin-right: 0;
	}

	.davi-product-slider__dots {
		display: none;
	}
}