.bdp-wrapper {
	max-width: 640px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bdp-form {
	background: #faf8f5;
	border: 1px solid #e6ddd0;
	border-radius: 10px;
	padding: 24px;
}

.bdp-field {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
}

.bdp-field label {
	font-weight: 600;
	margin-bottom: 6px;
	color: #3a332b;
}

.bdp-field input {
	padding: 10px 12px;
	border: 1px solid #cfc4b3;
	border-radius: 6px;
	font-size: 15px;
}

.bdp-submit-row {
	margin-bottom: 0;
}

/* Background picker */
.bdp-bg-field label {
	margin-bottom: 10px;
}

.bdp-bg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.bdp-bg-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	padding: 8px;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bdp-bg-option:hover {
	background: #f2ece2;
}

.bdp-bg-option.is-selected {
	border-color: #8a6b4a;
	background: #f2ece2;
}

.bdp-bg-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.bdp-bg-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1240 / 1754;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	border: 1px solid #cfc4b3;
	margin-bottom: 6px;
}

.bdp-bg-name {
	font-size: 12px;
	color: #3a332b;
	text-align: center;
}

@media (max-width: 480px) {
	.bdp-bg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Paper size toggle */
.bdp-size-field > label {
	display: block;
	margin-bottom: 10px;
}

.bdp-size-toggle {
	display: flex;
	gap: 10px;
}

.bdp-size-option {
	flex: 1;
	text-align: center;
	padding: 10px 16px;
	border: 2px solid #cfc4b3;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	color: #3a332b;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bdp-size-option:hover {
	background: #f2ece2;
}

.bdp-size-option.is-selected {
	border-color: #8a6b4a;
	background: #f2ece2;
}

.bdp-size-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.bdp-submit-btn,
.bdp-print-btn,
.bdp-restart-btn {
	background: #8a6b4a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bdp-submit-btn:hover,
.bdp-print-btn:hover,
.bdp-restart-btn:hover {
	background: #6f5638;
}

.bdp-restart-btn {
	background: transparent;
	color: #8a6b4a;
	border: 1px solid #8a6b4a;
}

.bdp-restart-btn:hover {
	background: #f2ece2;
	color: #6f5638;
}

.bdp-hires-btn {
	background: #2f4f3a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bdp-hires-btn:hover {
	background: #223a2a;
}

.bdp-hires-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.bdp-error {
	color: #a3312a;
	font-weight: 600;
	margin: 8px 0 0;
}

.bdp-cart-warning {
	color: #a3312a;
	font-weight: 600;
	margin: 10px 0 0;
}

.bdp-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

/*
 * Hidden by default — the certificate template has no way of knowing by
 * itself whether it's embedded on a WooCommerce product page, so this
 * only becomes visible once wc-sync.js confirms both forms are present
 * and adds .bdp-in-woocommerce-context to the wrapper. Solves the "have
 * to scroll back up to the Add to Cart button" friction by offering a
 * one-click jump there instead, without moving WooCommerce's own
 * controls (which would risk interfering with how your theme handles
 * them).
 */
.bdp-continue-to-cart-btn {
	display: none;
	background: #8a6b4a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bdp-continue-to-cart-btn:hover {
	background: #6f5638;
}

.bdp-in-woocommerce-context .bdp-continue-to-cart-btn {
	display: inline-block;
}

/* ============================================================
   Certificate — golden ratio layout (φ ≈ 1.618)
   Fonts (Playfair Display, Cormorant Garamond) are enqueued in
   includes/class-birth-details.php
   ============================================================ */

/*
 * The frame's height is derived ONLY from its width (via the classic
 * "padding-top percentage" technique: 1754/1240 * 100 ≈ 141.45%). This
 * is deliberately used INSTEAD OF the CSS aspect-ratio property — that
 * property is only a preference, and most browsers still let the box
 * grow taller than the ratio if its content (the name, meanings, etc.)
 * needs more room. That was the actual cause of the background looking
 * "zoomed"/cropped: the box was quietly growing past A4 shape to fit
 * text, so a perfectly correct A4 image no longer matched the box it
 * was filling. The padding-top technique can't be influenced by content
 * at all, so the shape is locked no matter how long the text is.
 */
.bdp-cert-frame {
	position: relative;
	width: 100%;
	padding-top: 141.45%;
	overflow: visible;
}

.bdp-certificate {
	/* Filling the frame exactly via inset, rather than sizing itself
	   from its own content — this is what keeps the background locked
	   to true A4 shape regardless of how tall the text block becomes. */
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	background-color: #fffdf9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 12px;
	/* Matches the inset used in print (30mm top/bottom, 20mm sides):
	   30/297 ≈ 10.1%, 20/210 ≈ 9.5% — so the on-screen preview lines
	   up with the printed result */
	padding: 10.1% 9.5%;
	text-align: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* If the text content is ever taller than the frame, let it spill
	   past the bottom edge (visible, easy to notice and fix) instead of
	   secretly inflating the box and warping the background image. */
	overflow: visible;
}

.bdp-cert-content {
	/* A fixed "design" width, rather than a responsive clamp() — the
	   fonts, images, and spacing inside are all fixed px sizes, so they
	   can't shrink on their own to fit a narrower certificate. Instead,
	   script.js measures this element's natural size at this fixed
	   width, compares it to however much room the certificate actually
	   has at its real rendered size, and scales the whole block down to
	   fit — the same way a photo scales to fit a frame, rather than
	   expecting the frame to always be exactly the right size.
	   flex-shrink: 0 stops the flex container from squeezing it
	   narrower before that measurement happens. */
	position: relative;
	z-index: 1;
	width: 400px;
	flex-shrink: 0;
}

.bdp-cert-month {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 19px;
	color: #2f2a22;
	margin: 0 0 10px;
}

.bdp-cert-flower-name {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 29px;
	line-height: 1.15;
	margin: 0 0 8px;
	color: #2f2a22;
}

.bdp-cert-meaning {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 13px;
	line-height: 1.4;
	color: #5c4f3c;
	max-width: 280px;
	margin: 0 auto;
}

.bdp-cert-flower-meaning {
	margin-bottom: 22px;
}

.bdp-cert-flower-image {
	width: clamp(140px, 24%, 190px);
	margin: 0 auto 22px;
}

.bdp-cert-flower-image img,
.bdp-cert-flower-image svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.bdp-cert-section-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: #2f2a22;
	margin: 0 0 13px;
}

.bdp-cert-stone-image {
	/* Golden-ratio smaller than the flower image (190 / 1.618 ≈ 117) */
	width: clamp(85px, 15%, 117px);
	margin: 0 auto 9px;
}

.bdp-cert-stone-image img,
.bdp-cert-stone-image svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

.bdp-cert-stone-name {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 17px;
	margin: 0 0 8px;
	color: #2f2a22;
}

.bdp-cert-stone-meaning {
	margin-bottom: 28px;
}

/* Ornamental divider: thin gold rule with a small rotated diamond */
.bdp-cert-divider {
	width: 61.8%;
	max-width: 180px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bdp-cert-divider::before,
.bdp-cert-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #c9a24b;
	opacity: 0.7;
}

.bdp-cert-divider span {
	width: 6px;
	height: 6px;
	background: #c9a24b;
	transform: rotate(45deg);
	flex-shrink: 0;
	opacity: 0.9;
}

.bdp-cert-person-name {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 21px;
	margin: 0 0 4px;
	color: #2f2a22;
}

.bdp-cert-person-dob {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 13px;
	color: #6b5f4f;
	margin: 0;
}

/* Print styles: hide everything except the certificate when printing */
@media print {
	body * {
		visibility: hidden;
	}

	.bdp-certificate,
	.bdp-certificate * {
		visibility: visible;
	}

	/*
	 * The background image is a full-bleed A4 page (210 x 297mm) with its
	 * own graphical border already drawn into the artwork. So the
	 * certificate box prints at exact, uncropped A4 size — no @page
	 * margin — and only the CONTENT is inset from the edges (30mm top/
	 * bottom, 20mm left/right), giving a safe content area of
	 * 170 x 237mm, with a bit of extra breathing room top and bottom.
	 *
	 * box-sizing: border-box is essential here — without it, the
	 * padding is added ON TOP OF the 210mm x 297mm you set, making the
	 * actual box 250mm x 357mm: bigger than the physical page. That
	 * oversized box is what caused the "zoomed in" look, the spill onto
	 * a second page, and the rightward skew (it was hanging off the
	 * right edge of the page). border-box makes the padding sit INSIDE
	 * the 210 x 297mm box instead, so the total size is always exactly
	 * A4, no matter what the padding is.
	 *
	 * position: absolute + top/left: 0 pins this to the top-left of the
	 * page rather than wherever it falls in the (invisible but still
	 * space-occupying) document flow. Note: this must be position:
	 * absolute, NOT fixed — fixed-position elements repeat on every
	 * printed page, which duplicates the certificate if the hidden
	 * content above/around it causes more than one page to be generated.
	 */
	.bdp-certificate {
		position: absolute;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		box-sizing: border-box;
		width: 210mm;
		height: 297mm;
		margin: 0;
		padding: 30mm 20mm;
		box-shadow: none;
		border-radius: 0;
		align-items: flex-start;
		overflow: visible;
		/* Ask the browser to print backgrounds/colours as-is. Most
		   browsers still require "Background graphics" to be manually
		   ticked in the print dialog for this to take effect at all. */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.bdp-actions,
	.bdp-form {
		display: none !important;
	}

	@page {
		size: A4 portrait;
		margin: 0;
	}
}

/* ============================================================
   Message field visibility (Greeting Card mode only)
   ============================================================ */

/*
 * Both hidden by default — the Paper Size toggle's "Card (A5)" option
 * is never meant to be a customer-visible choice (a card is always A5,
 * there's nothing to pick), and the message field only makes sense once
 * card mode is active. wc-sync.js reveals both together when the
 * WooCommerce Fulfilment dropdown is set to "Greetings Card".
 */
.bdp-in-card-mode .bdp-size-option-card {
	display: inline-block !important;
}

.bdp-in-card-mode .bdp-message-field {
	display: flex !important;
}

.bdp-message-field textarea {
	padding: 10px 12px;
	border: 1px solid #cfc4b3;
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
	resize: vertical;
}

/* ============================================================
   Greeting card panels (A5, Prodigi Classic Greetings Card)

   Each sheet is a flat rectangle (exact dimensions depend on which of the
   three supported card sizes is active — see includes/card-sizes.php) —
   the card folds in half down the centre, giving two equal panels per
   sheet. Two sheets are needed in total (outer + inner), matching
   Prodigi's own template structure exactly for all three sizes (see the
   reference images this was built from).
   ============================================================ */

.bdp-card-sheet-frame {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto 24px;
	/* padding-top (the height:width ratio, locking the sheet's shape
	   from its width alone) is set via inline style per instance — see
	   templates/card-result-template.php — since the ratio differs
	   slightly between the three supported card sizes. */
}

.bdp-card-sheet {
	position: absolute;
	inset: 0;
	display: flex;
	box-sizing: border-box;
	background: #fffdf9;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.bdp-card-panel {
	width: 50%;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8% 10%;
	overflow: visible;
}

.bdp-card-panel-front {
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * Overrides .bdp-cert-content's own position:relative — script.js's
 * bdpFitCardFrontScale() positions this absolutely (top:50%; left:50%;
 * then translate(-50%,-50%) in the same transform as the scale) rather
 * than relying on this panel's flexbox centering, which depends on the
 * parent's height resolving correctly — something that behaved
 * unpredictably for the admin export's detached, off-screen clone.
 * Absolute positioning only depends on simple, reliable measurements,
 * regardless of that context.
 */
.bdp-card-panel-front .bdp-cert-content {
	position: absolute;
	top: 50%;
	left: 50%;
}

.bdp-card-panel-rear {
	align-items: center;
	border-right: 1px dashed #d8c8a8;
}

.bdp-card-logo-img {
	width: 60%;
	max-width: 260px;
	height: auto;
}

.bdp-card-panel-inside-front {
	border-right: 1px dashed #d8c8a8;
}

.bdp-card-panel-inside-back {
	align-items: center;
}

.bdp-card-message {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.6;
	color: #3a332b;
	text-align: center;
	white-space: pre-wrap;
	margin: 0;
}

.bdp-card-sheet-label {
	text-align: center;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	color: #6b5f4f;
	margin: 0 0 8px;
}

/* ============================================================
   Photo-upload product (single/two/three photo layouts)
   ============================================================ */

.bdp-layout-toggle,
.bdp-message-mode-toggle {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.bdp-layout-option,
.bdp-message-mode-option {
	flex: 1;
	text-align: center;
	padding: 10px 12px;
	border: 2px solid #cfc4b3;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: #3a332b;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bdp-layout-option:hover,
.bdp-message-mode-option:hover {
	background: #f2ece2;
}

.bdp-layout-option.is-selected,
.bdp-message-mode-option.is-selected {
	border-color: #8a6b4a;
	background: #f2ece2;
}

.bdp-layout-option input[type="radio"],
.bdp-message-mode-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.bdp-photo-upload-row {
	margin-bottom: 12px;
}

.bdp-photo-upload-row label {
	display: block;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6b5f4f;
	margin-bottom: 4px;
}

/*
 * .bdp-photo-content also carries .bdp-cert-content (see
 * templates/parts/photo-content.php) — that shared class is what makes
 * the existing scale-to-fit JS (bdpFitContentScale, bdpFitCardFrontScale)
 * pick this up automatically, the same way it already handles the
 * birth-flower certificate content, with no JS changes needed. This
 * block only adds the photo-specific layout on top of that shared base.
 */
.bdp-photo-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * Scattered polaroid style: each photo gets a classic white polaroid
 * frame (padding + extra bottom margin + shadow) and sits absolutely
 * positioned at a specific rotation, overlapping the others slightly —
 * the positions below are hand-placed per layout (single/two/three),
 * not computed, since the goal is a specific curated arrangement rather
 * than an even grid. All three keep the same 400px design-width system
 * as everything else, so the existing scale-to-fit JS handles them the
 * same way it already handles the certificate content.
 */
.bdp-photo-grid {
	position: relative;
	width: 100%;
	height: 600px;
}

/*
 * Compensates for the corkboard shift's padding-top: 57px (see
 * .bdp-photo-content-corkboard) by shrinking the grid by that same
 * amount, so the TOTAL height stays at the original ~600px budget that
 * was already fitting correctly, rather than growing to 657px and
 * pushing the required scale below the 0.55 floor the fit-to-frame
 * logic won't go under. The shift happens within the existing space,
 * not on top of it.
 */
.bdp-photo-content-corkboard .bdp-photo-grid {
	height: 543px;
}

.bdp-photo-slot {
	position: absolute;
	box-sizing: border-box;
	background: #fff;
	padding: 8px 8px 26px;
	border-radius: 2px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.bdp-photo-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdp-photo-layout-single .bdp-photo-slot:nth-of-type(1) {
	width: 84%;
	height: 92%;
	top: 2%;
	left: 8%;
	transform: rotate(-3deg);
}

.bdp-photo-layout-two .bdp-photo-slot:nth-of-type(1) {
	width: 66%;
	height: 64%;
	top: 2%;
	left: 2%;
	transform: rotate(-7deg);
	z-index: 1;
}

.bdp-photo-layout-two .bdp-photo-slot:nth-of-type(2) {
	width: 66%;
	height: 64%;
	top: 32%;
	left: 34%;
	transform: rotate(6deg);
	z-index: 2;
}

.bdp-photo-layout-three .bdp-photo-slot:nth-of-type(1) {
	width: 60%;
	height: 56%;
	top: 0%;
	left: 6%;
	transform: rotate(-6deg);
	z-index: 1;
}

.bdp-photo-layout-three .bdp-photo-slot:nth-of-type(2) {
	width: 58%;
	height: 54%;
	top: 20%;
	left: 38%;
	transform: rotate(6deg);
	z-index: 2;
}

.bdp-photo-layout-three .bdp-photo-slot:nth-of-type(3) {
	width: 56%;
	height: 53%;
	top: 44%;
	left: 4.5%;
	transform: rotate(-3deg);
	z-index: 3;
}

.bdp-photo-caption {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 20px;
	color: #3a332b;
	text-align: center;
	margin: 16px 0 0;
}

/* The handwritten note image, shown on the card's Inside back panel in
   place of typed text — sized to sit comfortably within the panel
   without needing to fill it edge-to-edge like a photo would. */
.bdp-card-handwritten-note {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

/* The optional photo on the card's Inside front panel (photo-upload
   product only) — fills the panel like the outer front's photos do,
   rather than sitting inset like the handwritten note. */
.bdp-card-inside-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The greeting styled as a note pinned to the corkboard — only applied
 * when the "Pinned Memories" corkboard background is selected (see the
 * conditional class in templates/parts/photo-content.php), since a
 * floating sticky note wouldn't make sense against, say, a gold or
 * floral background. Declared after .bdp-photo-caption so its
 * font-style/text-align overrides apply correctly (both are single-class
 * selectors of equal specificity — source order decides the winner).
 */
.bdp-caption-sticky-note {
	background: #f5e27a;
	color: #3a332b;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	text-align: center;
	padding: 14px 24px;
	margin: -18px 0 0;
	max-width: 75%;
	transform: rotate(-3deg);
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
}

/*
 * Shifts the whole photo arrangement down by ~3cm on A4 (57px in this
 * 400px-design-width system, where 1mm ≈ 1.905px), keeping it clear of
 * the corkboard background's own ornate frame graphic at the top of the
 * panel. Only applied for that specific background — see the
 * conditional class in templates/parts/photo-content.php.
 *
 * Uses padding-top rather than margin-top deliberately: the scale-to-fit
 * JS measures this element's own size via getBoundingClientRect(), which
 * includes padding but NOT margin — a margin-based shift would silently
 * add height the fit calculation never knew about, causing content to
 * spill past the frame despite scaling "correctly" for its own
 * (incomplete) measurement. Padding keeps the shift inside what's
 * actually measured.
 */
.bdp-photo-content-corkboard {
	padding-top: 57px;
}

/* ============================================================
   Full-bleed single photo layout
   ============================================================ */

/*
 * Removes the card front panel's usual 8%/10% inset (see
 * .bdp-card-panel) so the photo can reach the true panel edge — the
 * same edge that lines up with the print trim, not just visually "big".
 * Scoped to its own modifier class rather than changing .bdp-card-panel
 * itself, since the rear/inside panels still need their normal inset.
 */
.bdp-card-panel-front-fullbleed {
	padding: 0;
	overflow: hidden;
}

/*
 * Same idea for the standalone A4/A3 poster's .bdp-certificate — fills
 * the certificate's inner area right up to the decorative frame
 * graphic's own border. That border is baked into the background image
 * itself, so this can't bleed past it the way the card panel can bleed
 * to the true trim edge — a real, acknowledged difference between the
 * two contexts, not a bug.
 */
.bdp-certificate-fullbleed {
	padding: 0;
	overflow: hidden;
}

/*
 * Deliberately NOT .bdp-cert-content — see the comment in
 * photo-content.php. Plain inset:0 percentages instead of the
 * fixed-400px-design-width + JS-transform-scale system everything else
 * here uses, so it already fills whatever size the real panel or
 * certificate frame renders at, on screen and in the html2canvas export
 * clone alike, with no extra JS required.
 */
.bdp-photo-content-fullbleed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bdp-photo-fullbleed-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * "cover" (above) crops whatever doesn't fit the panel's proportions —
 * fine on the portrait card, where most uploaded photos are closer to
 * its own proportions already, but a much wider/shorter landscape
 * panel makes an ill-fitting crop far more likely (cropping off heads,
 * etc.) with a wider range of random customer photo shapes. "fill"
 * stretches the whole photo to fit instead, with no cropping — some
 * photos will look slightly squashed or stretched, but the whole photo
 * is always visible, which matters more here.
 */
.bdp-photo-fullbleed-img-landscape {
	object-fit: fill;
}

/*
 * No background box — bold white text sits directly on the photo. A
 * soft dark text-shadow (rather than the removed white panel) is what
 * keeps this legible across whatever photo a customer actually
 * uploads, since not every photo will be as dark/high-contrast in that
 * spot as the placeholder used to sample this look.
 */
.bdp-photo-caption-overlay {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 9%;
	text-align: center;
}

/*
 * bottom:9% of a tall portrait panel reads as "sitting in the lower
 * third"; the same 9% of a much shorter landscape panel is a small
 * enough absolute distance that the text ends up reading as centred
 * instead. Pulled right down near the true bottom edge — 2% is enough
 * of a margin to keep the text off the trim line without reading as
 * anything other than "as low as it can go" — and sized down a touch,
 * to keep it feeling like a caption rather than a centrepiece.
 */
.bdp-photo-caption-overlay-landscape {
	bottom: 2%;
}

.bdp-photo-caption-overlay-landscape .bdp-photo-caption-overlay-text {
	font-size: 24px;
}

.bdp-photo-caption-overlay-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

/*
 * Two short segments with a gap either side of the heart, rather than
 * one continuous line with the heart sitting on top of it — the ask was
 * specifically for the heart to have its own breathing space. Portrait
 * card only — see the $is_landscape_card check in photo-content.php,
 * which skips rendering this entirely on the landscape card, where it
 * read as clutter rather than a flourish.
 */
.bdp-photo-caption-overlay-rule-segment {
	width: 22px;
	height: 2px;
	background: #c9a45c;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/*
 * A styled text glyph (♥) rather than an SVG path or a CSS clip-path
 * heart — html2canvas (the admin export) renders text reliably, but has
 * a history of being inconsistent with both of those, so this is the
 * option least likely to look different in the exported print file
 * than it does in the live preview.
 */
.bdp-photo-caption-overlay-heart {
	font-size: 13px;
	line-height: 1;
	color: #c9a45c;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.bdp-photo-caption-overlay-text {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
	margin: 0;
}

/* ============================================================
   Sectioned layout — dedicated card products only (see the
   `layout` shortcode attribute / render_locked_card_fields()).
   Three clearly separated groups with a coloured divider between
   them, so the front/inside/inside-front distinction is obvious
   at a glance rather than reading as one long continuous form.
   ============================================================ */

.bdp-form-section-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a6b4a;
	margin: 0 0 16px;
}

.bdp-section-divider {
	height: 4px;
	background: #8a6b4a;
	border-radius: 2px;
	margin: 28px 0 24px;
}

.bdp-field-instruction {
	font-size: 14px;
	font-style: italic;
	color: #5c4f3c;
	margin: 0 0 12px;
}