/* GLZD Fresh: the drop popup on the home page (0.8.0). Brand: oxblood #4e2d2d, bronze #956f0e
 * (small text #7f5e0b), cream #efe6cf; Lora for headings, DM Sans for text; the pieces are the
 * shop's own cards. Everything is scoped to .glzd-drop. */
.glzd-drop {
	--drop-ink: #4e2d2d;
	--drop-text: #3d2b2b;
	--drop-bronze: #7f5e0b;
	--drop-cream: #efe6cf; /* 0.8.4: a little darker (was #f8f3e3) */
	box-sizing: border-box;
	width: min(860px, calc(100vw - 48px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 16px;
	background: var(--drop-cream);
	box-shadow: 0 30px 80px rgba(30, 16, 16, 0.38), 0 6px 18px rgba(30, 16, 16, 0.18);
	color: var(--drop-text);
	font-family: 'DM Sans', system-ui, sans-serif;
}

.glzd-drop *,
.glzd-drop *::before,
.glzd-drop *::after { box-sizing: border-box; }

.glzd-drop::backdrop {
	background: rgba(36, 20, 20, 0.58);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.glzd-drop[open] { animation: glzd-drop-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.glzd-drop[open]::backdrop { animation: glzd-drop-fade 0.32s ease; }

@keyframes glzd-drop-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes glzd-drop-fade { from { opacity: 0; } }

.glzd-drop__inner {
	position: relative;
	padding: 30px 34px 28px;
}

.glzd-drop__inner:focus { outline: none; }

.glzd-drop__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--drop-ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.glzd-drop__close:hover { background: rgba(78, 45, 45, 0.08); }

.glzd-drop__close:focus-visible,
.glzd-drop a:focus-visible,
.glzd-drop .button:focus-visible {
	outline: 2px solid #956f0e;
	outline-offset: 3px;
}

.glzd-drop__close svg { width: 22px; height: 22px; }

.glzd-drop__title {
	margin: 0 48px 14px 0;
	color: var(--drop-ink);
	font-family: 'Lora', Georgia, serif;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 400;
	line-height: 1.15;
}

/* A thin line between the title and the text, 3/4 of the way across. */
.glzd-drop__rule {
	width: 75%;
	height: 1px;
	margin: 0 0 14px;
	background: rgba(78, 45, 45, 0.28);
}

.glzd-drop__text {
	max-width: 60ch;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
}

.glzd-drop__text p { margin: 0 0 0.6em; font-size: inherit; line-height: inherit; }
.glzd-drop__text p:last-child { margin-bottom: 0; }

/* The pieces are the shop's own product cards (the theme and Site Tools style them, hover too);
 * only the grid is set here, so they sit 4 across in the popup (2 on phones). */
.glzd-drop__items { margin: 0; }

.glzd-drop .glzd-drop__items ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--drop-cols, 4), minmax(0, 1fr)) !important;
	gap: 14px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 6px 2px !important; /* room for the card's hover lift */
	list-style: none;
}

.glzd-drop .glzd-drop__items ul.products::before,
.glzd-drop .glzd-drop__items ul.products::after { content: none !important; display: none !important; }

.glzd-drop .glzd-drop__items ul.products li.product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.glzd-drop__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 24px;
	margin: 22px 0 0;
}

.glzd-drop__shop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--drop-ink);
	background: var(--drop-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.glzd-drop__shop:hover {
	background: #3a2020;
	box-shadow: 0 8px 20px rgba(78, 45, 45, 0.25);
	color: #fff;
}

.glzd-drop__shop svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.glzd-drop__shop:hover svg { transform: translateX(3px); }

.glzd-drop__later {
	margin: 0;
	padding: 10px 4px;
	border: 0;
	background: none;
	color: var(--drop-text);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

html.glzd-drop-lock { overflow: hidden; }

/* One piece on its own: a single card, centered. */
.glzd-drop .glzd-drop__items ul.products:has(> :only-child) {
	grid-template-columns: minmax(0, 280px) !important;
	justify-content: center;
}

@media (max-width: 860px) {
	.glzd-drop .glzd-drop__items ul.products:not(:has(> :only-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

@media (max-width: 560px) {
	.glzd-drop { width: calc(100vw - 40px); max-height: calc(100dvh - 72px); border-radius: 14px; }
	.glzd-drop__inner { padding: 22px 14px 18px; }
	.glzd-drop__close { top: 8px; right: 8px; }
	.glzd-drop__title { font-size: 22px; }
	.glzd-drop__text { margin-bottom: 14px; font-size: 14px; }
	.glzd-drop .glzd-drop__items ul.products { gap: 8px !important; }
	/* Shop the drop stays in sight while the pieces scroll under it. */
	.glzd-drop__foot {
		position: sticky;
		bottom: -18px;
		gap: 4px;
		margin: 12px -14px -18px;
		padding: 10px 14px 12px;
		background: var(--drop-cream);
		box-shadow: 0 -10px 18px -12px rgba(78, 45, 45, 0.35);
	}
	.glzd-drop__shop { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.glzd-drop[open],
	.glzd-drop[open]::backdrop { animation: none; }
	.glzd-drop__shop svg { transition: none; }
	.glzd-drop__shop:hover svg { transform: none; }
}