/**
 * Sweet Prints Variations — Custom Design styles
 * Mobile-first. Extends spv-product.css base variables and component patterns.
 */

/* ── Base container ──────────────────────────────────────────────────────── */

.spv-custom-design-options {
	margin-top: 1.25rem;
}

/* ── Upload zone ─────────────────────────────────────────────────────────── */

.spv-upload-zone {
	position: relative;
	border: 2px dashed #A8DADC;
	border-radius: 8px;
	padding: 1.25rem;
	background: #EAF6FF;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
	cursor: pointer;
}

.spv-upload-zone:hover,
.spv-upload-zone:focus-within {
	border-color: #7BBFC2;
	background: #EAF6FF;
}

/* Hide the native file input — we style the label instead */
.spv-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.spv-upload-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}

.spv-upload-icon {
	font-size: 2rem;
	line-height: 1;
}

.spv-upload-text {
	font-size: 0.9rem;
	color: #4A4A4A;
	font-weight: 600;
}

/* ── Upload status ───────────────────────────────────────────────────────── */

.spv-upload-status {
	margin-top: 0.4rem;
	font-size: 0.85rem;
}

.spv-status--ok {
	color: #196f3d;
}

.spv-status--error {
	color: #c0392b;
}

/* ── Upload preview ──────────────────────────────────────────────────────── */

.spv-upload-preview {
	margin-top: 0.75rem;
}

.spv-img-preview {
	max-width: 120px;
	max-height: 120px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ddd;
	display: block;
	margin: 0 auto;
}

.spv-pdf-preview {
	font-size: 0.9rem;
	color: #444;
	word-break: break-all;
}

/* PDF variant */
.spv-upload-zone--pdf .spv-upload-icon {
	color: #c0392b;
}

/* ── Multi-image slots ───────────────────────────────────────────────────── */

.spv-image-slots {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0.75rem 0;
}

.spv-image-slot {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 0.75rem;
	background: #fff;
}

.spv-slot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.spv-slot-num {
	font-weight: 700;
	font-size: 0.9rem;
	color: #555;
}

.spv-slot-remove {
	background: none;
	border: none;
	color: #c0392b;
	cursor: pointer;
	font-size: 0.9rem;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	transition: background 0.12s;
	line-height: 1;
}

.spv-slot-remove:hover {
	background: #fde8e6;
}

.spv-slot-qty-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.spv-slot-qty-row .spv-label {
	font-size: 0.85rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.spv-input--number {
	width: 80px;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

.spv-slots-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.3rem;
}

.spv-slots-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: #555;
}

.spv-progress-bar {
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0.4rem;
}

.spv-progress-bar__fill {
	height: 100%;
	background: #FF9AA2;
	border-radius: 4px;
	transition: width 0.25s ease;
}

.spv-hint--error {
	color: #c0392b !important;
}

/* ── Add-slot button ─────────────────────────────────────────────────────── */

.spv-btn--secondary {
	background: none;
	border: 2px solid #A8DADC;
	color: #7BBFC2;
	padding: 0.45rem 1rem;
	border-radius: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	display: inline-flex;
	align-items: center;
}

.spv-btn--secondary:hover {
	background: #FF9AA2;
	color: #fff;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */

.spv-notice {
	padding: 0.7rem 1rem;
	border-radius: 6px;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}

.spv-notice--info {
	background: #e8f4fd;
	border: 1px solid #aed6f1;
	color: #154360;
}

/* HF4.1.10 — softened from yellow/amber to soft mint so the banner doesn't
   read as a warning during the purchase flow. Kept border-left for emphasis. */
.spv-notice--warning {
	background: rgba( 168, 218, 220, 0.18 );
	border: 1px solid rgba( 168, 218, 220, 0.55 );
	border-left: 4px solid #7BBFC2;
	color: #4A4A4A;
}

.spv-notice--contact {
	background: #fff3e6;
	border: 1px solid #f0a500;
	color: #7d4e00;
}

.spv-print-disclaimer {
	margin-bottom: 1.25rem;
}

.spv-print-disclaimer p {
	margin: 0.4rem 0 0;
}

/* ── Contact links ───────────────────────────────────────────────────────── */

.spv-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.spv-contact-link {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: 5px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s;
}

.spv-contact-link:hover {
	opacity: 0.85;
}

.spv-contact-link--fb {
	background: #1877f2;
	color: #fff !important;
}

.spv-contact-link--ig {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
	color: #fff !important;
}

/* ── Price summary ───────────────────────────────────────────────────────── */

.spv-price-summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	background: #FFFFFF;
	border: 1px solid #A8DADC;
	border-radius: 6px;
}

.spv-price-label {
	font-size: 0.95rem;
	color: #555;
}

.spv-price-amount {
	font-size: 1.4rem;
	font-weight: 700;
	color: #7BBFC2;
}

/* ── Bulk & Corporate page ───────────────────────────────────────────────── */

.spv-bulk-corporate {
	max-width: 900px;
	margin: 0 auto;
}

/* Hero */
.spv-bc-hero {
	background: linear-gradient( 135deg, #F7B7C3 0%, #A8DADC 100% );
	color: #fff;
	border-radius: 12px;
	padding: 2.5rem 1.5rem;
	text-align: center;
	margin-bottom: 2rem;
}

.spv-bc-hero__title {
	font-size: 1.8rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
	color: #fff;
}

.spv-bc-hero__slogan {
	font-size: 1.1rem;
	opacity: 0.9;
	margin: 0 0 1.5rem;
}

.spv-bc-hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Banner image */
.spv-bc-banner {
	margin-bottom: 2rem;
}

.spv-bc-banner__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Section titles */
.spv-bc-section-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
	color: #333;
}

/* Why cards */
.spv-bc-why {
	margin-bottom: 2.5rem;
}

.spv-bc-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.spv-bc-card {
	flex: 1 1 220px;
	border: 1px solid #A8DADC;
	border-radius: 8px;
	padding: 1.25rem;
	background: #EAF6FF;
	text-align: center;
}

.spv-bc-card__icon {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.spv-bc-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.4rem;
	color: #333;
}

.spv-bc-card__text {
	font-size: 0.9rem;
	color: #666;
	margin: 0;
}

/* Steps */
.spv-bc-pricing {
	margin-bottom: 2.5rem;
}

.spv-bc-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.spv-bc-step {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.spv-bc-step__num {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: #FF9AA2;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.spv-bc-step__text {
	margin: 0;
	padding-top: 0.35rem;
	font-size: 0.95rem;
}

.spv-bc-price-note {
	background: #FFFFFF;
	border: 1px solid #A8DADC;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	color: #555;
}

.spv-bc-price-note p {
	margin: 0;
}

/* CTA section */
.spv-bc-cta-section {
	text-align: center;
	margin-bottom: 2rem;
}

.spv-bc-cta-text {
	font-size: 1rem;
	color: #555;
	margin-bottom: 1.25rem;
}

.spv-bc-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* CTA buttons */
.spv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.25rem;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.12s;
	border: none;
}

.spv-btn:hover {
	opacity: 0.9;
	transform: translateY( -1px );
}

.spv-btn--fb {
	background: #1877f2;
	color: #fff !important;
}

.spv-btn--ig {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
	color: #fff !important;
}

.spv-bc-cta--large {
	padding: 0.75rem 1.75rem;
	font-size: 1.05rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( min-width: 600px ) {
	.spv-bc-hero__title {
		font-size: 2.2rem;
	}

	.spv-image-slots {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.spv-image-slot {
		flex: 1 1 calc( 50% - 0.5rem );
	}

	.spv-bc-steps {
		flex-direction: row;
		gap: 1rem;
	}

	.spv-bc-step {
		flex: 1;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media ( min-width: 860px ) {
	.spv-bc-hero {
		padding: 3.5rem 3rem;
	}
}

/* ── Primary button (purple) ─────────────────────────────────────────────── */

.spv-btn--primary {
	background: #FF9AA2;
	color: #fff !important;
}

.spv-btn--primary:hover {
	background: #7BBFC2;
}

/* ══════════════════════════════════════════════════════════════════════════
   HF6.1.2.6.3 — Bulk page redesign additions
   Branded PNG-icon CTAs, social-proof stats, hover-lift cards, hint text.
══════════════════════════════════════════════════════════════════════════ */

.spv-bc-hero__tagline {
	margin: 0 0 1rem;
	color: #777;
	font-size: 0.95rem;
}

.spv-bc-hero__fastest,
.spv-bc-cta-hint {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: #888;
	font-style: italic;
}

/* New CTA buttons — branded PNG icon + label, more prominent than the
   plain text spv-btn--fb/ig used previously. */
.spv-bc-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #FFFFFF !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: none;
}

.spv-bc-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	color: #FFFFFF !important;
}

.spv-bc-cta-btn img {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: block;
}

.spv-bc-cta-btn span {
	color: #FFFFFF;
}

.spv-bc-cta-fb {
	background: #1877F2;
}

.spv-bc-cta-ig {
	background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
}

.spv-bc-cta-email {
	background: #FF9AA2; /* coral — matches site primary CTA */
}

.spv-bc-cta-email .spv-bc-cta-icon {
	font-size: 22px;
	line-height: 1;
}

/* Card hover lift (the existing rules give cards no interactivity hint). */
.spv-bc-card {
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.spv-bc-card:hover {
	transform: translateY(-4px);
	border-color: #A8DADC;
}

/* Step title — new; previous template only had number + paragraph. */
.spv-bc-step__title {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: #333;
}

/* SOCIAL PROOF — 4 stat counters */
.spv-bc-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	text-align: center;
	padding: 2rem 0;
	margin: 0 0 2.5rem;
	background: rgba(168, 218, 220, 0.10);
	border-radius: 12px;
}

.spv-bc-stat__num {
	font-size: 2.25rem;
	font-weight: 700;
	color: #FF9AA2;
	line-height: 1.1;
	margin-bottom: 0.35rem;
}

.spv-bc-stat__label {
	font-size: 0.875rem;
	color: #666;
	font-weight: 500;
}

@media ( min-width: 768px ) {
	.spv-bc-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}

	.spv-bc-stat__num {
		font-size: 2.5rem;
	}
}

@media ( max-width: 600px ) {
	.spv-bc-cta-btn {
		padding: 12px 18px;
		font-size: 14px;
	}
	.spv-bc-cta-btn img {
		width: 28px;
		height: 28px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Custom Design hub page  [sweetprints_custom_design_hub]
══════════════════════════════════════════════════════════════════════════ */

.spv-cd-hub {
	max-width: 1200px;
	margin: 0 auto;
}

/* Hero */

.spv-cd-hub__hero {
	text-align: center;
	padding: 2rem 1rem 1.75rem;
	margin-bottom: 2rem;
	border-bottom: 2px solid #A8DADC;
}

.spv-cd-hub__title {
	font-size: 1.8rem;
	font-weight: 800;
	color: #333;
	margin: 0 0 0.6rem;
}

.spv-cd-hub__subtitle {
	font-size: 1.05rem;
	color: #666;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.5;
}

/* Phase 4.1 — 3 visual groups: featured (mint banner) / upload (blue 2×2) / cookie (peach single) */

@media ( min-width: 768px ) {
	.spv-cd-hub__title {
		font-size: 2.1rem;
	}
}

.spv-cd-group {
	margin-bottom: 2.5rem;
	padding: 1.5rem 1.25rem;
	border-radius: 12px;
}

.spv-cd-group__header {
	margin-bottom: 1rem;
}

.spv-cd-group__title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 0.35rem;
}

.spv-cd-group__hint {
	font-size: 0.95rem;
	color: #555;
	margin: 0;
	line-height: 1.5;
}

/* Featured group (Mix Sheet Builder) — full-width mint tinted banner */
.spv-cd-group--featured {
	background: rgba( 168, 218, 220, 0.18 );
	border: 1px solid rgba( 168, 218, 220, 0.55 );
}

/* Upload group — soft blue tint */
.spv-cd-group--upload {
	background: rgba( 167, 199, 231, 0.14 );
	border: 1px solid rgba( 167, 199, 231, 0.35 );
}

/* Cookie cutter group — soft peach tint */
.spv-cd-group--cookie {
	background: rgba( 255, 218, 185, 0.22 );
	border: 1px solid rgba( 255, 195, 150, 0.45 );
}

/* Group grids */
.spv-cd-group__grid {
	display: grid;
	gap: 1.25rem;
}

.spv-cd-group__grid--2x2 {
	grid-template-columns: 1fr;
}

@media ( min-width: 768px ) {
	.spv-cd-group__grid--2x2 {
		grid-template-columns: 1fr 1fr;
	}
}

.spv-cd-group__grid--single {
	grid-template-columns: 1fr;
}

@media ( min-width: 768px ) {
	.spv-cd-group__grid--single {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* Featured banner card — horizontal layout on desktop */
.spv-cd-card--featured {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	background: #fff;
	border: 1px solid rgba( 168, 218, 220, 0.7 );
	padding: 1.5rem 1.5rem;
}

@media ( min-width: 768px ) {
	.spv-cd-card--featured {
		flex-direction: row;
		align-items: center;
		padding: 1.5rem 2rem;
	}

	.spv-cd-card--featured .spv-cd-card__body {
		flex: 1;
	}

	.spv-cd-card--featured .spv-cd-card__cta {
		flex: 0 0 auto;
		margin-left: 1.5rem;
	}
}

/* Badges (rounded pills above card title) */
.spv-cd-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 999px;
	margin-bottom: 0.6rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.spv-cd-badge--mint {
	background: #A8DADC;
	color: #05606B;
}

.spv-cd-badge--blue {
	background: #D8E5F2;
	color: #2C5282;
}

.spv-cd-badge--peach {
	background: #FFD7B5;
	color: #8B4513;
}

/* HF4.3.3 — PNG icon combo (cupcake + cookie) for Single Photo card.
   Size matches the surrounding emoji icons (~2.4rem font) — keeps the
   visual rhythm consistent across all 6 hub cards. */
.spv-cd-card__icon--combo {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: 0.75rem;
	height: auto;
	font-size: inherit;
}

.spv-cd-card__icon-img {
	width: auto;
	height: 38px;
	max-height: 38px;
	max-width: 100%;
	display: block;
	object-fit: contain;
}

@media ( max-width: 480px ) {
	.spv-cd-card__icon-img {
		height: 32px;
		max-height: 32px;
	}
}

/* Cards */

.spv-cd-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #A8DADC;
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	background: #EAF6FF;
	transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
}

.spv-cd-card:hover {
	box-shadow: 0 4px 18px rgba( 5, 96, 107, 0.18 );
	border-color: #A8DADC;
	transform: translateY( -2px );
}

.spv-cd-card__icon {
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.spv-cd-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 0.6rem;
}

.spv-cd-card__desc {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
	flex-grow: 1;   /* push price + button to the bottom */
	margin: 0 0 1rem;
}

.spv-cd-card__price {
	font-size: 1.2rem;
	font-weight: 700;
	color: #7BBFC2;
	margin: 0 0 1rem;
}

.spv-cd-card .spv-btn--primary {
	align-self: flex-start;
	padding: 0.5rem 1.25rem;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background 0.15s, transform 0.12s;
}

.spv-cd-card .spv-btn--primary:hover {
	transform: translateY( -1px );
}

/* ── Outline button (used in guide/pickup CTA) ───────────────────────────── */

.spv-btn--outline {
	background: transparent;
	border: 2px solid #A8DADC;
	color: #7BBFC2 !important;
}

.spv-btn--outline:hover {
	background: #FF9AA2;
	color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Edible Topper Guide  [sweetprints_topper_guide]
══════════════════════════════════════════════════════════════════════════ */

.spv-guide {
	max-width: 860px;
	margin: 0 auto;
}

.spv-guide__header {
	text-align: center;
	padding: 1.5rem 0 2rem;
}

.spv-guide__h1 {
	color: #7BBFC2;
	font-size: clamp( 1.6rem, 3vw, 2.2rem );
	font-weight: 800;
	margin: 0 0 .6rem;
}

.spv-guide__lead {
	font-size: 1.05rem;
	color: #555;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.spv-guide__section {
	margin-bottom: 2.5rem;
}

.spv-guide__h2 {
	color: #7BBFC2;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.spv-guide__box {
	background: #EAF6FF;
	border: 1px solid #A8DADC;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
}

.spv-guide__list,
.spv-guide__steps {
	padding-left: 1.25rem;
	margin: 0;
}

.spv-guide__list li,
.spv-guide__steps li {
	margin-bottom: .65rem;
	font-size: .95rem;
	line-height: 1.65;
}

/* Video placeholder */
.spv-guide__video-wrap {
	background: #f8f0f5;
	border-radius: 10px;
	overflow: hidden;
}

.spv-guide__video-placeholder {
	text-align: center;
	padding: 3rem 1rem;
	color: #7BBFC2;
}

.spv-guide__video-placeholder span {
	font-size: 3rem;
	display: block;
	margin-bottom: .75rem;
	line-height: 1;
}

.spv-guide__video-placeholder p {
	color: #888;
	font-size: .9rem;
	margin: 0;
}

/* Accordion FAQ */
.spv-guide__faq {
	border: 1px solid #A8DADC;
	border-radius: 8px;
	margin-bottom: .75rem;
	overflow: hidden;
}

.spv-guide__faq-q {
	padding: 1rem 1.25rem;
	background: #EAF6FF;
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	color: #7BBFC2;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.spv-guide__faq-q::-webkit-details-marker { display: none; }

.spv-guide__faq-q::before {
	content: '▶';
	font-size: .7rem;
	flex-shrink: 0;
	transition: transform .2s;
}

details[open] .spv-guide__faq-q::before {
	transform: rotate( 90deg );
}

.spv-guide__faq-a {
	padding: 1rem 1.25rem;
	background: #fff;
	border-top: 1px solid #A8DADC;
	font-size: .925rem;
	line-height: 1.65;
}

.spv-guide__faq-a p {
	margin: 0;
}

.spv-guide__allergen-note {
	color: #617F80;
	font-size: .875rem;
	margin: .5rem 0 0;
	border-top: 1px solid #A8DADC;
	padding-top: .75rem;
}

/* Warning box (yellow) */
.spv-guide__warning-box {
	background: #fffbe6;
	border: 1px solid #f0c040;
	border-left: 4px solid #f0c040;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-top: 1rem;
	font-size: .925rem;
	line-height: 1.65;
	color: #5a4a00;
}

/* Responsive YouTube embed */
.spv-guide__video-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.spv-guide__video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

/* Nutrition table */
.spv-guide__nutrition-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: .75rem;
	font-size: .9rem;
}

.spv-guide__nutrition-table tr:nth-child(odd) {
	background: rgba(196, 93, 140, .06);
}

.spv-guide__nutrition-table td {
	padding: .35rem .5rem;
}

.spv-guide__nutrition-table td:last-child {
	text-align: right;
	font-weight: 600;
}

/* PDF CTA box */
.spv-guide__pdf-cta {
	text-align: center;
	background: #EAF6FF;
	border: 1px solid #A8DADC;
	border-radius: 10px;
	padding: 1.75rem 1.25rem;
}

.spv-guide__pdf-cta p {
	margin: 0 0 .75rem;
	font-size: .95rem;
	color: #555;
}

/* CTA */
.spv-guide__cta {
	text-align: center;
}

.spv-guide__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact & Pick-Up  [sweetprints_pickup_instructions]
══════════════════════════════════════════════════════════════════════════ */

.spv-pickup {
	max-width: 860px;
	margin: 0 auto;
}

.spv-pickup__header {
	text-align: center;
	padding: 1.5rem 0 2rem;
}

.spv-pickup__h1 {
	color: #7BBFC2;
	font-size: clamp( 1.6rem, 3vw, 2.2rem );
	font-weight: 800;
	margin: 0 0 .6rem;
}

.spv-pickup__lead {
	font-size: 1.05rem;
	color: #555;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.spv-pickup__section {
	margin-bottom: 2.5rem;
}

.spv-pickup__h2 {
	color: #7BBFC2;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.spv-pickup__box {
	background: #EAF6FF;
	border: 1px solid #A8DADC;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
}

.spv-pickup__box p {
	margin: 0 0 .6rem;
	font-size: .95rem;
	line-height: 1.6;
}

.spv-pickup__box p:last-child {
	margin-bottom: 0;
}

.spv-pickup__steps,
.spv-pickup__list {
	padding-left: 1.25rem;
	margin: 0;
}

.spv-pickup__steps li,
.spv-pickup__list li {
	margin-bottom: .75rem;
	font-size: .95rem;
	line-height: 1.65;
}

/* Contact cards */
.spv-pickup__contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.spv-pickup__contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: 1.5rem 1rem;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	transition: opacity .15s, transform .15s;
}

.spv-pickup__contact-card:hover {
	opacity: .92;
	transform: translateY( -2px );
}

.spv-pickup__contact-card--fb {
	background: #1877f2;
	color: #fff !important;
}

.spv-pickup__contact-card--ig {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
	color: #fff !important;
}

.spv-pickup__contact-card strong,
.spv-pickup__contact-card small {
	color: #fff;
	display: block;
}

.spv-pickup__contact-icon {
	font-size: 1.8rem;
	line-height: 1;
}

.spv-pickup__map-link {
	color: #7BBFC2;
	font-weight: 600;
	font-size: .95rem;
}

.spv-pickup__map-link:hover {
	color: #4A4A4A;
}

/* Photo guide grid */
.spv-pickup__photo-guide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
}

.spv-pickup__photo {
	margin: 0;
}

.spv-pickup__photo img {
	width: 100%;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.spv-pickup__photo figcaption {
	font-size: .8rem;
	color: #888;
	text-align: center;
	margin-top: .4rem;
}

/* Guide banner */
.spv-pickup__guide-banner {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: #EAF6FF;
	border: 1px solid #A8DADC;
	border-radius: 8px;
	padding: .85rem 1.25rem;
	margin-bottom: 2rem;
	font-size: .95rem;
}

.spv-pickup__guide-banner a {
	color: #7BBFC2;
	font-weight: 600;
}

/* Box variants */
.spv-pickup__box--pink {
	background: #EAF6FF;
	border-color: #A8DADC;
}

.spv-pickup__box--yellow {
	background: #fffbe6;
	border-color: #f0c040;
}

/* Footer note */
.spv-pickup__footer-note {
	text-align: center;
	padding: 2rem 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #7BBFC2;
}

/* Responsive */
@media ( max-width: 480px ) {
	.spv-pickup__contact-grid {
		grid-template-columns: 1fr;
	}

	.spv-pickup__photo-guide {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 4.3 — Multi-Image tier pricing breakdown + add-slot counter
══════════════════════════════════════════════════════════════════════════ */

.spv-add-slot-counter {
	display: inline-block;
	margin-left: .35rem;
	font-size: .85rem;
	color: #666;
	font-weight: 400;
}

.spv-price-breakdown {
	margin: 0.85rem 0 0;
	padding: 0.85rem 1rem;
	background: #f7f8f9;
	border-left: 3px solid #7BBFC2;
	border-radius: 6px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.spv-price-breakdown:empty { display: none; }

.spv-price-breakdown__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem;
	color: #444;
}

.spv-price-breakdown__row:not( :last-child ) {
	margin-bottom: .25rem;
}

.spv-price-breakdown__row--free {
	color: #1b8a3d;
	font-weight: 600;
}

/* Phase 4.5 — Circular crop notice (used on multi + single image templates).
   HF4.1.10 — softened from yellow/amber to soft mint to match other info
   notices. Stronger 5px left border preserves the visual emphasis. */
.spv-crop-notice {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: rgba( 168, 218, 220, 0.18 );
	border-left: 5px solid #7BBFC2;
	border-radius: 6px;
	color: #4A4A4A;
	font-size: 0.95rem;
	line-height: 1.55;
}

.spv-crop-notice__icon {
	font-size: 1.4rem;
	line-height: 1;
	flex: 0 0 auto;
	color: #05606B;
}

.spv-crop-notice__body strong {
	display: block;
	margin-bottom: .35rem;
	color: #05606B;
}

.spv-crop-notice__body p {
	margin: 0 0 .5rem;
}
.spv-crop-notice__body p:last-child { margin-bottom: 0; }

.spv-crop-notice__body a {
	color: #05606B;
	font-weight: 600;
	text-decoration: underline;
}

@media ( max-width: 480px ) {
	.spv-crop-notice {
		font-size: 0.9rem;
		padding: 0.85rem 0.95rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   HF4.2.2 — Multi-Image overflow notice (prominent coral banner).
   Triggers when filled qty > max sheet capacity. Customer must reduce a
   copy count by 1+ to proceed; uploaded images are never cleared.
════════════════════════════════════════════════════════════════════════ */

.spv-hint--overflow {
	display: block;
	margin: .65rem 0 1rem;
	padding: .75rem 1rem;
	background: rgba( 255, 154, 162, 0.15 );
	border-left: 4px solid #FF9AA2;
	border-radius: 6px;
	color: #4A4A4A;
	font-size: .95rem;
	line-height: 1.45;
	animation: spv-overflow-fade-in .2s ease-out;
}

.spv-hint--overflow::before {
	content: "\26A0\FE0F  ";  /* ⚠️ */
	margin-right: .25rem;
}

.spv-hint--overflow strong {
	color: #2A2A2A;
}

@keyframes spv-overflow-fade-in {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: translateY( 0 );    }
}

/* Qty input red border when total > max. */
.spv-input--error,
.spv-input--error:focus {
	border-color: #FF9AA2 !important;
	box-shadow: 0 0 0 2px rgba( 255, 154, 162, 0.25 ) !important;
}

/* Disabled add-to-cart visual. */
.single_add_to_cart_button.spv-btn--disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* Shake animation when customer clicks disabled add-to-cart. */
@keyframes spv-shake {
	0%, 100% { transform: translateX( 0 ); }
	20%, 60% { transform: translateX( -6px ); }
	40%, 80% { transform: translateX( 6px ); }
}

.spv-btn--shake {
	animation: spv-shake .3s ease-in-out;
}

/* ════════════════════════════════════════════════════════════════════════
   HF4.1.8 — "How it works" expandable banner (Custom Multi-Image)
   Mirrors the Mix Sheet Builder Step 2 help tooltip pattern.
════════════════════════════════════════════════════════════════════════ */

.spv-help-section {
	margin: 0 0 1rem;
}

.spv-help-toggle,
.spv-help-toggle:hover,
.spv-help-toggle:focus,
.spv-help-toggle:focus-visible,
.spv-help-toggle:active {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.spv-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: .25rem 0 .5rem;
	padding: .4rem .6rem;
	color: #4A4A4A !important;
	font-size: .95rem;
	cursor: pointer;
	border-radius: 4px;
}

.spv-help-toggle:hover { color: #05606B !important; }

.spv-help-toggle:focus-visible {
	outline: 2px solid #A8DADC;
	outline-offset: 2px;
}

.spv-help-icon  { font-size: 1.05rem; color: #7BBFC2; }
.spv-help-label { text-decoration: underline; text-decoration-color: #7BBFC2; text-underline-offset: 3px; }
.spv-help-caret { font-size: .7rem; transition: transform .2s; }
.spv-help-toggle[aria-expanded="true"] .spv-help-caret { transform: rotate(180deg); }

.spv-help-content {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	background: #f7f8f9;
	border-left: 3px solid #7BBFC2;
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.55;
	color: #4A4A4A;
}

.spv-help-content p { margin: 0 0 .65rem; }
.spv-help-content p:last-child { margin-bottom: 0; }
.spv-help-content ol,
.spv-help-content ul { margin: .25rem 0 .75rem 1.25rem; padding: 0; }
.spv-help-content li { margin-bottom: .35rem; }

/* Show desktop variant by default; mobile variant only ≤599px. */
.spv-help--mobile  { display: none; }
.spv-help--desktop { display: block; }

@media ( max-width: 599px ) {
	.spv-help--desktop { display: none; }
	.spv-help--mobile  { display: block; }
}