/* ===== Strona produktu (PDP) =====
 * Real Figma frames checked 2026-09-23 via Figma MCP: desktop 81:28
 * (product-summary 81:570, breadcrumbs 82:780), mobile 106:250
 * (gallery-col 106:709, info-col 107:842, breadcrumbs 106:735).
 * Sitewide-loaded-conditionally file (enqueued only on is_product(),
 * see functions.php) - not scoped to .davi-home.
 *
 * Horizontal inset: Figma's own PDP sections consistently use a flat
 * 120px inset (product-summary, dobierz-upsells, davibikes-specs,
 * video-card all indent x=120 at desktop) - a real, different number
 * from the sitewide --page-padding-inline clamp (maxes at 100px). Kept
 * --page-padding-inline anyway for this build: one shared inset token
 * used everywhere it applies outranks a ~20px-at-1440px difference
 * from one more page's own Figma export (07-standardy-frontu.md #5) -
 * flagged here, not silently different from every other page's edge
 * spacing without a note.
 */

/* Onest sitewide (2026-09-18 client decision, already applied on the
   home page via .davi-home) - PDP isn't inside .davi-home at all
   (single-product.php is a separate template), so it silently
   inherited Flatsome's own Customizer font (Manrope) instead - found
   live via a real computed-style check (font-family: "Manrope, sans-
   serif" on the title), not assumed. Headings need their own direct
   rule regardless (same landmine as .davi-home h1-h6): Flatsome's
   Customizer CSS sets font-family directly on h1-h6 sitewide, which
   always beats an inherited value no matter how low its specificity. */
.davi-pdp {
	font-family: 'Onest', sans-serif;
}

.davi-pdp h1,
.davi-pdp h2,
.davi-pdp h3,
.davi-pdp h4,
.davi-pdp h5,
.davi-pdp h6 {
	font-family: 'Onest', sans-serif;
}

/* Real sections (summary/upsells/video/specs/description) carry the
 * shared `.davi-section` class directly now (tokens.css) instead of a
 * PDP-only reinvention of the same mechanism (client, 2026-09-26:
 * "mamy z głównej davi-section... po chuj teraz to??" - fair complaint,
 * that class was already built to be reused here, per its own comment,
 * 06-tokeny-i-klasy-bazowe.md - a `.davi-pdp > section` generic rule
 * used to live here duplicating it instead of just applying the
 * existing class). `.davi-container` inside each section (tokens.css)
 * carries only `max-width`+centering, zero padding - two different
 * jobs, never one div doing both.
 * The breadcrumb <nav> does NOT use .davi-section (genuinely different
 * padding-block need - none at all, just its inline inset - same
 * "genuinely different, own rule" exception .davi-hero uses on the home
 * page), so it keeps one explicit rule of its own below. */
/* Client (2026-09-26): "breadcrumbsy powinny być jaśniejsze i oddalone
   od nagłówka - teraz są zbyt krzykliwe". padding-block added (there
   was none at all before - only .davi-pdp__summary's own 16px top
   padding separated the two), giving real, deliberate breathing room on
   both sides instead of relying entirely on the next section's own
   spacing. */
.davi-pdp__breadcrumbs {
	padding-block: 16px 20px;
	padding-inline: var(--page-padding-inline);
}

/* Flatsome's own default WooCommerce breadcrumb duplicated ours - a
   SECOND, real `<nav class="woocommerce-breadcrumb">` with its own
   (worse) data was genuinely still in the DOM, not just hidden by this
   CSS rule as a previous, incomplete fix assumed (client, 2026-09-26:
   "masz nav przy tytule z Woo, choć dodaliśmy swój - duplikacja
   breadcrumbsów"). The REAL cause: Flatsome hooks its own breadcrumb
   function directly onto `woocommerce_single_product_summary` at
   priority 0 (`flatsome_woocommerce_product_breadcrumb()`,
   inc/woocommerce/structure-wc-product-page-header.php) - a
   completely different, separate hook registration from
   `woocommerce_before_main_content`, which is the only one this
   project's own `remove_action()` call (inc/pdp-hooks.php) ever
   targeted. Now actually removed at the real hook (see pdp-hooks.php)
   - this CSS rule is dead code, kept only as a defensive fallback in
   case a future Flatsome update re-adds it at yet another hook. */
.woocommerce-breadcrumb {
	display: none;
}

.davi-pdp__breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: rgb(var(--gray-caption));
}

/* Real, live bug (client, 2026-09-26): each li carried a 7.8px
   margin-bottom from some generic sitewide `li` rule (not this file -
   never declared here), which this flex row never needed and which
   was throwing off spacing/wrap behavior between the two lines once
   the trail wraps. Zeroed explicitly rather than assumed already 0. */
.davi-pdp__breadcrumbs li {
	margin: 0;
}

.davi-pdp__breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin-left: 4px;
	color: rgb(var(--card-border));
}

.davi-pdp__breadcrumbs a {
	color: rgb(var(--gray-caption));
	text-decoration: none;
}

/* Was rgb(var(--base)) (near-black, #111215) - real, correctly-computed
   color, but next to the two muted-gray links before it, and directly
   above a bold H1 repeating almost the same text, it reads as too loud
   (client, 2026-09-26). Same muted gray as the rest of the trail now -
   still marked via aria-current for assistive tech, just no longer
   visually shouting. */
.davi-pdp__breadcrumbs li[aria-current] {
	color: rgb(var(--gray-caption));
}

/* .davi-pdp__summary is now the OUTER <section> itself (2026-09-26 -
 * previously this class carried the flex layout AND lived on the same
 * div as .davi-container's own max-width/centering - the exact "one
 * div doing both jobs" anti-pattern the section/container split rule
 * exists to prevent, and the reason "sekcja ma customową klasę choć
 * jej nie potrzebuje, brak kontenera" was a fair complaint: there was
 * a redundant `.davi-pdp__summary-section` wrapper ONLY because this
 * class had nowhere real left to live once max-width was already taken
 * by .davi-container). It also carries the shared `.davi-section`
 * class now (content-single-product.php), which is where
 * padding-inline comes from - only the padding-BLOCK override (16/32,
 * genuinely different from the standard --section-pad rhythm) still
 * needs its own rule, same "reuse what's shared, override only what
 * differs" approach `.davi-section`'s own comment describes. */
.davi-pdp__summary {
	padding-block: 16px 32px;
}

.davi-pdp__summary .davi-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ===== Galeria =====
 * Real gallery now (2026-09-24): content-single-product.php calls
 * woocommerce_show_product_images() - Flatsome's own Flickity-based
 * slider + zoom + thumbnails-as-nav system (product-image-stacked.php
 * on this install, per its real `product_layout` Customizer setting),
 * not a hand-rolled main-image/thumbnail-click implementation (client,
 * 2026-09-24: "nie wymyślaj swojego sposobu, użyj z WOO" - the
 * previous version had no real zoom and only ever swapped a plain
 * <img src>). Only cosmetic properties are touched below (radius/
 * spacing/colors) - Flickity's own slide positioning, drag, and the
 * thumbnails' real `asNavFor` link to the main slider are left
 * completely alone. Exact classes confirmed live against the real
 * rendered DOM, not guessed from the template source alone. */
.davi-pdp__gallery {
	position: relative;
}

/* Client (2026-09-26): "co to za klasy?? 'image-tools absolute top
   show-on-hover right z-3' i po co to jest??" - real Flatsome markup
   (product-image*.php templates, `do_action('flatsome_product_image_
   tools_top')`), a real hook slot meant for the YITH Wishlist plugin's
   button (inc/integrations/wc-yith-wishlist/yith-wishlist.php hooks
   there when active) - genuinely empty on this install since that
   plugin isn't active, confirmed live (`innerHTML.trim() === ''`), not
   removable without patching Flatsome's own template file directly.
   `:empty` alone doesn't actually match here (2026-09-26, live check) -
   Flatsome's real template leaves a single whitespace-only text node
   inside (`"\n      "` between the div tags), and `:empty` requires
   ZERO child nodes of any kind, whitespace text included, so it never
   fired. `:not(:has(*))` is the real fix - it only checks for ELEMENT
   children, ignoring stray whitespace, so it still starts working
   again for free the moment a wishlist button DOES get hooked there.
   The OTHER `.image-tools` (bottom-left, the real zoom button) is
   unaffected - it always has real element content. */
.davi-pdp__gallery .image-tools:not(:has(*)) {
	display: none;
}

/* Real Flatsome per-product badge (client-set per product, e.g.
   "Nowość") on the main gallery image - restyled (shape/size/position)
   to match Figma's real "bestseller-badge" component (node 81:574,
   product-summary/gallery-col/main-image-container) instead of
   Flatsome's own default circular "bubble" style (2026-10-08, client:
   "ten drugi ostyluj według tego z figmy" - after confirming this
   gallery instance and the "Polecane produkty" card instance were two
   SEPARATE badges, not one duplicated - the card one is restyled
   separately, assets/css/davi-product-slider.css).
   Color NOT overridden here on purpose (client, same message: "chyba że
   kolor jest definiowany z flatsome?? wtedy nie zmieniaj koloru") -
   confirmed live: .badge-inner has no specific background rule of its
   own anywhere in Flatsome's CSS, so it falls through to the generic
   `.badge-inner{background-color:var(--fs-color-primary);color:#fff}`
   base rule (flatsome.css) - the real, client-editable Dostosuj >
   Kolory > "Primary color" setting (color_primary theme_mod, currently
   #ffcd02), left untouched - same color as the card badge above, for
   the consistent look across both the client asked for. */
.davi-pdp__gallery .badge-container {
	top: 16px;
	left: 16px;
	margin: 0;
}

.davi-pdp__gallery .badge-container .badge {
	width: auto;
	height: auto;
	display: block;
}

.davi-pdp__gallery .badge-container .badge-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 6px 12px;
	border-radius: 6px;
	border: none;
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	opacity: 1;
}



/* ===== Kolumna informacyjna ===== */

.davi-pdp__info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.davi-pdp__title-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.davi-pdp__category {
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgb(var(--primary-tint));
	color: rgb(var(--base));
	font-size: 12px;
	font-weight: 700;
}

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

/* Real name split into <h1> + sibling <p> used to live here (2026-09-26
   audit fix - see davi_pdp_title_block() comment, inc/pdp-hooks.php,
   for why: only ONE tag may hold the real product name, splitting it
   across two separate content blocks is a real SEO/semantic
   regression, not "styling"). Now a <span> nested INSIDE the same
   <h1> - `display: block` keeps the same visual line break without
   leaving the heading, `font-weight: 400` overrides the h1's own 800
   for just this piece. */
.davi-pdp__title-spec {
	display: block;
	margin-top: 8px;
	color: rgb(var(--gray-caption));
	font-size: 15px;
	font-weight: 400;
}

/* TrustMate's own review widget (functions.php, adding_trustmate(),
   prio 7 - real external system, not WooCommerce's native empty
   rating meta, see inc/pdp-hooks.php) renders directly after the
   title block via the preserved hook - no placeholder needed here,
   unlike the product-card's own rating slot (that one really is a
   placeholder, waiting on the widget to be wired into the loop). */

/* ===== Cena ===== */

.davi-pdp__pricing-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.davi-pdp__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.davi-pdp__prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.davi-pdp__price--regular {
	color: rgb(var(--pdp-muted));
	font-size: 15px;
	text-decoration: line-through;
}

.davi-pdp__price--sale {
	color: rgb(var(--base));
	font-size: 30px;
	font-weight: 800;
}

.davi-pdp__saving-badge {
	padding: 6px 12px;
	border-radius: 6px;
	background: rgb(var(--danger-tint));
	color: rgb(var(--danger));
	font-size: 13px;
	font-weight: 700;
}

.davi-pdp__catalog-price {
	margin: 0;
	color: rgb(var(--pdp-muted));
	font-size: 14px;
}

/* wc_price()'s own real markup (`<span class="woocommerce-Price-amount
   amount">`) carries a direct color from somewhere in WooCommerce's own
   core/theme CSS (computed live: rgb(17,17,17), a plain dark gray, not
   any token of ours) - a direct rule on the element always beats the
   muted color inherited from .davi-pdp__catalog-price, no matter how
   low its specificity is (same landmine already documented for Onest
   on headings - 07-standardy-frontu.md's own precedent, feedback memory
   #11). Found live via getComputedStyle on the real .amount span, not
   assumed from the parent's own (correct) color alone. */
.davi-pdp__catalog-price .woocommerce-Price-amount {
	color: inherit;
}

/* ===== Warianty koloru (WPC Linked Variation) =====
 * Real plugin markup (wpc-linked-variation.php, self-hooked on
 * woocommerce_single_product_summary) - restyled only, not rebuilt
 * (2026-09-22 client decision: "korzystamy z jego elementów,
 * stylujemy"). Only appears on products the client has actually
 * linked - nothing to restyle, nothing renders, if a product has no
 * linked colors configured.
 *
 * First pass at this (2026-09-23) only fixed the active-border color
 * and stopped there - never actually verified the GRID matched Figma,
 * which the client caught live (swatches rendered as tiny 42px boxes,
 * 3 to a row, not a clean 4-column photo grid). Root cause: the
 * plugin's own frontend.css sets `.wpclv-attributes .wpclv-terms`
 * (0,2,0, display:inline-block) and `.wpclv-attributes .wpclv-terms
 * .wpclv-term.wpclv-term-image` (0,4,0, width:42px) - both beat a
 * plain `.wpclv-terms`/`.wpclv-term-image` override (0,1,0) outright,
 * so NONE of the original grid/sizing rules ever actually applied,
 * only the one selector (.active) that happened to already match its
 * real depth. Every rule below now matches (or exceeds, with
 * !important where the plugin also uses !important) the plugin's own
 * selector depth - checked against its actual frontend.css, not
 * assumed. */

.wpclv-attributes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wpclv-attribute-label {
	font-size: 14px;
	font-weight: 700;
	color: rgb(var(--base));
}

.wpclv-attributes .wpclv-terms {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
}

.wpclv-attributes .wpclv-terms .wpclv-term {
	display: block !important;
	height: auto !important;
	min-width: 0 !important;
	line-height: normal;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	position: relative;
	border: 1px solid rgb(var(--card-border)) !important;
	border-radius: 16px !important;
	background: rgb(var(--white));
}

.wpclv-attributes .wpclv-terms .wpclv-term.wpclv-term-image {
	width: 100% !important;
	aspect-ratio: 1600 / 1067;
	overflow: hidden;
}

.wpclv-attributes .wpclv-terms .wpclv-term.active,
.wpclv-attributes .wpclv-terms .wpclv-term:hover {
	border-color: rgb(var(--discount)) !important;
	border-width: 2px !important;
}

.wpclv-attributes .wpclv-terms .wpclv-term span,
.wpclv-attributes .wpclv-terms .wpclv-term a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	background: none !important;
	white-space: normal;
}

.wpclv-attributes .wpclv-terms img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 !important;
}

/* ===== Stan magazynowy =====
 * Real Figma per-state colors (in-stock/backorder/out-of-stock bg+text)
 * - each used exactly once in this file (checked directly, not
 * assumed), so left as raw values here rather than tokenized:
 * 07-standardy-frontu.md #3's own explicit exemption, "wartość użyta
 * raz i nigdzie indziej to nie token". out-of-stock reuses the real,
 * already-tokenized --danger/--danger-tint (used 2x elsewhere on this
 * page) instead of its own one-off pair, since it's genuinely the same
 * semantic color, not a coincidence. */
.davi-pdp__stock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: 12px;
	background: #f4f8f4;
}

.davi-pdp__stock-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Client (2026-09-26, screenshot): label/note were breaking mid-word on
   narrow phones ("W" / "magazynie" on separate lines) - neither had
   `white-space: nowrap`, so plain flex-shrink let the text wrap inside
   itself instead of the whole phrase moving as one unit. Container now
   wraps (flex-wrap above) so if there's genuinely not enough width, the
   note drops to its own full line below the label - never a phrase
   broken mid-word. */
.davi-pdp__stock-label {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.davi-pdp__stock-note {
	font-size: 14px;
	color: rgb(var(--pdp-muted));
	white-space: nowrap;
}

.davi-pdp__stock--in-stock .davi-pdp__stock-icon,
.davi-pdp__stock--in-stock .davi-pdp__stock-label {
	color: #22c55e;
}

.davi-pdp__stock--out-of-stock {
	background: rgb(var(--danger-tint));
}

.davi-pdp__stock--out-of-stock .davi-pdp__stock-icon,
.davi-pdp__stock--out-of-stock .davi-pdp__stock-label {
	color: rgb(var(--danger));
}

.davi-pdp__stock--backorder {
	background: #fefbea;
}

.davi-pdp__stock--backorder .davi-pdp__stock-icon,
.davi-pdp__stock--backorder .davi-pdp__stock-label {
	color: #b45309;
}

/* Flatsome UX-Builder content (2026-09-23, client: "ukryj go teraz") -
 * real, pre-existing marketing copy ("Dlaczego DaviBikes...", dostawa/
 * zwroty accordions) baked into this product's own post_content as
 * `[row][col]` shortcodes, rendered via `the_content()`/
 * `woocommerce_single_product_summary` at a priority between our own
 * add-to-cart (30) and stock block (30, registered after WC's own) -
 * not part of the new Figma layout at all. Targeted by DOM position
 * (direct child of our own .davi-pdp__info, the only place plain
 * `.row` appears there) since UX Builder gives each row/col a
 * regenerated unique ID on every save - nothing stable to hook a
 * selector to otherwise. Hidden, not deleted - it's real content the
 * client wrote, still live in the post editor if needed later. */
.davi-pdp__info > .row {
	display: none;
}

/* th-product-compare-pro's own injected checkbox
   (woocommerce_after_add_to_cart_button), real class `.thunk-compare` -
   hidden 2026-09-23 ("ukryj porównaj"), brought back 2026-09-29 (client:
   "klient chce ten przycisk 'porównaj' co miał przed zmianami...
   estetycznie ograć"). Real DOM position: a direct child of
   .davi-pdp__actions, right after the qty+add-to-cart row (parentClass
   confirmed live: "cart davi-pdp__actions") - `flex-basis: 100%` drops
   it onto its own line below that row instead of squeezing into it,
   since .davi-pdp__actions is a `justify-content: flex-end` row sized
   for exactly those two items. The checkbox/checkmark itself (::before/
   ::after) is the plugin's own real, working styling (fstyle.css,
   .checkbox_type) - left alone; only font-family/size/color pulled in
   line with the rest of this page instead of the plugin's own default
   Arial-ish 14px black. */
.davi-pdp__actions .thunk-compare {
	flex-basis: 100%;
	margin-top: 4px;
}

.davi-pdp__actions .th-product-compare-btn.checkbox_type {
	padding: 0;
	font-family: 'Onest', sans-serif;
}

.davi-pdp__actions .th-product-compare-btn.checkbox_type > span {
	color: rgb(var(--pdp-muted));
	font-weight: 500;
}

/* ===== Koszyk (qty + dodaj do koszyka) =====
 * Real WooCommerce form (woocommerce/single-product/add-to-cart/
 * simple.php override) - only restyled here, fields/names unchanged
 * (real cart submission, not decorative).
 *
 * First pass only styled `.quantity`/`.qty` - missed that Flatsome's
 * own JS wraps the real <input> in `.ux-quantity` and injects its OWN
 * `.ux-quantity__button--minus/--plus` <input type="button"> elements
 * (buttons_added), styled by Flatsome's generic `.button`/`input[type=
 * button]` rules - never touched by the first pass at all, so they
 * kept Flatsome's own default button chrome instead of Figma's plain
 * "-"/"+" text treatment (node 81:630/107:905) - found live via the
 * real rendered DOM, not assumed. */
.davi-pdp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
}

.davi-pdp__actions .ux-quantity {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgb(var(--card-border));
	border-radius: 8px;
	background: none;
}

/* `all: unset` alone wasn't enough - Flatsome's own CSS sets
   `background`/`box-shadow` on these with !important (real, generic
   .button/.is-form/input[type=button] rules, not specific to
   .ux-quantity__button), which beats a plain `unset` regardless of
   specificity, since !important always wins over a non-important
   declaration. Every one of those needs its own !important here too -
   confirmed live via computed style (buttons still had a light-gray
   fill, the number input still had an inset box-shadow, both reading
   as extra internal dividers instead of Figma's one clean outer
   border, node 81:630/107:905). */
.davi-pdp__actions .ux-quantity__button {
	all: unset;
	/* appearance:none - without it, an <input type="button"> can still
	   render its native OS/browser widget chrome (incl. a tinted value
	   text color) regardless of the `color` below, since `all: unset`
	   resets -webkit-appearance to its initial value ("auto"), not to
	   "none" - found live via a real screenshot (the +/- glyphs
	   rendered light blue, not the --pdp-muted gray the computed
	   `color` property already correctly reported). */
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	line-height: 1;
	font-size: 16px;
	font-weight: 700;
	color: rgb(var(--pdp-muted)) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* .davi-pdp__qty, not .qty - woocommerce_quantity_input()'s own
   'classes' arg REPLACES the default input-text/qty/text classes
   here rather than appending to them (confirmed live: the real
   rendered <input> only ever carries class="davi-pdp__qty", no bare
   .qty at all) - the first pass's `.qty` selector never matched
   anything, so none of these reset rules ever applied; the visible
   border was plain browser-default <input> styling all along, not
   anything Flatsome added. */
/* .davi-pdp__qty repeated (0,3,0) - Flatsome's own
   `.quantity input[type="number"]` (flatsome-shop.css) is ALSO (0,2,0)
   - an exact specificity tie with the single-class version of this
   rule, so whichever stylesheet is later in the page's own <head>
   order silently won (found live 2026-09-24: computed width read 44px
   and font-size 17.6px - Flatsome's own `width:2.5em`/`font-size:1em`,
   not this rule's 16px/16px, even though this rule was RIGHT THERE in
   the matched-rules list). One extra repeat of the class guarantees
   this wins regardless of load order, same fix pattern as the add-to-
   cart button below. `height` is a genuinely NEW property here (not
   in the first pass at all) - Flatsome's same generic input rule also
   sets `height: 2.507em`, which nothing here was overriding, and
   which computed to the exact 44.1px that was inflating the whole qty
   pill (and, via `align-items:stretch` on .davi-pdp__actions, the
   button next to it too) well past Figma's real ~43px total box
   height (client: "input na cyfrę i dodaj do koszyka są znacznie
   większe"). */
.davi-pdp__actions .davi-pdp__qty.davi-pdp__qty {
	width: 16px;
	height: auto;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	/* Same "generic Flatsome input rule wins the height math" issue as
	   above, one property over: nothing here set `line-height` either,
	   so the input fell back to a real inherited 1.6 (line-height:
	   25.6px computed on a 16px font) - Figma's own text uses a plain
	   ~1.2 leading, matching the "-"/"+" buttons right next to it
	   (already explicitly `line-height: 1` there) - not set to match
	   here until this same round of fixes. */
	line-height: 1;
	color: rgb(var(--base));
	-moz-appearance: textfield;
}

.davi-pdp__actions .davi-pdp__qty::-webkit-inner-spin-button,
.davi-pdp__actions .davi-pdp__qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* .davi-pdp__add-to-cart repeated x4 (0,4,0) + !important - TWO
   Flatsome Customizer-generated inline <style> rules (printed in
   <head>, real theme-wide button-color settings, not our own code)
   both target this button: `.single_add_to_cart_button.button`
   (0,2,0, background rgb(26,26,26)) and the more specific
   `.single-product .product .single_add_to_cart_button.button`
   (0,4,0) - found live via a real computed-style + matching-rules
   check. Same fix pattern as the earlier finder-CTA underline override
   (07-standardy-frontu.md precedent) - repeating our own class
   outranks both regardless of exact load order.
   Figma's own export shows this button gold (#ffc518, matching
   --discount) - color changed to black anyway (2026-09-24, client:
   "Zmień kolor przycisku dodaj do koszyka na czarny"), a deliberate
   deviation from the file, not a mistake being corrected. --base
   (#111215), not a hand-picked black - same "black" already used for
   the upsells section's own secondary button. */
.davi-pdp__add-to-cart.davi-pdp__add-to-cart.davi-pdp__add-to-cart.davi-pdp__add-to-cart {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	background: rgb(var(--base)) !important;
	color: rgb(var(--white)) !important;
	font-size: 15px;
	font-weight: 700;
	/* Real cause of "input na cyfrę i dodaj do koszyka są znacznie
	   większe" round 2 (2026-09-24): this button inherited a real
	   line-height of 36px from somewhere up the tree (WooCommerce/
	   Flatsome button defaults - never actually checked/set here
	   before), computing to a 60px-tall button (24px padding + 36px
	   line-height) - and since .davi-pdp__actions uses `align-items:
	   stretch`, that also force-stretched the qty pill right next to it
	   to the same 60px, even after that pill's OWN internal line-height
	   bug (see .davi-pdp__qty above) was fixed independently. Figma's
	   real text here has plain ~normal leading, not 36px - explicit
	   line-height brings the whole row down to its real ~43px. */
	line-height: 1.2;
	cursor: pointer;
}

@media (hover: hover) {
	.davi-pdp__add-to-cart:hover {
		filter: brightness(0.95);
	}
}

/* ===== Ikony płatności (davi_render_payment_icons(), realny akcesor
   już użyty w stopce - inc/footer-settings.php) ===== */

.davi-pdp__payments-img {
	display: block;
	max-height: 24px;
	width: auto;
}

/* ===== Zaufanie (pod logiem płatności) =====
 * Restored 2026-10-05 (client: "dodaj to z powrotem"). Only the list
 * container's own rule was recovered verbatim from history; the row/icon
 * rules below are reconstructed, check visually against the live page. */
.davi-pdp__trust {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.davi-pdp__trust-row {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgb(var(--base));
	font-size: 14px;
}

.davi-pdp__trust-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* ===== Dobierz do roweru (node 82:962/107:1010) =====
 * Real plugin markup (woo-bought-together's own [woobt] shortcode,
 * checked live via `do_shortcode()` - not assumed) - restyled only,
 * same "korzystamy z jego elementów, stylujemy" rule already applied
 * to WPC Linked Variation's color swatches. Real classes confirmed:
 * .woobt-products (grid), .woobt-product/.woobt-product-together
 * (each card), .woobt-choose > .woobt-checkbox (a real, functional
 * checkbox input - the plugin's own .checkmark span is dead CSS,
 * `display:none` in its own frontend.css, so the checkbox itself is
 * styled directly), .woobt-thumb img, .woobt-title/.woobt-title-inner,
 * .woobt-price/-new/-ori. No "category" second line here (Figma shows
 * one, e.g. "Akcesoria rowerowe") - the plugin's real item markup has
 * no such field to source it from, and inventing one would mean
 * rebuilding this component instead of restyling it, the opposite of
 * what was asked. */

/* No longer a section of its own at all (2026-09-29, client: "przenieś
   te akcesoria... na ten atc box") - the widget renders via its own
   real `woocommerce_after_add_to_cart_form` hook now (woobt_position
   filter, inc/pdp-hooks.php), directly inside .davi-pdp__info right
   after the add-to-cart form, matching production exactly (no heading,
   nothing between the button and the widget there either) - so there's
   no wrapper class of ours left to give a title to. Every rule below is
   prefixed to match or exceed the plugin's own
   real specificity in frontend.css (checked directly, not guessed):
   `.woobt-products .woobt-product` is (0,2,0) with its own display/
   padding/border-bottom/justify-content; `.woobt-products .woobt-
   product > div` (0,2,1) pads every direct child 0 5px; `.woobt-
   products .woobt-product .woobt-thumb`/`.woobt-price` are (0,3,0)
   with their own fixed width/flex-basis. A same-or-lower-specificity
   override risks losing outright regardless of source order (the
   exact bug already hit twice this session with .wpclv-*) - so every
   selector here goes one class deeper than the plugin's own. */

/* .woobt-wrap .woobt-products (0,2,0) also sets its own margin -
   .woobt-products alone (0,1,0) wouldn't reliably beat it. */
.woobt-wrap .woobt-products {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	border: none;
}

/* The plugin renders the current product itself as an extra, disabled,
   pre-checked "card" (.woobt-product-this) alongside the real cross-
   sell items - Figma only ever shows the accessories themselves. */
.woobt-products .woobt-product-this {
	display: none;
}

.woobt-products .woobt-product.woobt-product-together {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px;
	margin: 0;
	border: 1px solid rgb(var(--checkbox-border));
	border-radius: 12px;
	background: rgb(var(--white));
}

.woobt-products .woobt-product.woobt-product-together > div {
	padding: 0;
	background: none;
}

/* .woobt-choose (real markup: label[visually-hidden] + input.woobt-checkbox
   + span.checkmark[display:none], see class-woobt.php) never had its own
   rule - as a bare flex item (flex:0 1 auto, the default) inside
   .woobt-product-together's flex row, its automatic minimum size for
   shrinking is based on the checkbox's REPLACED-ELEMENT intrinsic size,
   not the 20px `width` set below on .woobt-checkbox itself - found live
   via getBoundingClientRect: computed `width` correctly read "20px" but
   the actual rendered box was 2px wide, because .woobt-thumb (flex:0 0
   64px), .woobt-title (flex-grow) and .woobt-price (flex:0 0 100px)
   already claim all available row width, so this unshrink-protected item
   got crushed to its ~2px auto-minimum instead (the "nie ma jak zaznaczyć"
   report - the checkbox wasn't hidden, just squeezed to invisible). */
.woobt-products .woobt-product.woobt-product-together .woobt-choose {
	flex: 0 0 20px;
	display: flex;
	align-items: center;
}

.woobt-products .woobt-product.woobt-product-together .woobt-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
	border: 1.5px solid rgb(var(--checkbox-border));
	border-radius: 4px;
	background: #fafbfd;
	cursor: pointer;
}

/* Client (2026-09-23): solid-fill checked state alone read as just a
   yellow square, no clear "checked" affordance - the plugin's own
   .checkmark span exists in the markup but is dead CSS (display:none in
   its own frontend.css, confirmed earlier), so a real checkmark has to
   be drawn here. A plain inline SVG tick (dark --base stroke, contrasts
   against the gold fill), not a Figma-sourced icon asset - this is our
   own form-control affordance, not part of the design export. */
.woobt-products .woobt-product.woobt-product-together .woobt-checkbox:checked {
	border-color: rgb(var(--discount));
	background-color: rgb(var(--discount));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23111215' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.woobt-products .woobt-product.woobt-product-together .woobt-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
}

.woobt-products .woobt-product.woobt-product-together .woobt-thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.woobt-products .woobt-product.woobt-product-together .woobt-title {
	flex: 1 1 0;
	min-width: 0;
}

.woobt-products .woobt-product.woobt-product-together .woobt-title-inner {
	display: block;
	color: rgb(var(--base));
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.woobt-products .woobt-product.woobt-product-together .woobt-title-inner a {
	color: inherit;
	text-decoration: none;
}

.woobt-products .woobt-product.woobt-product-together .woobt-qty-num {
	color: rgb(var(--pdp-muted));
	font-weight: 400;
}

/* Real stock line (.woobt-availability > .stock) - not in Figma's
   mockup for this component, and already hidden sitewide via the
   Additional CSS `.stock { display: none !important; }` rule left in
   place earlier (kept, since removing it was out of scope for the
   PDP-specific cleanup) - no extra rule needed here, just documenting
   why it doesn't show. */

.woobt-products .woobt-product.woobt-product-together .woobt-price {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	text-align: right;
	color: rgb(var(--base));
	font-size: 14px;
	font-weight: 800;
}

/* Real, necessary control (see inc/pdp-hooks.php for why this isn't
   hidden) - not in Figma's mockup, so no exact reference to match;
   styled as a secondary/bulk action (dark, not the primary gold CTA
   already used elsewhere) rather than left as the plugin's own
   unstyled default. Same specificity fight as the main add-to-cart
   button (a real, theme-wide Customizer !important rule targets
   `.single_add_to_cart_button.button` sitewide) - scoped selector
   here avoids colliding with that button's own four-times-repeated
   override class instead of reusing it.
   First pass made it `display:block; width:100%` - a full-width black
   bar the same width as the whole 3-column grid, wildly oversized for
   a secondary action (client: "za wielki... żeby to miało ręce i
   nogi"). Sized to its own text now, right-aligned under the cards -
   a normal secondary-button proportion, not stretched to fill the
   section. */
/* "Razem" (.woobt-total) always summed the bike's own price + the
   checked accessories (the plugin's default "bundle" framing, class-
   woobt.php's woobt_calc_price()) - now that "Dobierz do roweru" only
   ever adds the checked accessories to cart (see inc/pdp-hooks.php,
   woobt_separately/ignore_this_item), that line is both redundant with
   ".woobt-additional" ("Cena dodatkowa") and wrong (it still includes
   the bike's price, which this button will never actually add) -
   hidden rather than recalculated in JS, since once the bike is out of
   the equation there's nothing left for it to say that "Cena dodatkowa"
   doesn't already say correctly. */
.woobt-total {
	display: none !important;
}

.woobt-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.woobt-actions .single_add_to_cart_button {
	display: inline-flex;
	width: auto;
	padding: 10px 20px;
	border: none !important;
	border-radius: 8px;
	background: rgb(var(--base)) !important;
	color: rgb(var(--white)) !important;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

/* Client (2026-09-26): po dodaniu dodatków w tej sekcji nie ma się
   pojawiać "Zobacz koszyk". Real source: woo-bought-together's own JS
   (frontend.js, .woobt-form .single_add_to_cart_button click handler)
   triggers WooCommerce core's generic `added_to_cart` body event with
   its OWN button - WC core's add-to-cart.js (AddToCartHandler.
   updateButton) is what actually inserts the link, `$button.after(...)`
   right after THAT SAME button, same mechanism any add-to-cart button
   sitewide uses, not something woobt or this project renders itself.
   Scoped to .woobt-wrap only - the main PDP add-to-cart button's own
   "Zobacz koszyk" (davi-pdp__actions, a separate button/DOM subtree)
   is untouched. */
.woobt-wrap .added_to_cart {
	display: none;
}

/* 3-column desktop grid removed (2026-09-29) - designed for when this
   widget rendered as its own full-width section (up to 1440px, matching
   related-products' own 4-column row); now that it's back inside
   .davi-pdp__info (the narrower ~449-687px summary column, matching
   production), a 3-column grid would be cramped regardless of
   viewport - stays the same single-column list at every width, same as
   production. */

/* ===== Wideo produktu (node 90:1628/107:1054) =====
 * Real per-product ACF fields (inc/pdp-hooks.php,
 * davi_pdp_video_section()) - no video URL set = nothing renders,
 * checked with `if ($url)`/`if ($embed)`, not a placeholder box. */

/* No rule needed - padding comes from the generic `.davi-pdp > section`
   rule now. Renamed from .davi-pdp__video-section - "section" is a
   forbidden structural-role word in a BEM name
   (07-standardy-frontu.md §1: "nazwa nie zawiera słowa sekcja/
   kontener/wrapper/blok"), the same reason .davi-pdp__summary-section
   was removed above. */

.davi-pdp__video-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 24px;
}

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

.davi-pdp__video-desc {
	margin: 0;
	color: rgb(var(--pdp-muted));
	font-size: 14px;
}

/* aspect-ratio - realna wartość z Figmy (828x456 desktop, 343x176
   mobile - dwie NAPRAWDĘ różne proporcje, nie to samo 16:9 zaokrąglone
   inaczej na każdym breakpoincie, sprawdzone przez get_metadata). */
.davi-pdp__video-embed {
	position: relative;
	width: 100%;
	max-width: 828px;
	aspect-ratio: 343 / 176;
	overflow: hidden;
	border-radius: 16px;
	background: rgb(var(--base));
}

.davi-pdp__video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ===== Opis (node 103:202/features-grid) =====
 * Real per-product WooCommerce description (inc/pdp-hooks.php,
 * davi_pdp_description_section()) - classic-editor HTML (h2, an
 * embedded YouTube iframe, h3/p feature blocks, a handful of full-
 * width <img> tags), NOT a hand-built card grid. Figma shows every
 * feature paired with its own adjacent photo, alternating sides in
 * bordered cards - the real content doesn't actually pair 1:1 like
 * that (some products have 2+ features between images, some have
 * none), so reverse-engineering that exact pairing would mean
 * inventing structure the real data doesn't have, the opposite of the
 * project's "use his existing system, just restyle" rule (2026-09-18
 * kickoff). Styled instead as clean, centered flowing content -
 * matches the one part of the brief that IS unambiguous: "wyśrodkowana,
 * nie ma 'opis' itp" (centered, no tab UI/label) - real Figma colors/
 * type sizes applied to the generic h2/h3/p/img tags this content
 * actually renders as.
 * #4b5563 (paragraph color) - Figma's own value for this section only,
 * a THIRD distinct gray alongside --pdp-muted (#6E7A8A) and
 * --gray-caption (#636971) already in use elsewhere on this page - not
 * reused/aliased to either, since Figma didn't reuse them either.
 * -inner used to cap at max-width:800px as a "reading width" choice -
 * removed (2026-09-24, client: "ta sekcja... jest węższa, nie na całą
 * stronę") - now fills .davi-container like every other PDP section
 * (upsells, specs), not a separate narrower column. */
/* Free from the generic `.davi-pdp > section` rule (davi-pdp.css, near
   the top) now - this section needs nothing of its own. An earlier
   version duplicated the inset here (own padding-inline on -inner ON
   TOP OF the generic rule's padding-inline on the section itself - the
   exact double-padding bug already caught once on the info-card,
   2026-09-25), caught in the 2026-09-26 standards audit before it ever
   shipped. */
.davi-pdp__description-inner h2 {
	color: rgb(var(--base));
	font-size: 24px;
	font-weight: 800;
}

.davi-pdp__description-inner h3 {
	margin-top: 32px;
	margin-bottom: 8px;
	color: rgb(var(--base));
	font-size: 18px;
	font-weight: 700;
}

.davi-pdp__description-inner p {
	margin: 0 0 8px;
	color: #4b5563;
	font-size: 16px;
	line-height: 1.4;
}

/* Real bug (client, 2026-09-26, screenshot at 320px: item "10." rendered
   as just "0.", the "1" clipped off past the left edge) - some sitewide
   reset zeroes out every <ol>/<ul>'s own default browser padding-left
   (~40px normally) without giving list markers anywhere else to live,
   and `list-style-position: outside` (the default, still in effect)
   renders the marker OUTSIDE the content box, to its left - with zero
   padding reserved there, a two-digit marker like "10." has nowhere to
   go but negative x, off-screen past the page's own 16px gutter.
   Confirmed live: ol had `padding-left: 0px`, li's own content started
   at the exact same x as the ol itself (no room carved out at all).
   Real WC description content (post_content, arbitrary per-product
   HTML) can contain any list, not just this one product's - fixed
   generally here, not just for this specific list. */
.davi-pdp__description-inner ol,
.davi-pdp__description-inner ul {
	margin: 0 0 8px;
	padding-left: 1.25em;
}

/* Real bug (client, 2026-09-26): li never got its own color rule, so it
   fell back to the ambient inherited color (~#222, checked live) while
   .davi-pdp__description-inner p explicitly uses the lighter #4b5563 -
   an oversight, not a deliberate distinction (only h2/h3 are meant to
   stay dark, for real heading hierarchy). Matches p now. */
.davi-pdp__description-inner li {
	margin-bottom: 4px;
	color: #4b5563;
}

.davi-pdp__description-inner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin-block: 24px;
	border-radius: 16px;
	object-fit: cover;
}

/* The embedded YouTube video already carries its own real inline
   responsive-ratio styles (position:relative;padding-top:56.25% on the
   wrapper, position:absolute;inset on the iframe) written directly
   into the product's post_content - only the rounding/spacing needed
   adding here to match the rest of the page's "rounded media" pattern
   (main gallery image, thumbnails, the video-card embed above all use
   the same 16px radius).
   The whole description is ONE single top-level wrapper div (real
   content: `<div style="max-width:1200px;margin:0 auto;">...</div>`,
   not several sibling blocks) with the video wrapper nested inside it,
   not a direct child of .davi-pdp__description-inner - a `:has(>
   iframe)` attempt targeting direct children never matched anything
   real (found live: computed height read the full ~4445px of the
   ENTIRE description, not just the video). Matched by its real,
   distinctive inline style instead. */
.davi-pdp__description-inner div[style*="padding-top: 56.25%"] {
	margin-block: 24px;
	border-radius: 16px;
	overflow: hidden;
}

/* ===== Specyfikacja/Instrukcje/Info (node 90:1228/davibikes-specs) =====
 * Real data sources: inc/pdp-hooks.php's davi_pdp_specs_section() -
 * WooCommerce product attributes (Specyfikacja), real per-product ACF
 * fields for Instrukcje i montaż (inc/acf-fields.php,
 * group_davi_instr_{1,2,3}), a sitewide accordion text for Informacje o
 * produkcie (inc/footer-settings.php).
 * #f5f7f9 (section bg) - real Figma value, used exactly once on this
 * page (07-standardy-frontu.md #3's own exemption: a value used once
 * isn't a token). The label/border grays used repeatedly across these
 * three cards (#5e626a, #e8ecef) are real tokens now
 * (--specs-muted/--specs-border, tokens.css) - both genuinely distinct
 * from --pdp-muted/#6E7A8A and --gray-caption/#636971 used elsewhere on
 * this page, not aliased to either (same "close but different Figma
 * exports" situation already documented for those two). */
/* padding-block/-inline both come from the generic `.davi-pdp > section`
   rule now (2026-09-26 audit fix - see .davi-pdp__description above for
   the same fix and why). background stays here on the outer section -
   that one genuinely needs to be full-bleed. */
.davi-pdp__specs {
	background: #f5f7f9;
}

.davi-pdp__specs-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The 3rd-column group (client, 2026-09-29 screenshot: Specyfikacja +
   Instrukcje jako pełne kolumny, reszta kart - Informacje o
   producencie + 3 nowe - razem w węższej trzeciej kolumnie) - own
   vertical stack, same 24px rhythm as the outer container, so it reads
   as one column's worth of cards, not a separate design. Mobile: no
   special treatment needed, already just another item in the same
   flex-column stack above. */
.davi-pdp__specs-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 1024px) {
	.davi-pdp__specs-inner {
		display: grid;
		grid-template-columns: 1.2fr 1.2fr 1fr;
		align-items: start;
	}
}

/* FAQ (2026-09-30, client: "wyświetlać ma się pod specyfikacją... pod
   spodem, na tym szarym tle") - a separate full-width row below the
   3-column grid above, NOT a 4th grid item (which would just occupy one
   column track instead of spanning the row) - its own .davi-container
   sibling inside the same <section>, so it shares the exact same
   #f5f7f9 background/section padding as everything else here without
   fighting the grid's own column layout. margin-top matches the grid's
   own 24px rhythm (.davi-pdp__specs-inner's gap) so it reads as one
   more row in the same rhythm, not a bolted-on afterthought. */
.davi-pdp__faq-inner {
	margin-top: 24px;
}

/* Outer FAQ card reuses .davi-specs-card/.davi-info-card exactly (same
   <details> accordion component as "Informacje o producencie" etc.
   above) - client asked for this to match the rest of the PDP, not a
   new pattern, so no new outer-card CSS is needed here at all beyond
   what those shared classes already give it. */

.davi-faq-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Inner "akordeon pytań" - deliberately NOT another .davi-info-card (that
   component's 20px padding + 48px round icon is sized for a short, fixed
   list of top-level cards; a product can have up to 8 of these, so a
   flatter, denser row fits better here, closer to .davi-specs-card__row's
   own compact rhythm). */
.davi-faq-item {
	border-bottom: 1px solid rgb(var(--specs-border));
}

.davi-faq-list > .davi-faq-item:last-child {
	border-bottom: none;
}

.davi-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	color: rgb(var(--base));
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.davi-faq-item__question::-webkit-details-marker {
	display: none;
}

.davi-faq-item__question::marker {
	content: '';
}

.davi-faq-item__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: rgb(var(--base));
	transition: transform var(--motion, 0.2s ease-out);
}

.davi-faq-item[open] .davi-faq-item__chevron {
	transform: rotate(90deg);
}

.davi-faq-item__answer {
	padding: 0 0 16px;
	color: rgb(var(--specs-muted));
	font-size: 13px;
	line-height: 1.5;
}

.davi-faq-item__answer p {
	margin: 0 0 12px;
}

.davi-faq-item__answer p:last-child {
	margin-bottom: 0;
}

.davi-specs-card {
	background: rgb(var(--white));
	border: 1px solid rgb(var(--specs-border));
	border-radius: 16px;
}

/* .davi-info-card excluded from both rules below (not just the flex
   one) - client (2026-09-26): "sekcja 'informacje o produkcie' ma za
   duże paddingi kiedy jest zwinięta". Real cause: this base rule's own
   24px padding landed on the OUTER <details> (since .davi-info-card
   also carries the shared .davi-specs-card class), stacking on top of
   .davi-info-card__summary's OWN padding below it - a real, measured
   double-padding (computed collapsed height was 138px, not the ~88px
   Figma's 20px-padding + 48px icon math gives). .davi-info-card gets
   its own explicit `padding: 0` instead, so only its summary/content
   children's own padding applies, matching the other cards (which
   never had this problem, since they only ever had ONE padding-bearing
   box, not two nested ones). */
.davi-specs-card:not(.davi-info-card) {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}

.davi-info-card {
	padding: 0;
}

.davi-specs-card__title {
	margin: 0;
	color: rgb(var(--base));
	font-size: 18px;
	font-weight: 700;
}

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

.davi-specs-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	border-bottom: 1px solid rgb(var(--specs-border));
	font-size: 13px;
}

/* Only the row that's genuinely last (whichever of the two possible
   "last" spots is actually in play) loses its divider - see the two
   direct-child selectors below, not a single :last-child (the extra
   rows live in their own nested wrapper, so a plain
   ".davi-specs-card__row:last-child" would never match the true last
   row of the base list once .davi-specs-card__extra follows it). */
.davi-specs-card__list > .davi-specs-card__row:last-child,
.davi-specs-card__extra > .davi-specs-card__row:last-child {
	border-bottom: none;
}

.davi-specs-card__label {
	flex-shrink: 0;
	width: 140px;
	color: rgb(var(--specs-muted));
	font-weight: 400;
}

.davi-specs-card__value {
	flex: 1 0 0;
	min-width: 0;
	color: rgb(var(--base));
	font-weight: 500;
	text-align: right;
}

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

/* The browser's own UA default (`[hidden] { display: none }`) is the
   SAME specificity as a single class (0,1,0) - the rule above, loaded
   later in this stylesheet, silently won regardless of the `hidden`
   attribute (found live: hasAttribute('hidden') was true, but computed
   display still read "flex" - the same specificity-tie class of bug
   hit repeatedly elsewhere on this page with third-party CSS, this
   time self-inflicted). One class + the attribute (0,2,0) reliably
   outranks the bare class rule above regardless of source order. */
.davi-specs-card__extra[hidden] {
	display: none;
}

.davi-specs-card__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: rgb(var(--base));
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.davi-specs-card__toggle-icon {
	width: 16px;
	height: 16px;
	color: rgb(var(--base));
	transition: transform var(--motion, 0.2s ease-out);
}

.davi-specs-card__toggle.is-expanded .davi-specs-card__toggle-icon {
	transform: rotate(90deg);
}

.davi-instructions-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.davi-instruction-block {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid rgb(var(--specs-border));
	border-radius: 12px;
	background: rgb(var(--white));
	text-decoration: none;
	color: inherit;
}

.davi-instruction-block__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgb(var(--icon-bg));
	color: rgb(var(--base));
}

.davi-instruction-block__icon .davi-icon {
	width: 20px;
	height: 20px;
}

.davi-instruction-block__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 0 0;
	min-width: 0;
}

.davi-instruction-block__title {
	overflow: hidden;
	color: rgb(var(--base));
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.davi-instruction-block__subtitle {
	color: rgb(var(--specs-muted));
	font-size: 11px;
}

/* <details>/<summary> (2026-09-25, real accordion matching the live
   production page - see inc/pdp-hooks.php, davi_pdp_product_info_card())
   - .davi-info-card is now the <details> itself, block-level (no flex
   here, unlike the old single-row <a> version); the flex row lives on
   .davi-info-card__summary instead. */
.davi-info-card__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Uniform 20px, matching Figma's own `p-[20px]` on this exact node
	   (263:99, "info-section") exactly - not 20px/24px, a value that
	   was never actually in the file, just assumed. */
	padding: 20px;
	cursor: pointer;
	list-style: none;
}

/* Hides the native disclosure triangle both browsers draw on
   <summary> by default (Chromium's own ::-webkit-details-marker,
   Firefox's ::marker) - davi_icon('chevron-right') is the only
   expand/collapse affordance shown, matching Figma exactly. */
.davi-info-card__summary::-webkit-details-marker {
	display: none;
}

.davi-info-card__summary::marker {
	content: '';
}

.davi-info-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: rgb(var(--icon-bg));
	color: rgb(var(--base));
	font-size: 14px;
	font-weight: 700;
}

/* Real sprite icons (star/truck/rotate-ccw) for the 3 new cards below,
   same circle as .davi-info-card__icon's literal "i" text - just needs
   an explicit size since an SVG child has no intrinsic font-size to
   size itself against the way the "i" character did. */
.davi-info-card__icon-svg {
	width: 20px;
	height: 20px;
}

.davi-info-card__title {
	flex: 1 0 0;
	min-width: 0;
	color: rgb(var(--base));
	font-size: 14px;
	font-weight: 700;
}

.davi-info-card__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: rgb(var(--base));
	transition: transform var(--motion, 0.2s ease-out);
}

.davi-info-card[open] .davi-info-card__chevron {
	transform: rotate(90deg);
}

.davi-info-card__content {
	padding: 0 20px 20px;
	color: rgb(var(--specs-muted));
	font-size: 13px;
	line-height: 1.5;
}

.davi-info-card__content p {
	margin: 0 0 12px;
}

.davi-info-card__content p:last-child {
	margin-bottom: 0;
}

/* ===== Polecane produkty (node 81:197/showcase-section) =====
 * Rebuilt 2026-09-26 (client: "polecane produkty z dupy zrobione,
 * czemu nie użyliśmy gotowego modułu z głównej gdzie mamy listingi
 * produktów") - used to be Flatsome's own native related.php template
 * restyled to look similar; now the real, shared .davi-product-slider
 * component (assets/css/davi-product-slider.css) + davi_product_card(),
 * the exact same markup/mechanism the home page's own product picks
 * use, via davi_pdp_related_section() (inc/pdp-hooks.php). .davi-section
 * + .davi-container handle the box model (same generic mechanism as
 * every other PDP section) - only the title needs its own rule, since
 * Figma (81:200) shows normal-case 40px Onest ExtraBold, not a generic
 * .davi-section-head (that class also lives in the front-page-only
 * davi-home.css - not worth a second shared-file extraction for one
 * heading here). */
.davi-pdp__related-title {
	margin: 0 0 32px;
	color: rgb(var(--base));
	font-size: 28px;
	font-weight: 800;
}

@media (min-width: 1024px) {
	.davi-pdp__related-title {
		font-size: 40px;
	}
}

/* ===== Desktop ===== */

@media (min-width: 1024px) {
	.davi-pdp__summary {
		padding-block: 24px 48px;
	}

	.davi-pdp__summary .davi-container {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	/* flex-grow 2:1 (2026-09-30, client: "zmniejsz prawą kolumnę
	   powiększając lewą, chodzi o to, aby zdjęcia były większe" -
	   replaces the earlier 687:449 (~60.5:39.5) ratio below, which was
	   itself just Figma's original proportion scaled up to fill the
	   real 1240px content width, not a deliberately chosen "how big
	   should the gallery be" ratio - a real, explicit client request to
	   grow it further, not a bug fix. 2:1 (66.7%:33.3%) is a clear,
	   visible jump from the old ~60.5:39.5 split rather than a couple
	   of barely-noticeable percentage points. */
	.davi-pdp__gallery {
		flex: 2 1 0;
	}

	.davi-pdp__info {
		flex: 1 1 0;
	}

	/* Sticky columns (2026-09-30, client: "kolumny muszą być sticky, żeby
	   zawsze kończyły się razem nad tym paskiem" - the tab bar just
	   added, davi_pdp_tabs_nav()). Reverses an earlier, explicit removal
	   of sticky on .davi-pdp__info alone (2026-09-24, client back then:
	   "element z ATC jest sticky (miał nie być)") - a real change of
	   direction, not a bug, now asking for BOTH columns sticky together,
	   not just one. Classic "matched-height sticky columns" technique:
	   both flex children of the same row get `position: sticky` at the
	   SAME top offset + `align-self: flex-start` (a sticky flex item
	   only actually sticks if it isn't already stretched to the row's
	   full cross-size by the row's default `align-items: stretch` -
	   flex-start opts it out of that stretch). Whichever column has LESS
	   content stays pinned at `top` for as long as the OTHER, taller
	   column keeps scrolling past underneath it, and only scrolls away
	   once its own containing block (this flex row) ends - which is
	   exactly where the next section (davi_pdp_tabs_nav()'s own sticky
	   bar) begins, so both columns visually finish together right above
	   it, instead of the shorter one ending early with visible empty
	   space beneath while the page kept scrolling.
	   top: 112px - the SAME real offset .davi-pdp__tabs itself uses
	   (Flatsome's own site header goes `position: fixed` + `.stuck`
	   past a scroll threshold, real measured height 112px desktop - see
	   the detailed comment on .davi-pdp__tabs) - these columns need to
	   duck under that exact same fixed header, not a separate value. */
	.davi-pdp__gallery,
	.davi-pdp__info {
		position: sticky;
		top: 112px;
		align-self: flex-start;
	}

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

	.davi-pdp__price--sale {
		font-size: 36px;
	}

	.davi-pdp__video-embed {
		aspect-ratio: 828 / 456;
	}
}

/* Sticky anchor-nav tab bar (2026-09-30, client reference screenshot) -
   see davi_pdp_tabs_nav() (inc/pdp-hooks.php). White bg + bottom border
   (not the #f5f7f9 specs-section gray - this sits directly under the
   white gallery/summary area, matching the reference) - `position:
   sticky` needs its own opaque background regardless, or content
   scrolling underneath would show through.
   `top` is NOT 0 - Flatsome's own site header has a real sticky mode
   here (confirmed live: `.header-wrapper` gains a `.stuck` class + goes
   `position: fixed` past a scroll threshold, `z-index: 1001`, a
   DIFFERENT/shorter height than its normal in-flow height - measured
   112px desktop / 73px mobile). At `top: 0` this tab bar was rendering
   directly UNDERNEATH that fixed header, completely hidden behind it
   (found live - the tab bar was fully functional, correct DOM position,
   just invisible under the site header's own higher z-index). Pinning
   this bar's own `top` to that stuck header's real height, instead of
   0, makes it stick right below the site header rather than fighting
   it for the exact same spot. z-index only needs to clear this page's
   OWN later content below it (video/description/specs/related
   sections), so 5 is still correct - it never needs to compete with
   the header's own 1001. */
/* Client (2026-09-30): "nadal trochę mało widoczne... na szaro może?" -
   a plain white bar blended into the white gallery/summary content right
   above it, so the border-bottom alone wasn't enough of a signal. Same
   #f5f7f9 the .davi-pdp__specs section already uses further down this
   page - a real, existing PDP color, not a new gray invented for this
   one bar - so it reads as "this site's own muted surface", not an
   unrelated new tone. */
.davi-pdp__tabs {
	position: sticky;
	top: 73px;
	z-index: 5;
	background: #f5f7f9;
	border-bottom: 1px solid rgb(var(--specs-border));
	/* Padding lives HERE, on the outer element - NOT on .davi-pdp__tabs-
	   inner alongside its own .davi-container margin-centering (real,
	   live bug, client 2026-09-30: measured 340px total inset on the
	   tabs bar vs 240px on .davi-pdp__specs-inner just below it - the two
	   values were stacking instead of composing). Matches the SAME
	   split every other full-bleed PDP section already uses (e.g.
	   .davi-pdp__specs gets the padding, .davi-pdp__specs-inner only
	   gets margin-centering, no padding of its own) - padding on the
	   outer box only ever matters below the max-width breakpoint
	   anyway; once .davi-container's max-width engages, this padding
	   and the inner margin-centering combine to the exact same (viewport
	   - max-width)/2 inset every other section reaches, regardless of
	   this value - they're mathematically equivalent, not two competing
	   numbers, as long as they're never BOTH placed on the same element. */
	padding-inline: var(--page-padding-inline);
}

@media (min-width: 782px) {
	.davi-pdp__tabs {
		top: 112px;
	}
}

/* A real <ul>/<li> now (2026-09-30, client: "czy w nawigacji nie powinno
   być ul li?") - matches this project's own established nav convention
   (davi_pdp_breadcrumbs(), footer.php's link columns/trust badges, the
   related-products slider all already use <nav><ul role="list"><li>),
   which this bar should have followed from the start instead of bare
   <a> tags directly in a <div>. margin/padding/list-style reset since
   <ul> carries real UA defaults (list-style bullets + indent) that have
   no place in a horizontal tab row. */
.davi-pdp__tabs-inner {
	display: flex;
	gap: clamp(16px, 1.5vw, 32px);
	overflow-x: auto;
	/* margin-block, NOT the `margin` shorthand (real, live bug, client
	   2026-09-30: "sekcja jest wyrównana do lewej, nie do środka" -
	   confirmed live at 1920px viewport: every OTHER .davi-container on
	   this page centers at left:240/right:1680, this one sat flush-left
	   at left:0/right:1440). `margin: 0;` resets ALL four sides,
	   silently overwriting .davi-container's own `margin-inline: auto`
	   (tokens.css) - the exact mechanism that centers a max-width box
	   inside a wider viewport - with a flat 0. Only the <ul>'s own real
	   default (margin-BLOCK, top/bottom) ever needed resetting here;
	   margin-inline was never broken, it just needed to be left alone
	   instead of zeroed alongside it. */
	margin-block: 0;
	/* NOT padding-inline here (2026-09-30 correction) - see the longer
	   comment on .davi-pdp__tabs itself. .davi-container (tokens.css)
	   only ever handles width/max-width/centering; the padding half of
	   the job belongs on the OUTER .davi-pdp__tabs, same split
	   .davi-pdp__specs/.davi-pdp__specs-inner already use, not doubled
	   up on this single inner element. */
	list-style: none;
	/* Real horizontal-scroll cue on mobile (reference screenshot shows
	   "Dosta..." cut off mid-word with a scrollbar hint) - no visible
	   scrollbar track needed beyond the browser's own thin one, just
	   room for it not to eat into the tab row's own padding. */
	scrollbar-width: thin;
}

/* The <li> is the real flex item now (the <a> inside it is just an
   inline link, no longer the direct flex child) - needs its own
   flex-shrink:0 so a tab's label still can't get squeezed/wrapped
   instead of the row simply scrolling horizontally.
   margin:0 - Flatsome's own generic sitewide `li` rule adds a real
   ~7.8px margin-bottom to every bare <li> with no more specific class
   overriding it (the EXACT same bug already found and fixed once on
   .davi-pdp__breadcrumbs li above - missed carrying the same fix over
   to this second, newer <ul> - client, 2026-09-30: "zapomniałeś usunąć
   stylowania ul li które jest domyślnie z flatsome"). In a horizontal
   flex row this margin doesn't create visible vertical gaps the way it
   did on breadcrumbs, but it still throws off this row's own
   cross-axis alignment/height, so it's zeroed here for the same real
   reason, not just for consistency. */
.davi-pdp__tabs-inner > li {
	flex-shrink: 0;
	margin: 0;
}

/* Client (2026-09-30): "zrób większy ten pasek... niech będzie bardziej
   widoczne" - bigger type/padding/underline across the board (14px/
   600/2px → 16px/700/3px), not just one property, so the whole bar reads
   as a clearly more prominent piece of UI rather than a quiet, easy-to-
   miss caption row. */
.davi-pdp__tab {
	display: block;
	padding: 20px 12px;
	border-bottom: 3px solid transparent;
	border-radius: 6px 6px 0 0;
	color: rgb(var(--specs-muted));
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--motion, 0.2s ease-out), border-color var(--motion, 0.2s ease-out), background var(--motion, 0.2s ease-out);
}

.davi-pdp__tab:hover {
	color: rgb(var(--base));
}

/* --primary (#F5AF08) - this site's own real accent (the same yellow the
   header logo/hero CTAs use elsewhere), not the reference screenshot's
   orange - "dopasowane stylem do naszej strony" means our own token, not
   a copy of another shop's brand color. Active tab also gets a faint
   tint of the same color behind it (not just the underline) - another
   real, visible signal rather than relying on a 3px line alone to carry
   "more visible" on its own. */
.davi-pdp__tab.is-active {
	border-bottom-color: rgb(var(--primary));
	background: rgb(var(--primary-tint));
	color: rgb(var(--base));
}

/* Client (2026-09-30): "po co dodawać ekstra kod js, który robi to co
   html + css" - correct. These two rules are now the ONLY thing
   positioning the tab bar's `<a href="#id">` scroll (an earlier version
   intercepted every click and computed this same offset by hand in JS -
   removed, see assets/js/davi-pdp.js's own comment). scroll-margin-top
   keeps a native anchor jump from landing UNDER the site's own sticky
   header + this sticky tab bar (both real fixed/sticky elements above
   the content once scrolled) - ~200px covers the tallest real case
   (112px stuck desktop header + ~58px tab bar + margin). This CSS file
   only ever loads on product pages (functions.php, is_product()), so
   `html { scroll-behavior }` here can't reach any other page type. */
html {
	scroll-behavior: smooth;
}

#davi-pdp-tab-opis,
#davi-pdp-tab-specyfikacja,
#davi-pdp-tab-dostawa,
#davi-pdp-tab-zwroty,
#davi-pdp-tab-faq {
	scroll-margin-top: 200px;
}