/*
 * DAVI home page — layout + styling matching the Figma homepage design.
 * All selectors scoped under .davi-home to avoid leaking into Flatsome/Woo elsewhere.
 * Colors reuse the theme's existing accent (#ffcd02) and near-black (#1a1a1a),
 * already set in the Customizer, so no new brand palette was introduced.
 */

.davi-home {
	--davi-yellow: #F5AF08;
	--davi-yellow-tint: #FEF7E6;
	--davi-dark: #111215;
	--davi-cream: #FAF9F6;
	--davi-text-muted: #55565A;
	--davi-border: #D2D6DC;
	--davi-radius: 12px;
	/* font-family: Onest - set once in tokens.css, not repeated here (this
	   rule loads after tokens.css and would otherwise win and silently
	   override it back). */

	/* No max-width/padding/margin here anymore (2026-09-18) - .davi-home
	   itself is just the token/font scope. Every <section> is full-bleed by
	   nature (the shared rule below gives it its own padding-inline
	   directly), and each section's own .container inside is what caps
	   content to --page-width - see 06-tokeny-i-klasy-bazowe.md. */
}

/* Shared box model for EVERY typical section (06-tokeny-i-klasy-bazowe.md):
   one real class, .davi-section - reused as-is on every plain section on
   this page AND later on PDP, no per-section class/CSS needed at all unless
   that section genuinely differs (then it gets its own class alongside, or
   instead of, .davi-section - see .davi-hero below for what "genuinely
   different" looks like). --section-pad is ONE shared token (tokens.css),
   not re-derived per section from Figma - a deliberate design-system value,
   not a per-page measurement.
   No margin here on purpose: a margin between sections creates a gap that
   belongs to neither section, which can't be styled/backgrounded/adjusted
   from either side - 2026-09-18 correction, after this exact rule shipped
   with one anyway. The only accepted exception is .davi-hero's own
   margin-bottom, since hero doesn't use .davi-section at all. */
.davi-home .davi-section {
	padding-block: var(--section-pad);
	padding-inline: var(--page-padding-inline);
}

.davi-home h2 {
	margin: 0;
	font-size: 1.8rem;
}

.davi-home .button {
	display: inline-block;
	font-weight: 600;
	white-space: nowrap;
}

/* Section head (title + optional tabs/cta on one row) */
.davi-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.davi-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.davi-section-head p {
	margin: 0.5rem 0 0;
	color: var(--davi-text-muted);
}

.davi-section-head__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.davi-section-head__cta-icon {
	width: 14px;
	height: 14px;
}

.davi-section-head h2 {
	font-weight: 800;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	color: rgb(var(--base));
}

/* ===== Hero =====
 * Mobile-first (07-standardy-frontu.md #4): base rules describe the narrowest
 * screen, @media (min-width) only ADDS the desktop two-column layout.
 * Section/container split (07-standardy-frontu.md #13): .davi-hero carries the
 * background and is full-bleed by construction; .davi-hero__container is the
 * ONLY thing capped to --page-width. Scoped to hero only for now - the rest of
 * the page still relies on .davi-home's own max-width until "etap drugi".
 * Values checked against the live Figma file 2026-09-17 (node 1:537 desktop,
 * node 1:657 mobile) via the Figma MCP - not eyeballed from a screenshot.
 */
/* Specificity note: `.davi-home section { margin: 0 0 5rem }` is (0,1,1) and
   would otherwise beat a plain `.davi-hero` (0,1,0) on margin-left/right,
   silently cancelling the full-bleed breakout below (found 2026-09-17 via
   getComputedStyle - the same class of bug as the border-radius one earlier
   today, this time on margin instead of border-radius). `.davi-home .davi-hero`
   (0,2,0) wins unambiguously regardless of source order. */
/* Hero does NOT use .davi-section - it's the one genuinely atypical
   section (full-bleed escape, asymmetric top/bottom padding, its own
   margin-bottom) per 2026-09-18: ".davi-section tam gdzie typowe, custom
   tylko tam gdzie coś naprawdę inne." So it owns its full box model
   directly instead of sharing the generic class. */
.davi-home .davi-hero {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: rgb(var(--background));
	padding-inline: var(--page-padding-inline);
	/* Real Figma values (node 1:537 desktop, 1:657 mobile), confirmed
	   2026-09-17 - asymmetric top/bottom on desktop. */
	padding-block: 40px;
	/* The one accepted exception to "no margin between sections" (2026-09-18) -
	   hero isn't a .davi-section, so it doesn't inherit the no-margin rule. */
	margin-bottom: 2.5rem;
}

@media (min-width: 782px) {
	.davi-home .davi-hero {
		padding-block: 80px 64px;
	}
}

/* .davi-hero__container only needs .davi-container's max-width/centering
   job - padding-block lives on .davi-hero itself (above), not here. */

/* Grid, not flex: content/media/trust are three siblings whose RELATIVE
   POSITION changes between mobile and desktop (trust sits after media on
   mobile, but beside it - inside the same column as content - on desktop).
   That's a layout difference, not a structural one (07-standardy-frontu.md
   #4: same top-level items, same grouping, just reflowed) - grid-template-
   areas repositions the same three elements per breakpoint, so there's only
   ONE render of each, no duplicated markup. Flagged 2026-09-17: an earlier
   version duplicated .davi-trust-list markup for --mobile/--desktop, which
   was solving this with two DOM copies instead of one grid. */
.davi-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"content"
		"media"
		"trust";
	gap: 32px;
}

.davi-hero__media {
	grid-area: media;
}

.davi-trust-list {
	grid-area: trust;
}

.davi-hero__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.davi-hero__label {
	display: flex;
	padding: 6px 12px;
	align-items: flex-start;
	border-radius: 6px;
	background: rgb(var(--primary-tint));
	color: rgb(var(--primary));
	font-size: var(--tag);
	font-weight: 700;
	text-transform: uppercase;
}

.davi-hero__title {
	color: rgb(var(--base));
	font-size: var(--h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}

.davi-hero__subtitle {
	color: rgb(var(--text-muted));
	font-size: var(--subtitle);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.davi-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.davi-hero__cta {
	width: 100%;
	justify-content: center;
}

/* Collision, not a specificity slip of ours: the theme has a global
   `a[href*="/dopasuj-rower"] { text-decoration: underline !important }`
   (menu-highlight rule, out of our scope) that this button's link inherits
   because it happens to point at the same URL. Both are !important, so
   equal specificity would fall back to source order (the theme rule loads
   later and won even with a matching-specificity !important override tried
   first - checked via getComputedStyle, not assumed) - three classes here
   beats the theme's single attribute selector outright. Found 2026-09-17. */
.davi-home .davi-hero .davi-hero__cta {
	text-decoration: none !important;
}

.davi-hero__cta-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* USP/trust row: its own BEM block (.davi-trust-list), not a hero element -
   this is a reusable "icon + title + text" pattern, not something that only
   ever lives inside hero (07-standardy-frontu.md #1: an element belongs to
   ONE block; something reused/independent gets its own block name instead).
   Renamed 2026-09-17 from .davi-hero__usp-* after this was flagged. One
   single element now (see .davi-hero__inner grid above), not two DOM copies
   toggled by breakpoint - grid-area repositions it instead. */
.davi-trust-list {
	/* <ul role="list"> per 07-standardy-frontu.md #12/2.30 - a collection of
	   homogeneous items is a list even when a grid/flex lays it out; the
	   role is explicit because list-style:none makes Safari drop native
	   list semantics. Reset here, locally - not a global ul/ol reset. */
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding-top: 24px;
	border-top: 1px solid rgb(var(--border));
}

.davi-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.davi-trust-item__icon-wrap {
	display: flex;
	width: 36px;
	height: 36px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	background: rgb(var(--primary-tint));
	flex-shrink: 0;
}

.davi-trust-item__icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
}

.davi-trust-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.davi-trust-item__text strong {
	color: rgb(var(--base));
	font-size: var(--small-text);
	font-weight: 700;
}

.davi-trust-item__text span {
	color: rgb(var(--text-muted));
	font-size: 11px;
	font-weight: 500;
}

.davi-hero__media {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Blob + dots + bike are ONE composition, not three independently-positioned
   elements - they must scale and move together so the bike always sits in
   the same spot on the blob (flagged 2026-09-17: "czemu to dwa pływające
   elementy"). Fix: a single box sized as a % of .davi-hero__media (capped at
   the real Figma content-right size, 640x500), and every child positioned
   with percentages OF THIS BOX (not independent absolute px/anchors) so the
   whole group scales as a unit at any width - no separate tablet/desktop
   tiers needed for this part; only .container's padding still has one below. */
.davi-hero__composition {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 640 / 500;
}

@media (min-width: 782px) {
	.davi-hero__composition {
		max-width: 640px;
	}
}

.davi-hero__blob {
	position: absolute;
	left: 15.625%;  /* 100/640, real Figma value */
	bottom: 0;
	width: 68.75%;  /* 440/640 */
	aspect-ratio: 1 / 1;
	z-index: 0;
}

.davi-hero__dots {
	position: absolute;
	left: 28.125%;  /* 180/640 */
	top: 4%;        /* 20/500 */
	width: 22.5%;   /* 144/640 */
	aspect-ratio: 144 / 104;
	z-index: 0;
}

.davi-hero__slide {
	position: absolute;
	left: 0;
	top: 8%;         /* 40/500 */
	width: 103.125%; /* 660/640 - intentionally wider than the box, real Figma value */
	aspect-ratio: 660 / 440;
	object-fit: contain;
	z-index: 1;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.davi-hero__slide.is-active {
	opacity: 1;
	z-index: 2;
}

@media (min-width: 782px) {

	/* Two columns from here up. Tablet range (782-1299px) frees the trust
	   row to span BOTH columns (full width) instead of being squeezed into
	   the text column, and gives media a hard floor so the bike can't shrink
	   toward zero - flagged 2026-09-17 with a devtools grid overlay showing
	   the media track collapsing on a real tablet width. The exact desktop
	   composition (trust nested in the 600px text column, per the real
	   Figma node 1:537) only applies from 1300px up, below. */
	.davi-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
		grid-template-areas:
			"content media"
			"trust   trust";
		align-items: center;
		gap: clamp(24px, 4vw, 48px);
	}

	.davi-hero__content {
		gap: 32px;
	}

	.davi-hero__actions {
		flex-direction: row;
		width: auto;
	}

	.davi-hero__cta {
		width: auto;
	}

	.davi-trust-list {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.davi-hero__media {
		min-width: 0;
	}
}

/* From here up, matches the real 1440px Figma frame exactly: fixed 600px
   text column with trust nested inside it (not spanning full width), media
   takes the rest. See 08-postep-hero-figma-mcp.md. */
@media (min-width: 1300px) {
	.davi-hero__inner {
		grid-template-columns: 600px 1fr;
		grid-template-areas:
			"content media"
			"trust   media";
	}
}

/* ===== Categories =====
 * Real Figma data (node 1:97 desktop, 189:98 mobile), checked 2026-09-18 via
 * the Figma MCP - no scroll-nav arrows in the actual design (removed; the
 * markup/JS for it never matched anything real).
 * Client decision 2026-09-18: Onest is now the sitewide font (tokens.css),
 * and padding-inline stays the shared --page-padding-inline (100px) instead
 * of this section's own 120px in Figma.
 *
 * User review 2026-09-18 (third pass):
 * - No .davi-categories__container, and no per-section padding-block rule
 *   either - .davi-home section's shared mechanism (davi-home.css, top of
 *   file) handles it via --section-pad/--section-pad-lg below, the exact
 *   same mechanism hero uses. .davi-categories__grid is the only BEM class
 *   this section needs.
 * - Grid is auto-fit (no explicit 2-vs-3-column breakpoint), reflowing
 *   continuously with viewport width instead of snapping.
 * - Every card uses the SAME 347:153 photo crop - an earlier pass read
 *   Figma's raw export as "only the first two cards use this ratio, the
 *   rest are a plain fixed height" and replicated that literally, but the
 *   user confirmed that reading was wrong: that's Figma's own inconsistent
 *   per-photo export, not a real design rule, and the grid should look
 *   uniform. Removed the nth-child(n+3) override entirely.
 * - .davi-categories itself carries no CSS at all beyond being the
 *   selector other rules hang off of - the whole section now just uses the
 *   shared .davi-section class (davi-home.css, top of file) with zero CSS
 *   of its own - it doesn't even carry a .davi-categories class anymore
 *   (2026-09-18: adding one "to hang rules off later" when nothing actually
 *   used it was exactly the pointless-class habit being corrected here).
 *   The heading style moved to the generic .davi-section-head h2 rule
 *   (near the other .davi-section-head rules) since it's the same
 *   treatment every section heading uses, not something categories-specific.
 */
.davi-categories__grid {
	display: grid;
	/* Fluid column count. The minmax basis has to grow roughly in step with
	   the grid's own available width (itself shrunk by the fluid page
	   padding) - a single vw-only formula floored too early let a 3rd
	   column sneak in as soon as ~460px (measured via real column counts at
	   ~30 widths between 360-1440px, not just a handful of checkpoints -
	   the earlier version was only checked at 6 widths and happened to
	   skip right over this exact gap). Two ranges meeting at the exact same
	   value at 782px (150 -> 200 mobile+tablet, 200 -> 350 desktop) keep 2
	   columns solid through the whole phone/small-tablet range and 3 solid
	   from tablet to desktop, with no visible jump at the switch (the value
	   is identical on both sides of it), unlike the old rule this replaced. */
	grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 107.14px + 11.905vw, 200px), 1fr));
	gap: clamp(16px, 4vw, 32px);
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}

@media (min-width: 782px) {
	.davi-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22.73px + 22.727vw, 350px), 1fr));
	}
}

.davi-categories__item {
	display: flex;
	flex-direction: column;
	/* position:relative - the containing block for .clickable-parent's
	   ::before overlay (tokens.css), so the whole card is the click target,
	   not just the visible title link. */
	position: relative;
	/* height:100% (not a fixed px value) - fills the <li>'s grid-stretched
	   row height so cards sharing a row still match, but grows with a
	   longer/wrapped label instead of clipping it. A fixed 150px (matching
	   Figma's own mobile mockup, which never has to handle a translated
	   label) squeezed real category names in other languages down to
	   unreadable "Rowery ..." ellipsis - readable content always wins over
	   matching a mockup's fixed pixel value (2026-09-18 correction). */
	height: 100%;
	gap: 8px;
	background: rgb(var(--background));
	border-radius: 16px;
	padding: 12px;
}

@media (min-width: 782px) {
	.davi-categories__item {
		gap: 16px;
		padding: 16px;
	}
}

.davi-categories__item:has(.clickable-parent:focus-visible) {
	outline: var(--focus);
	outline-offset: var(--focus-offset);
}

/* Real per-breakpoint geometry, checked via get_metadata (raw node
   x/y/width/height, not the auto-generated Tailwind code, which read as if
   only 2 of 6 mobile cards used a crop) 2026-09-18: EVERY card's image node
   is 139.5x100 on mobile (node 189:56 etc, ratio ~1.4:1, squarer) and
   346.67x153 on desktop (node 1:113 etc, ratio ~2.27:1, wider) - uniform
   within each breakpoint, but genuinely DIFFERENT crop between them. Not a
   row-position thing at all - the previous two passes both mis-read this
   as some cards differing from others at a single breakpoint. */
.davi-categories__image-wrap {
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 139.5 / 100;
	/* flex-shrink:0 - .davi-categories__item is a flex column, and without
	   this the image silently shrank below its own aspect-ratio height
	   whenever a sibling label wrapped to 2 lines (found 2026-09-18: "Rowery
	   górskie MTB"/"Rowery elektryczne" - the two longest labels - measured
	   ~20px shorter images than the other four despite identical CSS,
	   because the fixed-height card had no other way to fit a taller
	   label). */
	flex-shrink: 0;
}

@media (min-width: 782px) {
	.davi-categories__image-wrap {
		/* Real desktop geometry (node 1:113 etc via get_metadata): 346.67x153,
		   ~2.27:1 - wider than mobile's ~1.4:1 crop. A genuine per-breakpoint
		   difference, confirmed uniform across all six cards at both sizes.
		   Must come AFTER the base rule above, not before it (an earlier
		   version of this override sat above the base rule in the file and
		   always lost to it regardless of viewport width - same specificity,
		   later source order always wins). */
		aspect-ratio: 347 / 153;
	}
}

.davi-categories__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davi-categories__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.davi-categories__label {
	font-weight: 700;
	font-size: 14px;
	color: rgb(var(--base));
	text-decoration: none;
	/* Wraps to 2+ lines when the name is long - correct on purpose
	   (2026-09-18): a longer wrapped title is readable, an ellipsis is not.
	   Other-market translations can run considerably longer than the
	   Polish source strings, so truncating to fit one line would hide the
	   category name behind "Rowery ..." with no way to know what it is. */
}

.davi-categories__label:focus-visible {
	outline: none;
}

.davi-categories__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ===== Products ===== */
/* .davi-tabs - real, generic, reusable BEM block (2026-09-21 rename): the
   same fake-BEM problem as .davi-products__panel applied here too
   (".davi-products__tab" implying a ".davi-products" block that never
   existed) - any tabbed content can reuse this now, not just this one
   section. */
.davi-tabs {
	display: flex;
	gap: 1.5rem;
	margin-top: 0.75rem;
}

.davi-tabs__tab {
	background: none;
	border: none;
	/* margin-right:0 overrides Flatsome's own global
	   "button, input[type=button].." reset (flatsome.css), which puts
	   1em to the right of every real <button> element - found via a real
	   computed-style + matching stylesheet-rule check (2026-09-21):
	   15.2px on the first tab despite nothing here setting a margin at
	   all. .davi-tabs' own gap already spaces the tabs, so this is pure
	   double spacing. */
	margin-right: 0;
	padding: 0;
	font-size: 0.95rem;
	color: var(--davi-text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	padding-bottom: 0.4rem;
}

.davi-tabs__tab.is-active {
	color: var(--davi-dark);
	font-weight: 600;
	border-bottom-color: var(--davi-yellow);
}

/* Generic, reusable tab-content visibility toggle (2026-09-21 rename) -
   NOT slider-specific, any tabbed content can use this. Was named
   ".davi-products__panel", fake BEM syntax for a block ("davi-products")
   that never actually existed anywhere as a real class - caught directly:
   "skąd __panel?". */
.davi-tab-panel {
	display: none;
}

.davi-tab-panel.is-active {
	display: block;
}

/* .davi-product-slider - a real, standalone, reusable class (like .btn or
   .davi-container), not a one-off for this section: 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 above since
   a slider frame doesn't require tabs and tabs don't require a slider. */
.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;
	}
}

/* .davi-product-card* styling lives in assets/css/davi-product-card.css now
   (2026-09-18: the card became a real sitewide component, not just this
   page's markup) - this whole block was dead leftover CSS from before that
   refactor, and .davi-product-card__media img here (object-fit:cover,
   aspect-ratio:1/1) was silently winning over the new file's own
   object-fit:contain rule the entire time (higher specificity AND later in
   source order, since davi-home.css loads after davi-product-card.css) -
   exactly why the real photos looked cropped/low quality despite the new
   CSS file saying "contain" the whole time. Removed entirely; found by
   checking which stylesheet a matched CSS rule actually came from, not by
   re-reading the new file and assuming it was the only one in play. */

/* ===== Bike finder banner =====
 * Real Figma data (node 1:347 "banner" desktop, 2:176 "mobile-quiz-banner"),
 * checked 2026-09-18 via the Figma MCP. Mobile stacks eyebrow/title/body/cta
 * at the top with the bike photo bleeding out behind/below (an oversized,
 * absolutely-positioned image cropped by the card's own overflow:hidden,
 * the same technique as hero's composition); desktop puts the text in a
 * fixed-ish column beside the photo, which bleeds off the right edge.
 * Uses aspect-ratio (not a fixed height) on the whole banner so it scales
 * smoothly across the fluid container width instead of just the two
 * checked breakpoints - see 07-standardy-frontu.md #3 on why a fixed pixel
 * height/width breaks between checked breakpoints.
 */
.davi-finder {
	position: relative;
	background: #2e3038;
	border-radius: var(--card-radius);
	overflow: hidden;
	padding: 32px 24px;
	aspect-ratio: 360 / 401;
	/* max-width caps the mobile composition to a real phone-ish width -
	   the %-based image position/size below is only correct at the
	   narrow widths the mobile Figma design (node 2:176) was actually
	   built for (~390px). Left uncapped, aspect-ratio kept scaling the
	   card's HEIGHT up with its width all the way to the 782px
	   breakpoint (e.g. 771px wide -> 859px tall), stretching the same
	   percentages into an absurd, badly-cropped shape (found 2026-09-21
	   from a real screenshot at 771px - the client's own words: "kompletnie
	   nie ma sensu"). Centered within the container above this width;
	   removed again at the 782px tier where the real desktop
	   composition takes over. */
	max-width: 480px;
	margin-inline: auto;
}

@media (max-width: 340px) {
	.davi-finder {
		padding: 16px;
	}
}

.davi-finder__media {
	position: absolute;
	/* left/top (not right/bottom) - real Figma numbers (node 69:382,
	   re-checked 2026-09-21): card is 360x401, image box is
	   x:11 y:140 w:526.72 h:351, i.e. left:3.06% top:34.91% width:146.31%
	   of the card. The previous right:-25%/bottom:-20% guess put the
	   photo ~30% past the LEFT edge and only 25% past the right - real
	   composition barely insets from the left (3%) and bleeds much
	   further right (49%), found via a real getBoundingClientRect
	   comparison against a fresh Figma fetch, not assumed from the
	   earlier value. */
	left: 3.06%;
	top: 34.91%;
	width: 146.31%;
	aspect-ratio: 527 / 351;
	pointer-events: none;
}

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

.davi-finder__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 320px;
}

.davi-finder__heading {
	display: flex;
	flex-direction: column;
	color: #fff;
	text-transform: uppercase;
	font-weight: 800;
}

.davi-finder__eyebrow {
	color: rgb(var(--discount));
	font-size: 16px;
}

/* .davi-finder .davi-finder__title (not just the class alone): needs to
   beat .davi-home h2's font-size (0,1,1 specificity vs this class's own
   0,1,0) - the exact cascade-collision class of bug flagged repeatedly in
   this project. color:#fff is set DIRECTLY here too, not just inherited
   from .davi-finder__heading - Flatsome's own Customizer CSS sets
   `color:#222` directly on h1-h6 sitewide, and a direct rule always beats
   an inherited one regardless of specificity (same mechanism as the
   Onest-font bug from 2026-09-18, found again here via a real
   getComputedStyle check, not assumed). */
.davi-finder .davi-finder__title {
	margin: 0;
	font-size: 40px;
	line-height: 1;
	color: #fff;
}

.davi-finder__body {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

/* Reuses the shared .btn (tokens.css) instead of its own bespoke padding/
   radius/font - only overrides the fill color, same pattern .btn--outline
   already uses (2026-09-18: "używaj tych samych klas w przyciskach" -
   consistency with every other button on the site beats matching this one
   banner's slightly different Figma padding/radius/font). */
.davi-finder__cta {
	--btn-fill: rgb(var(--discount));
	--btn-text: rgb(var(--base));
	align-self: flex-start;
	margin-top: 8px;
}

/* .davi-finder .davi-finder__cta (0,2,0), not just the class alone
   (0,1,0): a sitewide custom-CSS snippet elsewhere on this site (not
   this theme - found 2026-09-21 inline in the page <head>) sets
   `a[href*="/dopasuj-rower"] { text-decoration: underline !important; }`
   (0,1,1 - element+attribute), presumably meant for a plain nav-menu
   text link that happens to point at the same URL - it unintentionally
   also underlines this solid-fill button since it targets the URL, not
   a location. Not touching that shared rule (it may still be
   intentional elsewhere, e.g. the main nav) - out-specificity-ing it
   locally for just this button, since among tied !important
   declarations specificity still decides the winner. */
.davi-finder .davi-finder__cta {
	text-decoration: none !important;
}

.davi-finder__cta-icon {
	width: 14px;
	height: 14px;
}

@media (min-width: 782px) {
	.davi-finder {
		display: flex;
		align-items: center;
		max-width: none;
		margin-inline: 0;
		/* Fluid (vw-based, not fixed px) - aspect-ratio:1200/385 makes
		   the card's own HEIGHT shrink proportionally with its width,
		   but the fixed 45px/47px/64px/28px values below it didn't
		   shrink with it: at anything under ~1300px the card became too
		   short for that fixed-size text, and the title started
		   overlapping the bike photo directly (found 2026-09-21 via
		   real screenshots across 782-1440px, not just the two
		   originally checked breakpoints - the exact "07-standardy-
		   frontu.md #3" failure mode this file's own top comment already
		   warns about, just not fully applied here). Each vw value below
		   is calibrated so 1440px viewport reproduces the exact original
		   fixed px value (e.g. 64px title = 4.444vw * 1440px), so the
		   known-good 1440px look is unchanged; narrower widths now scale
		   down at the same rate as the card's own height instead of
		   overflowing it. */
		padding: clamp(24px, 3.13vw, 45px) clamp(24px, 3.26vw, 47px);
		aspect-ratio: 1200 / 385;
	}

	.davi-finder__media {
		/* left:38.5% = 462/1200, the real Figma x position (node 69:374) -
		   an earlier version anchored from the right with a guessed
		   percentage instead of the real left offset (2026-09-18 correction). */
		left: 38.5%;
		bottom: auto;
		top: -50%;
		width: 87.5%;
		aspect-ratio: 1050 / 700;
	}

	.davi-finder__content {
		max-width: 500px;
		gap: 16px;
	}

	.davi-finder__eyebrow {
		font-size: clamp(16px, 1.94vw, 28px);
	}

	.davi-finder .davi-finder__title {
		font-size: clamp(32px, 4.44vw, 64px);
		line-height: 1.125;
	}

	.davi-finder__body {
		font-size: 14px;
		max-width: 500px;
	}

}

/* ===== Reviews =====
 * Real Figma nodes checked 2026-09-21 via Figma MCP: mobile 2:192
 * ("mobile-testimonials"), desktop 1:356 ("testimonials-section").
 * .davi-section-head h2's existing clamp() already lands on this
 * section's own 24px mobile -> 40px desktop title sizes, so it's reused
 * as-is, no override needed here. Card list reuses the same mobile-
 * slider/desktop-row + bleed-frame technique as the product slider
 * (mobile-first: real horizontal scroll-snap through tablet, an
 * equal-width row only at >=1024px), but as its own real BEM block, not
 * fake-BEM reuse of .davi-product-slider* (a different component named
 * specifically for product lists).
 */
.davi-reviews__summary {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
}

.davi-reviews__score {
	font-family: 'Onest', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: rgb(var(--base));
}

.davi-reviews__stars {
	display: flex;
	gap: 2px;
}

.davi-reviews__star {
	width: 14px;
	height: 14px;
}

.davi-reviews__count {
	font-size: 14px;
	color: rgb(var(--gray-caption));
}

.davi-reviews-frame {
	margin-inline: calc(-1 * var(--page-padding-inline));
}

.davi-reviews__slider {
	display: flex;
	gap: 24px;
	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 alongside padding-left - same scroll-snap
	   gotcha already documented on .davi-product-slider (a snap
	   container auto-corrects scrollLeft to its own idea of the
	   scrollport edge, which excludes plain padding by default). */
	scroll-padding-left: var(--page-padding-inline);
	list-style: none;
	margin: 0;
}

.davi-reviews__slider::-webkit-scrollbar {
	display: none;
}

.davi-reviews__slider > li {
	flex: 0 0 308px;
	min-width: 0;
	scroll-snap-align: start;
}

.davi-reviews__slider > li:last-child {
	margin-right: var(--page-padding-inline);
}

.davi-reviews__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 24px;
	background: #fff;
	border: 1px solid rgb(var(--card-border));
	border-radius: var(--card-radius);
}

.davi-reviews__rating {
	display: flex;
	gap: 2px;
}

.davi-reviews__text {
	margin: 0;
	font-family: 'Instrument Sans', sans-serif;
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: rgb(var(--base));
}

.davi-reviews__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.davi-reviews__author strong {
	font-family: 'Onest', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: rgb(var(--base));
}

.davi-reviews__author span {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12px;
	color: rgb(var(--gray-caption));
}

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

.davi-reviews__dot {
	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-reviews__dot.is-active {
	background: rgb(var(--base));
}

@media (min-width: 1024px) {
	.davi-reviews-frame {
		margin-inline: auto;
		max-width: var(--page-width);
	}

	.davi-reviews__slider {
		overflow-x: visible;
		padding-left: 0;
		padding-right: 0;
	}

	.davi-reviews__slider > li {
		flex: 1 0 0;
	}

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

	.davi-reviews__dots {
		display: none;
	}

	.davi-reviews__score {
		font-size: 18px;
	}
}

/* ===== Process =====
 * Real Figma nodes checked 2026-09-21: mobile 2:301 ("process-mobile"),
 * desktop 1:450 ("process-desktop"). Genuinely different compositions
 * per breakpoint (not just a CSS reflow) - see the matching PHP comment
 * in front-page.php for why the number badge is rendered twice.
 */
.davi-process {
	background: #faf9f6;
}

/* One gap on the container instead of three separate margins
   (section-head's own margin-bottom, the grid's margin-top, the CTA's
   margin-top) - scoped to .davi-process only, since .davi-section-head
   is shared sitewide and other sections still rely on its own
   margin-bottom for their own (non-flex) spacing. Consolidated
   2026-09-21 at the client's own request ("czemu nie ustawimy gap
   zamiast marginesu..."). */
.davi-process .davi-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.davi-process .davi-section-head {
	margin-bottom: 0;
}

.davi-process__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.davi-process__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(17, 18, 21, 0.03);
	overflow: hidden;
}

.davi-process__media {
	position: relative;
	height: 180px;
}

.davi-process__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davi-process__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5b301;
	color: rgb(var(--base));
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}

.davi-process__badge--inline {
	width: 28px;
	height: 28px;
	border-radius: 14px;
}

/* .davi-process__media::before (not a real .davi-process__badge--
   overlay span) - this copy of the number only ever exists to be
   painted over the photo at desktop; it's not real content anyone
   needs to select/read twice, so content:attr(data-number) (the
   number set as a data attribute on .davi-process__media in the
   markup) replaces a whole duplicate DOM element with one CSS rule
   (client request, 2026-09-21). Hidden on mobile below; shown/
   positioned at the 1024px tier where the real overlay treatment
   applies. */
.davi-process__media::before {
	content: attr(data-number);
	display: none;
	align-items: center;
	justify-content: center;
	background: #f5b301;
	color: rgb(var(--base));
	font-weight: 700;
	font-size: 12px;
}

.davi-process__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}

.davi-process__title-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* .davi-home .davi-process__title (not just the class alone): needs
   0,2,0 specificity to beat .davi-home h3's direct font-family:'Onest'
   rule (tokens.css) - a direct rule on the h3 element always wins over
   an inherited value regardless of specificity math, and .davi-home h3
   (0,1,1) still beats a bare .davi-process__title (0,1,0) anyway - same
   cascade collision flagged repeatedly in this project (.davi-finder__
   title, products h2). Figma's mobile mockup (node 2:301) uses Lora
   (serif) here, but the client found the mismatch with the sitewide
   Onest/Inter stack jarring rather than a deliberate accent (2026-09-21)
   - reverted to the sitewide font, font-family inherited from
   .davi-home h3 itself, not redeclared here. */
.davi-home .davi-process__title {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	color: rgb(var(--base));
}

.davi-process__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--davi-text-muted);
}

.davi-process__cta {
	display: flex;
	justify-content: center;
}

/* Reuses the shared .btn (tokens.css) instead of Flatsome's generic
   .button - same "use the same button classes" precedent as
   .davi-finder__cta. */
.davi-process__cta-btn {
	--btn-fill: #f5b301;
	--btn-text: rgb(var(--base));
	width: 100%;
}

.davi-process__cta-icon {
	width: 16px;
	height: 16px;
}

@media (min-width: 1024px) {
	.davi-process .davi-container {
		gap: 32px;
	}

	.davi-process__grid {
		flex-direction: row;
		gap: 24px;
	}

	/* flex:1 0 0 belongs on the real flex item (this <li>, a direct
	   child of .davi-process__grid) - it was on .davi-process__card
	   instead (one level too deep, inside the <li>), which does
	   nothing since flex properties only affect actual flex items.
	   That also meant the cards were never really stretching to equal
	   height: align-items' default "stretch" DOES stretch each <li> to
	   match the tallest, but .davi-process__card itself (a plain block
	   with height:auto) doesn't automatically fill that stretched <li>
	   - found 2026-09-21 from a real screenshot at 1029px showing
	   uneven card heights, then confirmed by measuring each card's own
	   height (428/449/449px - the 21px gap matched one extra wrapped
	   line of description text on the two taller cards, not a media or
	   badge difference). .davi-process__card's own height:100% (added
	   above) is what actually makes the card fill the now-properly-
	   stretched <li>. */
	.davi-process__grid > li {
		flex: 1 0 0;
		min-width: 0;
	}

	.davi-process__card {
		background: #fff;
		border: none;
		border-radius: 24px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
		padding: 16px;
		gap: 20px;
	}

	.davi-process__media {
		height: 240px;
		border-radius: 16px;
		overflow: hidden;
	}

	.davi-process__badge--inline {
		display: none;
	}

	.davi-process__media::before {
		display: flex;
		position: absolute;
		left: 16px;
		bottom: 16px;
		width: 36px;
		height: 36px;
		border-radius: 18px;
		background: #ffc107;
		font-size: 14px;
	}

	.davi-process__content {
		padding: 0 8px 8px;
		gap: 12px;
	}

	.davi-home .davi-process__title {
		font-weight: 800;
		font-size: 20px;
	}

	.davi-process__cta-btn {
		--btn-fill: #ffc107;
		--btn-radius: 999px;
		width: auto;
		padding: 16px 32px;
		box-shadow: 0 8px 12px rgba(255, 193, 7, 0.15);
	}
}

/* ===== Europe =====
 * Real Figma nodes checked 2026-09-21: mobile 2:369
 * ("mobile-stats-map"), desktop 1:494 ("map-section"). Mobile stacks
 * title/desc/media/stats in plain document order (no reordering
 * needed - that IS the real Figma order); desktop pulls .media out of
 * flow entirely (position:absolute, same technique Figma's own layer
 * uses: top:50%/-translate-y-50% for the text) so the remaining
 * title/desc/stats can stay a tightly-packed, centered column with no
 * spanning-grid-item involved.
 *
 * Tried grid-template-areas with media spanning 3 rows first - CSS
 * Grid distributes a spanning item's extra required height across the
 * auto-sized rows it spans, which inflated the row-gap from a real
 * 16px to ~45px once align-items:center tried to center each row's
 * shorter content inside its own now-larger track (found 2026-09-21
 * via a real getBoundingClientRect comparison, not assumed). Taking
 * media out of flow avoids the whole class of bug instead of patching
 * around it.
 */
/* gap (not per-item margins) for the outer 24px rhythm between
   title/desc/media/stats - the one exception is title->desc, which is
   really a nested 8px (see .davi-europe__desc below): gap can't hold
   two different values between different pairs of the same flex
   container, so that one transition is dialed back with a negative
   margin-top on just the desc item instead of hand-rolling every gap
   as a separate margin (client request, 2026-09-21 - same
   simplification already applied to .davi-process). */
.davi-europe {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #fff;
	border-radius: var(--card-radius);
	padding: 32px 16px;
}

.davi-europe__title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	color: rgb(var(--base));
}

.davi-europe__desc {
	/* -16px = 24px (the container's gap) - 8px (the real, Figma-nested
	   title->desc gap) - see the block comment on .davi-europe above. */
	margin: -16px 0 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--davi-text-muted);
}

.davi-europe__media {
	height: 160px;
	border-radius: 16px;
	overflow: hidden;
}

.davi-europe__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davi-europe__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.davi-europe__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

/* Mobile-only reflow: the 2nd stat (customers, real field order -
   see front-page.php) moves to its own full-width row below the other
   two, matching Figma's mobile grid exactly instead of the desktop's
   plain left-to-right order. Reset at the 1024px tier below. */
.davi-europe__stat:nth-child(2) {
	order: 3;
	grid-column: 1 / -1;
}

.davi-europe__stat:nth-child(3) {
	order: 2;
}

.davi-europe__stat-top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.davi-europe__stat-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.davi-europe__stat-value {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.24px;
	color: rgb(var(--base));
}

.davi-europe__stat-label {
	font-size: 14px;
	line-height: 1.4;
	color: rgb(var(--gray-caption));
}

@media (min-width: 1024px) {
	.davi-europe {
		/* aspect-ratio (not a fixed height) so the card scales smoothly
		   with the fluid container width instead of only looking right
		   at one checked breakpoint - real Figma frame is 1200x374. */
		aspect-ratio: 1200 / 374;
		/* 16px (not 24) - .davi-europe__media goes position:absolute
		   below, taken out of flex flow entirely, so this gap now only
		   applies between the 3 remaining real flex items (title/desc/
		   stats) - real Figma gap between all three of those is a flat
		   16px (no nested-vs-outer split like mobile has), so gap alone
		   is enough here, no per-item margin override needed. */
		gap: 16px;
		justify-content: center;
		background: #fefdfb;
		border-radius: 24px;
		padding: 0 0 0 120px;
		overflow: hidden;
	}

	.davi-europe__title,
	.davi-europe__desc,
	.davi-europe__stats {
		max-width: 550px;
	}

	.davi-europe__title {
		font-size: 32px;
	}

	.davi-europe__desc {
		margin: 0;
		font-size: 18px;
	}

	.davi-europe__media {
		/* Out of flow entirely (Figma's own text layer uses top:50%/
		   -translate-y-50% for the same reason - see the block comment
		   above) - lets title/desc/stats stay a tightly-packed column
		   that .davi-europe's own justify-content:center can center as
		   a whole, with no spanning-grid-item row-height inflation. */
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44%;
		height: auto;
		border-radius: 0;
	}

	.davi-europe__stats {
		/* position:relative + z-index:1 - .davi-europe__media is
		   position:absolute at this tier, which paints above plain
		   static-flow content regardless of DOM order (a positioned box
		   always paints over a non-positioned one per CSS stacking
		   rules, even with z-index:auto) - on tablet widths the map's
		   own 44%-wide box reaches far enough left to overlap the 3rd
		   stat item, hiding it entirely (found 2026-09-21 at 1024px -
		   only 2 of the 3 stats were visible). Lifting stats into its
		   own stacking level above the map fixes it without touching
		   the map's own position. */
		position: relative;
		z-index: 1;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.davi-europe__stat {
		align-items: flex-start;
		text-align: left;
	}

	.davi-europe__stat:nth-child(2) {
		order: initial;
		grid-column: auto;
	}

	.davi-europe__stat:nth-child(3) {
		order: initial;
	}
}

/* ===== Instagram =====
 * Real Figma nodes checked 2026-09-21: mobile 2:414 ("mobile-social"),
 * desktop 1:522 ("social-section"). Mobile shows only 4 photos (the
 * 5th grid <li> is hidden, not omitted from the loop - client can
 * still fill all 5 ACF slots, mobile just displays fewer per Figma)
 * plus a separate full-width CTA button; desktop shows all 5 photos
 * plus the follow-tile as a 6th grid cell, no separate button - both
 * CTA treatments exist in the markup, toggled here by display.
 */
.davi-instagram {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.davi-instagram__grid {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.davi-instagram__grid > li:nth-child(5) {
	display: none;
}

/* flex:1 (not a fixed width) - the 4 mobile photos are real Figma
   76px tiles, but that's only correct up to a real mobile viewport;
   left fixed, the row stopped growing past ~320px total and just left
   a widening dead gap on the right at every tablet width up to
   1024px (found 2026-09-21 via a real screenshot sweep, not assumed).
   No max-width cap either - an earlier version of this fix capped
   growth at desktop's own 180px, which still left a growing gap once
   that cap was hit anywhere between 900-1023px (found via a real
   measurement). There are only 4 of these tiles on mobile/tablet vs
   desktop's 5+follow-tile, so this tier growing past 180px at wider
   tablet widths is fine - it's already a different composition, not
   meant to match desktop's own tile size 1:1. Reset to a fixed,
   non-growing 180px at the 1024px tier below where the real
   5-photo+follow-tile row takes over. */
.davi-instagram__grid > li {
	flex: 1 1 76px;
	min-width: 0;
}

.davi-instagram__item {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
}

.davi-instagram__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davi-instagram__follow-cell {
	display: none;
}

.davi-instagram__follow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	padding: 24px;
	background: #f5f7fa;
	border-radius: 16px;
	text-align: center;
	text-decoration: none;
}

.davi-instagram__follow-icon {
	width: 24px;
	height: 24px;
}

.davi-instagram__follow strong {
	font-size: 13px;
	font-weight: 700;
	color: rgb(var(--base));
}

.davi-instagram__follow span {
	font-size: 11px;
	color: rgb(var(--gray-caption));
}

.davi-instagram__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 0;
	background: #fff;
	border: 1px solid rgb(var(--card-border));
	border-radius: 12px;
	text-decoration: none;
}

.davi-instagram__cta-icon {
	width: 16px;
	height: 16px;
}

.davi-instagram__cta span {
	font-size: 13px;
	font-weight: 700;
	color: rgb(var(--base));
}

@media (min-width: 1024px) {
	.davi-instagram {
		gap: 32px;
	}

	.davi-instagram__grid {
		justify-content: space-between;
	}

	.davi-instagram__grid > li {
		flex: 0 0 180px;
		max-width: none;
	}

	.davi-instagram__grid > li:nth-child(5) {
		display: block;
	}

	.davi-instagram__item {
		width: 180px;
		height: 180px;
		aspect-ratio: auto;
		border-radius: 16px;
	}

	.davi-instagram__follow-cell {
		display: block;
		width: 180px;
		height: 180px;
	}

	.davi-instagram__cta {
		display: none;
	}
}

/* Trust badges strip moved to davi-footer.css (2026-09-22, now sitewide
   in footer.php instead of a home-page-only section here - see there
   for the real Figma node/geometry notes, unchanged otherwise). */

/* ===== Lazy sections =====
 * content-visibility:auto (real CSS, not JS) - skips layout/style/paint
 * work entirely for a section until it's near the viewport, same idea
 * as image loading=lazy but for whole sections. contain-intrinsic-size
 * reserves an approximate placeholder height so the page doesn't jump/
 * collapse before each section has ever been rendered once - "auto"
 * makes the browser remember the REAL height after that first render,
 * so this estimate only matters for the very first paint, not for
 * every resize after.
 * Applied from the 3rd section onward (products through Instagram -
 * hero and categories stay eager, they're above/near the fold; trust-
 * badges moved to footer.php on 2026-09-22 and is no longer one of
 * these) via one shared .lazy-section class rather than a bespoke
 * value per section, per 2026-09-21 request. Real heights measured
 * across the (then 7, now 6) sections at 390/768/1440px (not guessed):
 * averaged ~650px at mobile/tablet, ~510px at desktop - close enough
 * for a placeholder, exact per-section precision isn't the point here.
 */
.lazy-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 650px;
}

@media (min-width: 1024px) {
	.lazy-section {
		contain-intrinsic-size: auto 510px;
	}
}

/* ===== Responsive ===== */
@media (max-width: 782px) {
	.davi-section-head {
		flex-direction: column;
		align-items: flex-start;
	}
}