/* Lovely Evermile — product-page delivery / collection finder.
   Inherits the grid palette from checkout-grid.css. */
.lr-em-pp {
	--lr-green: #4a5a39;
	--lr-green-dark: #3b4a2d;
	--lr-cream: #fbf6e9;
	--lr-line: #e6ddc6;
	--lr-text: #2f2a1e;
	--lr-muted: #8a8268;
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--lr-line);
	border-radius: 12px;
	background: #fff;
	color: var(--lr-text);
	font-size: 14px;
}

.lr-em-pp__head {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 10px;
}

.lr-em-pp__choice {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.lr-em-pp__opt {
	flex: 1 1 160px;
	padding: 12px 14px;
	border: 1px solid var(--lr-line);
	border-radius: 10px;
	background: #fff;
	color: var(--lr-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	transition: border-color .12s, box-shadow .12s, background .12s, color .12s;
}
.lr-em-pp__opt:hover { border-color: var(--lr-green); }
.lr-em-pp__opt.is-active {
	background: var(--lr-green);
	border-color: var(--lr-green-dark);
	color: #fff;
}

.lr-em-pp__opt-note {
	margin: 8px 2px 0;
	font-size: 12px;
	color: var(--lr-muted);
}

.lr-em-pp__panel { margin-top: 14px; }

.lr-em-pp__pc {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.lr-em-pp__pc-input {
	flex: 1 1 160px;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--lr-line);
	border-radius: 10px;
	background: #fff;
	color: var(--lr-text);
	font-size: 15px;
	text-transform: uppercase;
}
.lr-em-pp__pc-input:focus { outline: 2px solid var(--lr-green); outline-offset: 1px; }
.lr-em-pp__pc-btn {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 1px solid var(--lr-green-dark);
	border-radius: 10px;
	background: var(--lr-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}
.lr-em-pp__pc-btn:hover { background: var(--lr-green-dark); }

.lr-em-pp__grid { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Loading skeleton — cream shimmer that matches the palette (no grey). */
.lr-em-skel {
	display: block;
	width: 100%;
	min-width: 80px;
	height: 52px;
	border-radius: 10px;
	background: linear-gradient( 90deg, #efe7d2 25%, #fbf6e9 50%, #efe7d2 75% );
	background-size: 300% 100%;
	animation: lr-em-shimmer 1.3s ease-in-out infinite;
}
.lr-em-skel--head {
	height: 15px;
	width: 70%;
	margin: 0 auto 4px;
}
@keyframes lr-em-shimmer {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.lr-em-skel { animation: none; }
}

@media ( max-width: 600px ) {
	.lr-em-pp__opt { flex: 1 1 100%; }
}