/*
 * Davimo product detail page (PDP). Reuses the global design tokens
 * defined in cart-drawer.css (:root — --davimo-green/offwhite/rose/
 * radius-button/text-primary/text-secondary), which this file depends on
 * (see class-davimo-product-page.php enqueue).
 */

.davimo-pdp {
	color: var(--davimo-text-primary);
	/* Storefront's div.product{overflow:hidden} breaks position:sticky on
	   the gallery below (an ancestor with overflow:hidden becomes the
	   sticky containing block instead of the real scrolling viewport). */
	overflow: visible !important;
}

/* Buy box: two-column grid, gallery sticky within it. Full viewport width,
   matching the researched Olaplex reference (measured at 1905/1920px — no
   container max-width) rather than Storefront's constrained .col-full. The
   standard breakout technique below only works because .davimo-pdp/#page
   overflow was already forced to visible above. */

.davimo-pdp__buybox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: start;
	/* --davimo-space-xl (48px), was a literal 2.5rem (40px) — standardized
	   so every major section-to-section gap on the page (this one, the
	   below-fold section gap, and the cross-sell gap) uses the same
	   value instead of three different ones (40/32/40px). */
	margin-bottom: var(--davimo-space-xl);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.davimo-pdp__buybox {
		grid-template-columns: minmax(0, 340px) 1fr;
		gap: 1.5rem;
	}
}

/* Tablet: fall back to a single column once the gallery column would get
   uncomfortably narrow next to the info column. */
@media (max-width: 900px) {
	.davimo-pdp__buybox {
		grid-template-columns: 1fr;
	}

	.davimo-pdp__gallery {
		position: static;
	}
}

/* Gallery */

.davimo-pdp__gallery {
	display: flex;
	gap: 1rem;
	position: sticky;
	top: 2rem;
	align-self: start;
}

/* Thumbnails are true 1:1 squares, sized by product-page.js
   (--davimo-gallery-thumb-size) so the column of N stacked squares + gaps
   totals the visible viewport height on load (viewport height minus
   whatever fixed header/announcement bar sits above it — NOT the info
   column's content height). Falls back to a fixed 80px before JS runs. */
.davimo-pdp__gallery-thumbs-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.davimo-pdp__gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* Same var as the gallery height below — thumbnails are sized to
	   exactly fill it, so this only ever engages (scroll + arrows) if
	   there are enough images to hit product-page.js's MIN_THUMB_SIZE
	   floor. */
	max-height: var(--davimo-gallery-height, 480px);
	overflow-y: auto;
	scrollbar-width: none;
}

.davimo-pdp__gallery-thumbs::-webkit-scrollbar {
	display: none;
}

.davimo-pdp__gallery-thumb {
	width: var(--davimo-gallery-thumb-size, 80px);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--davimo-radius-button);
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.davimo-pdp__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davimo-pdp__gallery-thumb.is-active {
	border-color: var(--davimo-green);
}

.davimo-pdp__gallery-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 24px;
	border: none;
	background: rgba(27, 38, 36, 0.06);
	border-radius: var(--davimo-radius-button);
	color: var(--davimo-green);
	cursor: pointer;
	font-size: 0.7rem;
	flex-shrink: 0;
}

.davimo-pdp__gallery-arrow:hover {
	background: rgba(27, 38, 36, 0.12);
}

.davimo-pdp__gallery-arrow[hidden] {
	visibility: hidden;
}

.davimo-pdp__gallery-main {
	position: relative;
	flex: 1;
	/* Same --davimo-gallery-height var as the thumbnail column above, set
	   by product-page.js from the real visible-viewport-on-load
	   calculation — both are sized independently off the same value
	   rather than one stretching to match the other's content height. */
	height: var(--davimo-gallery-height, 480px);
	min-height: 300px;
	overflow: hidden;
	border-radius: var(--davimo-radius-button);
	background: var(--davimo-offwhite);
	cursor: zoom-in;
}

.davimo-pdp__gallery-main img {
	/* Absolutely positioned and taken out of flow: object-fit:cover on a
	   100%-height img already crops correctly against the explicit height
	   above, but keeping it out of flow avoids the image's own natural
	   aspect-ratio size ever influencing .davimo-pdp__gallery-main's box
	   (e.g. during the brief pre-JS instant before the height var is set). */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.06s ease-out;
	transform-origin: center center;
}

.davimo-pdp__gallery-main.is-zoomed img {
	transform: scale(2);
}

/* Mobile: thumbnails become a horizontal scroll strip above the main image. */
@media (max-width: 767px) {
	.davimo-pdp__gallery {
		flex-direction: column-reverse;
		position: static;
	}

	.davimo-pdp__gallery-thumbs-col {
		flex-direction: row;
		width: 100%;
	}

	.davimo-pdp__gallery-thumbs {
		flex-direction: row;
		max-height: none;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: visible;
	}

	.davimo-pdp__gallery-arrow {
		width: 24px;
		height: 44px;
	}
}

/* Info column */

.davimo-pdp__info {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* font-size was a literal 1.75rem (28px) — a real, substantial gap
   below the type scale's ~40px h1 target (product titles are
   explicitly h1-level per that token's own definition), not a rounding
   difference. Now governed by the token, matching the shop page's own
   H1 (which already rendered at this size via Storefront's default). */
.davimo-pdp__title {
	font-size: var(--davimo-text-h1-size);
	font-weight: var(--davimo-text-h1-weight);
	line-height: var(--davimo-text-h1-line-height);
	color: var(--davimo-text-primary);
	margin: 0;
}

.davimo-pdp__description {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--davimo-text-secondary);
}

.davimo-pdp__description p:first-child {
	margin-top: 0;
}

/* Quantity tier tiles */

.davimo-pdp__tiers-label {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--davimo-text-secondary);
}

.davimo-pdp__tiers {
	display: flex;
	gap: 1rem;
}

.davimo-pdp__tier {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	min-height: 44px;
	padding: 0.3rem 0.75rem;
	text-align: left;
	background: var(--davimo-offwhite);
	border: 2px solid rgba(27, 38, 36, 0.15);
	border-radius: var(--davimo-radius-button);
	cursor: pointer;
	line-height: 1.2;
}

.davimo-pdp__tier.is-selected {
	border-color: var(--davimo-green);
	background: rgba(27, 38, 36, 0.05);
}

/* The "purple border" reported on these tiles only ever showed up on an
   actual click/focus, never in the resting (even .is-selected) state —
   which is why reading computed border-color alone never found it. It's
   WordPress core's global "a:focus,input:focus,textarea:focus,
   button:focus{outline:2px solid #7f54b3}" (bare element+pseudo-class
   selectors, easily outranked by a single class here) — a plain :focus
   outline, not :focus-visible, so it fired on mouse clicks too, not just
   keyboard nav. Removing it for :focus and only drawing our own on
   :focus-visible keeps the purple gone for mouse clicks while still
   giving keyboard users a visible, on-brand ring. */
.davimo-pdp__tier:focus {
	outline: none;
}

.davimo-pdp__tier:focus-visible {
	outline: 2px solid var(--davimo-green);
	outline-offset: 2px;
}

/* Badge is a tag overlapping the tile's own top edge, not a clickable
   control of its own — pill shape is appropriate here (see the button-
   radius design-system note in cart-drawer.css). */
.davimo-pdp__tier-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--davimo-rose);
	/* Black, not a token: offwhite-on-rose measured ~2.3:1 (WCAG relative
	   luminance), well under the 4.5:1 AA minimum for this text size.
	   Black-on-rose measures ~7.5:1 — comfortably clears AA (and AAA). */
	color: #000;
	/* -30% from the prior round's +50% size (0.93rem/0.3rem 0.975rem/
	   0.045em), i.e. 0.62rem × 1.5 × 0.7 overall from the original. */
	font-size: 0.651rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.0315em;
	white-space: nowrap;
	padding: 0.21rem 0.6825rem;
	border-radius: 999px;
}

.davimo-pdp__tier-label {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--davimo-text-primary);
}

.davimo-pdp__tier-sub {
	font-size: 0.78rem;
	color: var(--davimo-text-secondary);
}

.davimo-pdp__tier-save {
	color: var(--davimo-rose);
	font-weight: 700;
}

.davimo-pdp__tier-price {
	margin-top: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--davimo-text-primary);
}

/* Add-to-cart form: reuses WooCommerce's own markup, restyled to tokens.
   The quantity input is still present and functional (tier tiles set its
   value) — just visually hidden since the tiles are the visible control. */

.davimo-pdp__add-to-cart .quantity {
	display: none;
}

.davimo-pdp__add-to-cart .single_add_to_cart_button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1rem;
	background-color: var(--davimo-green) !important;
	color: var(--davimo-offwhite) !important;
	border: none !important;
	border-radius: var(--davimo-radius-button) !important;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	cursor: pointer;
}

.davimo-pdp__add-to-cart .single_add_to_cart_button:hover {
	opacity: 0.9;
}

.davimo-pdp__trust {
	margin: 0;
	font-size: var(--davimo-text-small-size);
	line-height: var(--davimo-text-small-line-height);
	text-align: center;
	color: var(--davimo-text-secondary);
}

/* Trust badges: NAFDAC + card networks, text+icon treatment (no logo
   assets exist yet in the media library). */

.davimo-pdp__trust-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
}

.davimo-pdp__trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--davimo-text-secondary);
	background: rgba(27, 38, 36, 0.05);
	padding: 0.35rem 0.7rem;
	border-radius: var(--davimo-radius-button);
}

.davimo-pdp__trust-badge-icon {
	color: var(--davimo-green);
	font-weight: 700;
}

/* Star rating summary, directly under the title — reuses WooCommerce's
   own single-product/rating.php markup (.woocommerce-product-rating). */

.davimo-pdp .woocommerce-product-rating {
	margin: -0.5rem 0 0;
	font-size: 0.85rem;
}

.davimo-pdp .woocommerce-product-rating .star-rating {
	font-size: 0.9rem;
}

.davimo-pdp .woocommerce-review-link {
	color: var(--davimo-text-secondary);
	text-decoration: underline;
}

/* Below-the-fold sections */

.davimo-pdp__below-fold {
	display: flex;
	flex-direction: column;
	/* --davimo-space-xl (48px), was a literal 2rem (32px) — this one gap
	   governs the space between every below-fold section (Reviews,
	   lineup, personalized routine, FAQ, difference blurb, blog teaser,
	   write-a-review), so a single change here standardizes all 6 of
	   those gaps at once. */
	gap: var(--davimo-space-xl);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
}

/* font-size was a literal 1.2rem (19.2px) — a real, meaningful gap
   below the type scale's ~26px h2 ("major section heading") target.
   This one class is shared by every below-fold section heading on the
   PDP (Benefits, How to Use, Mechanism, Active Ingredients, Results,
   Reviews, the lineup/personalized-routine/FAQ/blog-teaser/write-review
   sections) and the shop page's reused personalized-routine heading —
   changing it here standardizes all of them at once. */
.davimo-pdp__section-title {
	font-size: var(--davimo-text-h2-size);
	font-weight: var(--davimo-text-h2-weight);
	line-height: var(--davimo-text-h2-line-height);
	color: var(--davimo-text-primary);
	margin: 0 0 0.75rem;
}

/* These were already at 16px (matching --davimo-text-body-size exactly)
   via the browser/theme default, just with no explicit font-size rule
   governing it and an inherited ~1.618 line-height instead of the type
   scale's 1.6 body value — now both are explicit and token-driven
   instead of incidental. */
.davimo-pdp__ingredients-list,
.davimo-pdp__benefits-list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
}

.davimo-pdp__ingredients-list li,
.davimo-pdp__benefits-list li {
	margin-bottom: 0.35rem;
}

.davimo-pdp__mechanism p {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
}

.davimo-pdp__how-to-use p {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
}

/* Deliberately NOT full column width: .davimo-pdp__gallery-main uses
   align-self:stretch to match the info column's height (a prior fix — see
   product-page.js), so a full-width square image here would make the info
   column dramatically taller than the gallery's natural height and stretch
   the gallery's cover-fit image into a distorted crop. Capped small and
   kept modest so this stays a supporting visual, not a second hero. */
.davimo-pdp__results-image {
	display: block;
	width: 220px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--davimo-radius-button);
	margin: 0.75rem 0;
}

.davimo-pdp__results p {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
	margin: 0;
}

/* Reviews — high priority, given real visual prominence. */

.davimo-pdp__reviews {
	padding: 2rem;
	background: var(--davimo-offwhite);
	border-radius: var(--davimo-radius-button);
}

/* Was a literal 1.4rem (22.4px) — predates the type-scale token work
   and was never updated when --davimo-text-h2-size changed (1.2rem ->
   1.625rem/26px). "Customer Reviews" was found rendering at this exact
   same 22.4px as "Add This to Clear Your Skin" below (same value in
   both places is not a coincidence — see that rule's own comment). */
.davimo-pdp__section-title--reviews {
	font-size: var(--davimo-text-h2-size);
	line-height: var(--davimo-text-h2-line-height);
}

/* Native WooCommerce review markup, restyled on-brand. Storefront's own
   woocommerce.css scopes nearly every review rule under the #reviews ID
   (e.g. "#reviews .commentlist li .avatar") — an ID beats any number of
   classes regardless of source order, so every selector below that targets
   something inside #reviews repeats that same ID rather than relying on
   classes alone (confirmed via the live stylesheet, not trial and error).
   Storefront also lays .comment_container out with percentage-width floats
   (.avatar / .comment-text) — overridden to flexbox below rather than left
   coexisting with, since float+clearfix layouts are a proven source of bugs
   in this codebase (see the shop-grid clearfix issue). */

/* Real bug, not just a small heading: this was styled at 0.9rem/500
   (14.4px) — smaller than even --davimo-text-small (14px/400), meaning
   a heading-level element rendered smaller than ordinary secondary
   body text. It's WooCommerce core's own hardcoded <h2 class=
   "woocommerce-Reviews-title"> (templates/single-product-reviews.php)
   sitting right after our own "Customer Reviews" h2 — genuinely a
   subheading of that, not a peer section, but demoting the actual tag
   to h3 would mean overriding WooCommerce's entire reviews template
   (a real ongoing maintenance cost against future WC core updates) for
   a purely cosmetic difference; not worth it here. Restyled to the h3
   token's size+weight instead (visually reads as the subheading it
   structurally is) while leaving the tag itself as WC's native h2. */
.davimo-pdp__reviews .woocommerce-Reviews-title {
	font-size: var(--davimo-text-h3-size);
	font-weight: var(--davimo-text-h3-weight);
	line-height: var(--davimo-text-h3-line-height);
	color: var(--davimo-text-secondary);
	margin: 0 0 1.5rem;
}

.davimo-pdp__reviews #reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.davimo-pdp__reviews #reviews .commentlist li {
	margin-bottom: 0;
	list-style: none;
}

.davimo-pdp__reviews #reviews .commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #fff;
	border-radius: var(--davimo-radius-button);
	padding: 1.25rem;
}

.davimo-pdp__reviews #reviews .commentlist li .avatar {
	width: 44px !important;
	height: 44px !important;
	float: none;
	margin: 0;
	border-radius: 50%;
	flex-shrink: 0;
}

.davimo-pdp__reviews #reviews .commentlist li .comment_container .comment-text {
	width: auto;
	float: none;
	margin-right: 0;
	flex: 1;
	min-width: 0;
}

.davimo-pdp__reviews #reviews .commentlist li .comment_container .comment-text .star-rating {
	float: none;
	margin: 0 0 0.5rem;
}

/* Star color applies everywhere .star-rating appears on the PDP — both the
   review-list stars below and the rating summary under the title (from
   woocommerce_template_single_rating()) — so both use the same accent.
   !important here because WooCommerce's base stylesheet (not Storefront)
   sets these two exact properties directly with no ID involved. */
.davimo-pdp .star-rating {
	color: var(--davimo-rose);
}

.davimo-pdp .star-rating::before {
	color: rgba(27, 38, 36, 0.15) !important;
}

.davimo-pdp .star-rating span::before {
	color: var(--davimo-rose) !important;
}

.davimo-pdp__reviews #reviews .commentlist li p.meta {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: var(--davimo-text-secondary);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.davimo-pdp__reviews #reviews .commentlist li p.meta strong {
	color: var(--davimo-text-primary);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
}

.davimo-pdp__reviews #reviews .commentlist li time {
	color: var(--davimo-text-secondary);
	opacity: 1;
}

.davimo-pdp__reviews .description p {
	margin: 0;
	color: var(--davimo-text-primary);
	line-height: 1.5;
}

/* The write-a-review form no longer lives inside .davimo-pdp__reviews at
   all — product-page.js's initReviewFormRelocation() moves the real
   #review_form_wrapper node into its own standalone
   .davimo-pdp__write-review section at the end of the page (see
   content-single-product.php), with a real <h2 class="davimo-pdp__
   section-title"> heading matching every other below-the-fold section
   (FAQ, blog teaser, etc.) rather than a one-off embedded-card look.
   .davimo-pdp__below-fold's own flex gap handles spacing between it and
   its siblings, same as every other section there — no extra margin
   needed here. Field/button styling below is re-scoped from
   .davimo-pdp__reviews to .davimo-pdp__write-review to follow the form
   to its new location; unstyled otherwise since the form itself doesn't
   render inside #reviews here (no #reviews ID to contend with, unlike
   the review list rules above). */
.davimo-pdp__write-review .comment-form-rating label,
.davimo-pdp__write-review .comment-form-comment label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--davimo-text-primary);
	margin-bottom: 0.4rem;
}

.davimo-pdp__write-review #rating,
.davimo-pdp__write-review #comment {
	width: 100%;
	max-width: 420px;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(27, 38, 36, 0.2);
	border-radius: var(--davimo-radius-button);
	font-family: inherit;
	font-size: 0.95rem;
	background: #fff;
	color: var(--davimo-text-primary);
}

.davimo-pdp__write-review #comment {
	max-width: 100%;
}

.davimo-pdp__write-review .form-submit input#submit {
	background-color: var(--davimo-green) !important;
	color: var(--davimo-offwhite) !important;
	border: none !important;
	border-radius: var(--davimo-radius-button) !important;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
}

.davimo-pdp__write-review .form-submit input#submit:hover {
	opacity: 0.9;
}

/* Honeypot spam trap (see class-davimo-product-page.php
   render_review_honeypot_field()) — off-screen positioning, not
   display:none or visibility:hidden. Some bots specifically check
   computed display/visibility and skip fields that fail those checks,
   which would defeat the trap entirely; moving it off the visible canvas
   while it's still genuinely laid out (not display:none) catches bots
   that don't bother with that check, without any real visitor ever
   seeing or reaching it (tabindex="-1" + aria-hidden in the markup back
   this up for keyboard/screen-reader users). Not scoped to
   .davimo-pdp__write-review — matches wherever this field renders. */
.davimo-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* "The Products That Clear Your Breakouts" full lineup.
   2-column layout: column 1 (.davimo-pdp__lineup-products) is a nested
   2x2 sub-grid holding all 4 products; column 2 is the model image.
   Model height is NOT hardcoded anywhere — with the outer grid's default
   align-items:stretch, the model cell stretches to match whichever
   sibling is naturally taller (in practice always the products sub-grid,
   since it holds real capped-height product cards), so it always spans
   column 1's full height dynamically, the same principle as the
   previous 3-column layout's grid-row-spanning model column, just via
   a different mechanism now that there's no second row to span.
   align-content:start (not the grid default, which behaves as stretch)
   keeps this single implicit row sized to its own content height rather
   than being force-stretched to fill however much space flex:1 hands
   the grid on tall viewports (see .davimo-pdp__lineup-section below) —
   without it, excess space would stretch the row (and everything in it)
   thin. start, not center: center was the original choice here, but it
   measurably pushed the actual visible content down inside the grid's
   flex-allocated box whenever that box was taller than the content's
   own natural height — the grid's own wrapper element still sat right
   after the heading (a correct 12px, matching every other section's
   heading-to-content gap), but the real product images inside it
   weren't reachable there; measured on a real page load, the heading-
   to-first-image gap was 165px, not 12px, because centering split the
   leftover space equally above AND below the content. start pins
   content to the top of the grid's box instead, so the visible gap is
   always just the shared .davimo-pdp__section-title margin — consistent
   with Benefits/How to Use's own 12px gap — regardless of viewport
   height; any leftover flex-allocated space now falls after the grid's
   content instead of before it. */

/* No min-height:100svh here (previous round) — forced this section to
   fill the viewport even when heading+grid content was naturally
   shorter, leaving dead space above "Want a Personalized Routine?" on
   short/wide and laptop-height windows. Sizes to actual content now,
   same as every other below-fold PDP section (.davimo-pdp__mechanism,
   .davimo-pdp__ingredients, etc). */
/* background: transparent (was --davimo-offwhite). A prior round set
   this to offwhite to fix a perceived color seam against "Want a
   Personalized Routine" — confirmed since then, via full investigation
   of both this wrapper AND the 4 individual cards, that the wrapper's
   own background never actually mattered: the cards sit edge-to-edge
   with 0px gap between them and fully cover this wrapper's area with
   their OWN offwhite background (see .davimo-pdp__lineup-item below,
   also changed to transparent here). Both levels now match "Add This
   to Clear Your Skin", whose cards are individually transparent, not
   off-white — that's the actual mechanism making it read as white. */
.davimo-pdp__lineup-section {
	display: flex;
	flex-direction: column;
	background: transparent;
}

/* gap: 0 (was --davimo-space-md) — column 1 (products) and column 2
   (model) now sit flush against each other as one cohesive block,
   rather than separated by a visible gutter. */
/* No border-radius/overflow/clip-path here — removed. Confirmed live
   that every other PDP section container (FAQ, From the Blog, Add This
   to Clear Your Skin) is a flat, square 0px box; this grid was the one
   section-level container with rounded corners (a prior round's fix,
   moving individual 14px card radii up to this one outer wrapper — see
   git history), which is the actual inconsistency, not the individual
   cards. Removing it here makes this section match the page's dominant
   flat pattern instead of being the one exception. */
.davimo-pdp__lineup-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-content: start;
	gap: 0;
	flex: 1;
}

/* The 2x2 product sub-grid. Plain DOM-order auto-placement (row 1: item
   1, item 2; row 2: item 3, item 4) — no slot classes needed here,
   unlike the previous layout: the model image is now a sibling of this
   whole block (see Davimo_Product_Page::render_full_lineup()), not
   interleaved between individual product cells, so a product skipped by
   the exists() check just leaves a gracefully smaller grid instead of
   shifting any placement logic.
   gap: 0 (was --davimo-space-md) — the 4 cards sit directly adjacent,
   separated only by their own existing 1px border (see
   .davimo-pdp__lineup-item below), not a gutter. */
.davimo-pdp__lineup-products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0;
}

/* Model shot — not a link, no click handler (see
   Davimo_Product_Page::render_lineup_model_image()); it isn't a product
   and has nowhere to navigate to. No border-radius/overflow rule here
   anymore — was var(--davimo-radius-card), individually rounding this
   element's own corners even where it meets the products grid with no
   gap between them; now handled once, on .davimo-pdp__lineup-grid
   above, which rounds+clips the whole combined shape instead. (The
   class is still referenced by the max-width:900px aspect-ratio rule
   further down, so it's kept in the markup — just nothing to declare
   for it at this breakpoint anymore.) */

.davimo-pdp__lineup-model-image {
	display: block;
	width: 100%;
	height: 100%;
	/* cover, not contain — the opposite tradeoff from the letterboxed
	   look kept intentionally in an earlier round: this crops the photo
	   (rather than showing it in full with empty space around it) so it
	   fills the column's full measured height (1054px) edge-to-edge with
	   no visible gap. Screenshot-verified before finalizing. */
	object-fit: cover;
}

/* Card content now fully matches "Add This to Clear Your Skin"'s cards:
   image-left/details-right top row (.davimo-pdp__lineup-top), a real
   Add to Cart button, and a "why it helps" reason line below (both
   reusing the cross-sell section's own classes directly — see
   Davimo_Product_Page::render_full_lineup() — rather than duplicating
   their styling under new class names).
   .davimo-pdp__lineup-item is a flex COLUMN now (top row, then the
   reason paragraph below) — was a flex ROW itself (image+details side
   by side directly); that row now lives one level down, on
   .davimo-pdp__lineup-top, because a <button> can't be validly nested
   inside an <a> (the existing "click the card to visit the product
   page" behavior), so the link now wraps only the image+details (see
   .davimo-pdp__lineup-link), with the Add button as its own sibling
   alongside it, both inside .davimo-pdp__lineup-top.
   Shadow uses --davimo-green at low opacity rather than a plain black
   shadow, for a softer, on-brand tone instead of a generic gray one.
   No border-radius here — was var(--davimo-radius-card), individually
   rounding all 4 corners of every card even at the internal joins
   where cards sit flush against each other/the model; handled once on
   .davimo-pdp__lineup-grid instead. padding: 20px is a deliberate,
   explicit value here, not one of the --davimo-space-* tokens (nearest
   are 16px/sm and 24px/md) — flagged, not silently swapped to the
   nearer token, since it was specifically requested at this exact
   value. background: transparent (was --davimo-offwhite) — these 4
   cards sit edge-to-edge with 0px gap (see .davimo-pdp__lineup-grid/
   -products), fully covering the section wrapper's own area with this
   color; changing only the wrapper's background (see
   .davimo-pdp__lineup-section above) would have had no visible effect
   at all, since these cards paint over it completely. Matches "Add
   This to Clear Your Skin", whose cards are individually transparent
   too — the border + shadow below are enough separation from the
   page's white background, same as that reference. */
.davimo-pdp__lineup-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--davimo-space-sm);
	height: 100%;
	padding: 20px;
	background: transparent;
	border: 1px solid rgba(27, 38, 36, 0.1);
	box-shadow: 0 4px 12px rgba(27, 38, 36, 0.08);
	transition: border-color 0.15s ease;
}

/* :has() replaces the old a.davimo-pdp__lineup-item:hover rule — the
   card itself is no longer ever an <a> (see above), so its hover
   affordance now comes from detecting hover on either of the two nested
   links instead (thumb-link or the name/price link — see
   render_full_lineup(), which now uses two narrow links instead of one
   combined one, so the Add button can be a real DOM sibling after the
   second one rather than nested inside it). */
.davimo-pdp__lineup-item:has(.davimo-pdp__lineup-thumb-link:hover, .davimo-pdp__lineup-link:hover) {
	border-color: var(--davimo-green);
}

/* No background override here — was background:#fff, which is why the
   current-product card (Repair Serum on its own page) showed
   rgb(255,255,255) while the other 3 correctly show --davimo-offwhite.
   Border-color is enough to differentiate the current card; background
   should match the others. */
.davimo-pdp__lineup-item.is-current {
	border-color: var(--davimo-green);
}

.davimo-pdp__lineup-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: var(--davimo-green);
	color: var(--davimo-offwhite);
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	z-index: 1;
}


/* Top row: image, details, Add button — 48px gap throughout, the exact
   same value (not a new one) measured live on the cross-sell section's
   own .davimo-cart-drawer__crosssell-top. */
.davimo-pdp__lineup-top {
	display: flex;
	align-items: center;
	gap: 48px;
}

/* Wraps just the thumbnail for the 3 linked cards (the current-product
   card has no links at all — see render_full_lineup() — so its thumb
   sits directly in .davimo-pdp__lineup-top instead, no wrapper needed).
   flex:0 0 324px repeats .davimo-pdp__lineup-thumb's own sizing: once
   nested inside this link, the thumb itself is no longer the direct
   flex child of .lineup-top, so its own flex-basis alone can't reserve
   the row's 324px column — this wrapper needs to declare it too. */
.davimo-pdp__lineup-thumb-link {
	display: block;
	flex: 0 0 324px;
}

/* Wraps just the name+price block for the 3 linked cards (current-
   product card: plain, unwrapped spans in the same position — see
   render_full_lineup()). A tight internal gap (0.15rem) between name
   and price, matching .davimo-cart-drawer__crosssell-details in the
   reference exactly — distinct from the larger gap between this block
   and the Add button below it, which comes from the button's own
   existing margin-top (see .davimo-cart-drawer__crosssell-add), not a
   uniform gap here. */
.davimo-pdp__lineup-link {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-decoration: none;
	color: inherit;
}

/* Fixed 324x324 — a real, definite size (not flex:1/height:100%, which
   let the image grow to fill whatever the card's own height happened to
   be, measured at a much larger 461x485px and a real contributor to the
   whole section exceeding 100svh). 324px = the cross-sell section's own
   270x270px thumb (see .davimo-pdp .davimo-cart-drawer__crosssell-thumb
   img below) x1.2, per spec — a clean square proportional to that
   established reference size, not an arbitrary new number. Matches that
   reference's own sizing approach too: a fixed flex-basis, not a
   growing one. Unchanged in this pass — explicitly out of scope. */
.davimo-pdp__lineup-thumb {
	flex: 0 0 324px;
	width: 324px;
	height: 324px;
	overflow: hidden;
	border-radius: var(--davimo-radius-button);
}

.davimo-pdp__lineup-thumb img {
	width: 100%;
	height: 100%;
	/* contain, not cover: never crop product images either — same
	   letterboxing tradeoff as the model image above. */
	object-fit: contain;
	display: block;
}

/* flex:1 — this column claims the remaining top-row width after the
   image's fixed 324px, same role as .davimo-cart-drawer__crosssell-info
   in the reference (the PDP's own JS-created wrapper around cross-sell's
   details+button). Always contains exactly two children now: the
   name/price block (linked or plain — see render_full_lineup()) then
   the Add button as a real DOM sibling stacked right after it, matching
   the requested "name, price, then button" order literally. No gap
   here (was --davimo-space-xs, applied uniformly) — spacing between the
   two children now comes from each one's own existing rule instead
   (the name/price block's internal 0.15rem gap, the button's own
   margin-top), matching the reference's own asymmetric spacing rather
   than a single uniform value. */
.davimo-pdp__lineup-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* text-transform:uppercase — matches the cross-sell section's own
   .davimo-cart-drawer__crosssell-name (also uppercase), which these
   cards otherwise fully mirror; was left at the browser default
   (none) here, the one inconsistency between the two card styles. */
.davimo-pdp__lineup-name {
	font-weight: 600;
	color: var(--davimo-text-primary);
	font-size: 0.95rem;
	text-transform: uppercase;
}

.davimo-pdp__lineup-price {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-small-size);
	line-height: var(--davimo-text-small-line-height);
}

/* Real, measured overflow bug: the section (heading + this grid) came
   in at 971.375px against a 953px viewport (min-height:100svh on
   .davimo-pdp__lineup-section is a floor, not a ceiling — it doesn't
   shrink content that needs more room than one viewport). 18.375px too
   tall. margin-top: var(--davimo-space-xs) (8px, was the shared
   1.5rem/24px from the base .crosssell-reason rule) saves 16px per
   card; since both product-grid rows share this same reduction, the
   grid shrinks by 32px total — comfortably closes the 18.375px gap
   with a real margin, not a hairline fit. Scoped to lineup cards only
   (3 chained classes to reliably outrank the existing
   ".davimo-pdp .crosssell-reason" PDP override elsewhere in this file,
   which shares this rule's own 2-class specificity) — the cross-sell
   section's own reason spacing is untouched. */
.davimo-pdp .davimo-pdp__lineup-item .davimo-cart-drawer__crosssell-reason {
	margin-top: var(--davimo-space-xs);
}

/* Below 900px the 2-column (products 2x2 + model) editorial layout
   doesn't work on a narrow phone — falls back to a single-column stack:
   the 4 products first (also single-column within
   .davimo-pdp__lineup-products, not still 2x2), then the model image,
   in that DOM order, natural height throughout. Thumb goes back to a
   fixed aspect-ratio since flex:1 has nothing to fill against once the
   row/column height constraint is gone. */
@media (max-width: 900px) {
	.davimo-pdp__lineup-grid {
		grid-template-columns: 1fr;
	}

	.davimo-pdp__lineup-products {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.davimo-pdp__lineup-item {
		height: auto;
	}

	/* .davimo-pdp__lineup-top's row layout (image-left/details-right,
	   Add button alongside) is kept at this breakpoint too, matching
	   the cross-sell reference's own mobile behavior — its own
	   .crosssell-top has no mobile-specific override either, only the
	   surrounding grid's column count changes. The thumb stays its
	   fixed 324x324px at every width here too, again matching that
	   same reference: its own thumb (--davimo-crosssell-thumb-size,
	   270px) has no mobile-specific override either. */

	.davimo-pdp__lineup-model {
		aspect-ratio: 1 / 1;
	}
}

/* "Want a Personalized Routine?" banner */

/* background: transparent (was --davimo-offwhite) — confirmed live that
   every other below-fold section (Add This to Clear Your Skin, Customer
   Reviews) sits on the plain white page background with no seam; this
   was the one section with a solid fill, creating a harsh edge against
   its neighbors. border-radius/overflow:hidden stay — those clip the
   personalized-image's own corners, unrelated to the background fill. */
/* align-items: start (was center) — real, diagnosed root cause of a
   237px perceived gap above this section's heading: the image column
   (538px, deliberately set, unchanged here) is taller than the text
   content column (224px), and center-aligning the shorter content
   column within that taller row pushed the heading down into the
   middle of the section instead of the top, on top of the correct
   48px section-to-section gap. start pins the content column to the
   top of the row instead, right after that 48px gap, matching how
   every other below-fold section heading sits. */
.davimo-pdp__personalized {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 2rem;
	background: transparent;
	border-radius: var(--davimo-radius-button);
	overflow: hidden;
}

.davimo-pdp__personalized-image {
	/* 538px = 60% of the section's real measured rendered height (896px)
	   before this change, per explicit instruction to base the reduction
	   on a live measurement rather than a guessed value. Fixed px (not
	   100%/aspect-ratio) so the same class renders identically wherever
	   it's reused (PDP and shop page), regardless of how tall the
	   sibling content column happens to be. */
	display: block;
	width: 100%;
	height: 538px;
	object-fit: cover;
}

/* padding-top: 0 (was 2rem/32px) — the align-items:start fix (see
   .davimo-pdp__personalized above) put the content column at the top
   of its row, but this box's own 32px top padding still sat between
   that row-top and the heading, pushing the total previous-section-to-
   heading gap to 80px against the standard 48px used everywhere else
   on the page. Right/bottom padding (2rem each) are unrelated to this
   gap and stay as-is. The mobile breakpoint below already had 0 top
   padding here (padding: 0 1.5rem 1.5rem) — this brings desktop in
   line with what mobile already did, not a new value invented here. */
.davimo-pdp__personalized-content {
	padding: 0 2rem 2rem 0;
}

.davimo-pdp__personalized-content .davimo-pdp__section-title {
	margin: 0 0 0.5rem;
}

.davimo-pdp__personalized-content p {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
	margin: 0 0 1.25rem;
}

.davimo-pdp__personalized-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--davimo-green);
	color: var(--davimo-offwhite);
	text-decoration: none;
	padding: 0.75rem 1.75rem;
	border-radius: var(--davimo-radius-button);
	font-weight: 600;
}

.davimo-pdp__personalized-cta:hover {
	opacity: 0.9;
}

@media (max-width: 700px) {
	.davimo-pdp__personalized {
		grid-template-columns: 1fr;
	}

	.davimo-pdp__personalized-content {
		padding: 0 1.5rem 1.5rem;
	}
}

/* "From the Blog" teaser */

.davimo-pdp__blog-teaser-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.davimo-pdp__blog-teaser-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.davimo-pdp__blog-teaser-thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--davimo-radius-button);
	background: var(--davimo-offwhite);
}

.davimo-pdp__blog-teaser-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.davimo-pdp__blog-teaser-title {
	font-weight: 600;
	color: var(--davimo-text-primary);
}

.davimo-pdp__blog-teaser-item:hover .davimo-pdp__blog-teaser-title {
	color: var(--davimo-green);
	text-decoration: underline;
}

.davimo-pdp__blog-teaser-excerpt {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-small-size);
	line-height: var(--davimo-text-small-line-height);
}

.davimo-pdp__blog-teaser-empty {
	color: var(--davimo-text-secondary);
}

@media (max-width: 900px) {
	.davimo-pdp__blog-teaser-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.davimo-pdp__blog-teaser-grid {
		grid-template-columns: 1fr;
	}
}

/* FAQ accordion */

.davimo-pdp__faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.davimo-pdp__faq-item {
	border-bottom: 1px solid rgba(27, 38, 36, 0.1);
}

.davimo-pdp__faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 0.85rem 0;
	background: none;
	border: none;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: var(--davimo-text-primary);
	cursor: pointer;
}

.davimo-pdp__faq-icon {
	font-size: 1.2rem;
	color: var(--davimo-text-secondary);
	flex-shrink: 0;
	margin-left: 1rem;
}

.davimo-pdp__faq-question[aria-expanded="true"] .davimo-pdp__faq-icon {
	transform: rotate(45deg);
}

.davimo-pdp__faq-answer {
	padding: 0 0 1rem;
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	line-height: var(--davimo-text-body-line-height);
}

.davimo-pdp__faq-answer p {
	margin: 0;
}

/* Difference blurb — brief paragraph, not a dedicated visual block. */

.davimo-pdp__difference p {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--davimo-text-secondary);
	font-style: italic;
}

/* Cross-sell section reused from the cart drawer sits full-width between
   the buy box and the below-fold content; its own classes/styles come
   from cart-drawer.css (davimo-cart-drawer__crosssell*). This resets the
   layout context since it's not inside the fixed drawer panel here, and
   breaks out to full viewport width matching the buy box above it. */
.davimo-pdp .davimo-cart-drawer__crosssell {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* --davimo-space-xl (48px), was a literal 2.5rem (40px) — see the
	   matching note on .davimo-pdp__buybox above. */
	margin-bottom: var(--davimo-space-xl);
	padding-top: 1.5rem;
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
	border-top: 1px solid rgba(27, 38, 36, 0.1);
}

/* text-transform:none overrides cart-drawer.css's base uppercase
   styling for this heading (a compact, appropriate treatment for the
   narrow drawer panel, left as-is there) — on the PDP this heading reads
   as a real section headline next to Benefits/How to Use/etc., which are
   all title case; all-caps here was the one genuinely inconsistent
   section headline found on the PDP, confirmed via computed style
   (text-transform:uppercase) even though the underlying text was
   already correctly typed in title case. */
/* font-size was also a literal 1.4rem (22.4px), same as
   .davimo-pdp__section-title--reviews above — both predate the type-
   scale token work and were never updated when it changed, which is
   exactly why they rendered at the identical, oddly-specific 22.4px
   value found by the heading audit. Now governed by the same h2 token
   as every other section heading on the page. */
.davimo-pdp .davimo-cart-drawer__crosssell-heading {
	font-size: var(--davimo-text-h2-size);
	line-height: var(--davimo-text-h2-line-height);
	text-transform: none;
}

/* 3-column card row — same shared markup/logic as the drawer's narrow
   list (exclusion, reasons, Add button all untouched — this file only
   restyles it). One shared bordered box with a full-height 1px divider
   BETWEEN cards (border-left on all but the first) rather than each card
   individually boxed. Divider color is token-derived (color-mix off
   --davimo-text-primary), not a literal gray. */
.davimo-pdp .davimo-cart-drawer__crosssell-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid color-mix(in srgb, var(--davimo-text-primary) 12%, transparent);
	border-radius: var(--davimo-radius-button);
	overflow: hidden;
}

.davimo-pdp .davimo-cart-drawer__crosssell-item {
	/* 3x the original 90px — padding stays 32px 40px unchanged; the card
	   simply grows to fit the larger image within that same padding. */
	--davimo-crosssell-thumb-size: 270px;
	padding: 32px 40px;
}

.davimo-pdp .davimo-cart-drawer__crosssell-item:not(:first-child) {
	border-left: 1px solid color-mix(in srgb, var(--davimo-text-primary) 12%, transparent);
}

/* Top section: image (fixed-size column) + info block (title, price, Add
   button) side by side, plain flexbox — no CSS Grid row-spanning. An
   earlier Grid version placed .crosssell-details and .crosssell-add
   (DOM siblings in the shared render_crosssell() markup, not nested —
   see cart-drawer.css) into two separate rows spanned by the thumb
   image; Grid's intrinsic-track-sizing algorithm inflates EVERY
   spanned row enough to jointly fit the spanning item regardless of
   whether that row is "auto", "min-content", or "max-content" (all three
   were tried — none exempted the rows from inflation, only a definite/
   fixed row size would), so .details and .add each centered within
   their own ~130px bloated row independently, leaving a ~105px gap
   between price and the Add button even though their combined bounding
   box happened to still center against the image.
   product-page.js's initCrosssellLayout() wraps .details + .add in a
   real shared parent (.davimo-pdp__crosssell-info, PDP-only, added via
   JS so the shared PHP markup/AJAX stays untouched for the drawer's own
   use of this component) — with an actual DOM parent, plain flexbox
   align-items:center on this 2-item row (image, info-wrapper) centers
   the WHOLE wrapper as one unit, no spanning-row math involved at all. */
.davimo-pdp .davimo-cart-drawer__crosssell-top {
	display: flex;
	gap: 48px;
	align-items: center;
}

.davimo-pdp .davimo-cart-drawer__crosssell-thumb {
	flex: 0 0 var(--davimo-crosssell-thumb-size);
}

.davimo-pdp .davimo-cart-drawer__crosssell-thumb img {
	object-fit: contain;
	filter: drop-shadow(0 4px 8px rgba(27, 38, 36, 0.15));
}

/* The new wrapper: a tight vertical stack of details (name+price) then
   the Add button, in that order — matches the shared markup's own DOM
   order, just given a real shared parent for layout purposes. */
.davimo-pdp .davimo-cart-drawer__crosssell-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.davimo-pdp .davimo-cart-drawer__crosssell-name {
	font-size: 0.95rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.davimo-pdp .davimo-cart-drawer__crosssell-price {
	font-size: 0.85rem;
}

/* Filled rose background + green text — the exact same token pair the
   base (unscoped, cart-drawer) version of this button already uses
   (cart-drawer.css: background:var(--davimo-rose); color:var(--davimo-green)).
   A previous pass here made it transparent with a rose border instead
   (bordered/not-filled), which is a different, off-token look — this
   restores the established fill. border-radius: --davimo-radius-card
   (14px), matching the lineup cards' card-radius decision — was a
   999px pill before this fix. */
.davimo-pdp .davimo-cart-drawer__crosssell-add {
	align-self: flex-start;
	margin-top: 0.75rem;
	background: var(--davimo-rose);
	color: var(--davimo-green);
	border: none;
	border-radius: var(--davimo-radius-card);
}

.davimo-pdp .davimo-cart-drawer__crosssell-add:hover {
	opacity: 0.85;
}

/* Specs-style row below a divider — single row only (no "Made For"/"Hair
   Goals" pair), label injected via ::before rather than a PHP markup
   change since this section is intentionally PDP-only: the shared
   render_crosssell() markup/reason text stay exactly as they are for the
   cart drawer's own (differently-styled) use of the same component. */
.davimo-pdp .davimo-cart-drawer__crosssell-reason {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--davimo-text-primary) 10%, transparent);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--davimo-text-primary);
}

.davimo-pdp .davimo-cart-drawer__crosssell-reason::before {
	content: "Why It Helps";
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--davimo-text-secondary);
}

@media (max-width: 900px) {
	.davimo-pdp .davimo-cart-drawer__crosssell-items {
		grid-template-columns: repeat(2, 1fr);
	}

	/* With exactly 3 items in a 2-column grid: item 1 (row1/col1) and
	   item 3 (row2/col1) are both "odd" and need no left divider; item 3
	   instead needs a top divider since it's now below row 1. */
	.davimo-pdp .davimo-cart-drawer__crosssell-item:nth-child(2n+1) {
		border-left: none;
	}

	.davimo-pdp .davimo-cart-drawer__crosssell-item:nth-child(n+3) {
		border-top: 1px solid color-mix(in srgb, var(--davimo-text-primary) 12%, transparent);
	}
}

@media (max-width: 600px) {
	.davimo-pdp .davimo-cart-drawer__crosssell-items {
		grid-template-columns: 1fr;
	}

	.davimo-pdp .davimo-cart-drawer__crosssell-item {
		border-left: none !important;
		border-top: 1px solid color-mix(in srgb, var(--davimo-text-primary) 12%, transparent);
	}

	.davimo-pdp .davimo-cart-drawer__crosssell-item:first-child {
		border-top: none;
	}
}