/* danXLstudio Woo Personalized Products - storefront presentation */

.dxpp-personalized-products > .dxpp-title-wrapper {
	--wd-title-color: #8B3F52;
	margin-bottom: 30px !important;
}

.dxpp-personalized-products .dxpp-section-title {
	color: #8B3F52 !important;
	-webkit-text-fill-color: #8B3F52 !important;
}

/* Woodmart/Elementor keeps a visibly larger title-to-grid separation on
 * tablet/mobile. The shortcode contains both pieces inside one widget, so
 * reproduce that spacing here instead of relying on the parent Elementor gap. */
@media (max-width: 1024px) {
	.dxpp-personalized-products > .dxpp-title-wrapper {
		margin-bottom: 40px !important;
	}
}

/* On Home the shortcode can sit inside an Elementor widget whose mobile width
 * is narrower than the native Woodmart product sections. Break only the DXPP
 * shell out of that parent width and match the real native Woodmart grid.
 *
 * 0.1.28: real iPhone Safari is aligned in the SAME layout coordinate system
 * as Woodmart itself. public.js measures the nearest native `.products.wd-products`
 * grid outside DXPP (normally the "Noutăți" block immediately below) and feeds
 * its exact left edge and width here. Positioning uses a real layout margin,
 * not transform/VisualViewport. The 15px fallback is used only if no native
 * reference grid can be measured. */
@media (max-width: 767px) {
	.dxpp-personalized-products {
		position: relative;
		left: auto !important;
		width: var(--dxpp-mobile-reference-width, calc(100% + 30px)) !important;
		max-width: var(--dxpp-mobile-reference-width, none) !important;
		margin-left: var(--dxpp-mobile-reference-margin-left, -15px) !important;
		margin-right: 0 !important;
		transform: none !important;
		box-sizing: border-box;
	}

	.dxpp-personalized-products > .wd-products-element,
	.dxpp-personalized-products [data-dxpp-products-grid="1"] {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}
}