/**
 * Wishlist drawer (Header 5) — prototype gb-new-elements.css §5 drawer shell + line items + wishlist
 * rows + empty state, values verbatim, scoped to .gb-drawer (the drawer element carries .gb-root).
 * Same look as the Blocksy cart drawer (minicart.css). Tier A, not on the checkout.
 */

.gb-drawer { position: fixed; inset: 0; z-index: 9998; }
/* Above the search pop-up (9999): a heart tapped in the search results opens the wishlist over it (QA). */
.gb-drawer.gb-drawer--wish { z-index: 10000; }
.gb-drawer[hidden] { display: none; }
html.gb-drawer-open { overflow: hidden; }
.gb-drawer .gb-drawer__scrim {
	position: absolute; inset: 0; background: rgba(12, 10, 9, .62);
	opacity: 0; transition: opacity .24s cubic-bezier(.4, 0, .2, 1);
}
.gb-drawer.is-open .gb-drawer__scrim { opacity: 1; }

.gb-drawer .gb-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(440px, 100%);
	display: flex; flex-direction: column;
	background: var(--gb-dark); color: var(--gb-on-dark);
	border-left: 1px solid rgba(255, 255, 255, .10);
	box-shadow: var(--gb-shadow-2);
	transform: translateX(100%);
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
	font-family: var(--gb-font-body);
}
.gb-drawer.is-open .gb-drawer__panel { transform: translateX(0); }
.gb-drawer .gb-drawer__panel:focus { outline: none; }

.gb-drawer .gb-drawer__head {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px var(--gb-gutter);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gb-drawer .gb-drawer__title {
	display: inline-flex; align-items: center; gap: 10px; margin: 0;
	font-family: var(--gb-font-display); font-size: var(--gb-fs-20); font-weight: 600;
	color: #fff; letter-spacing: .01em; line-height: 1.2;
}
.gb-drawer .gb-drawer__title .gb-icon { color: var(--gb-gold); }
.gb-drawer .gb-drawer__count { color: var(--gb-on-dark-muted); font-family: var(--gb-font-body); font-size: var(--gb-fs-16); font-weight: 700; }
.gb-drawer .gb-drawer__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; min-height: 0; padding: 0; flex: 0 0 auto;
	background: transparent; border: 0; color: var(--gb-on-dark);
	border-radius: var(--gb-r-sm); cursor: pointer; box-shadow: none;
}
.gb-drawer .gb-drawer__close:hover { background: rgba(255, 255, 255, .10); color: #fff; }

.gb-drawer .gb-wishdrawer__inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gb-drawer .gb-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px var(--gb-gutter) 8px; }
.gb-drawer .gb-drawer__foot {
	flex: 0 0 auto; padding: 14px var(--gb-gutter) 18px;
	background: var(--gb-dark-2); border-top: 1px solid rgba(255, 255, 255, .12);
}

.gb-drawer .gb-mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gb-drawer .gb-mc-item {
	display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px;
	padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: opacity .2s;
}
.gb-drawer .gb-mc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.gb-drawer .gb-mc-item__img { display: block; align-self: start; line-height: 0; border-radius: var(--gb-r-md); overflow: hidden; }
.gb-drawer .gb-mc-item__img img { width: 100%; height: auto; display: block; }
.gb-drawer .gb-mc-item__main { min-width: 0; display: grid; gap: 6px; align-content: start; }
.gb-drawer .gb-mc-item__name {
	font-family: var(--gb-font-display); font-size: var(--gb-fs-16); font-weight: 600;
	color: #fff; text-decoration: none; line-height: 1.25;
}
.gb-drawer .gb-mc-item__name:hover { color: var(--gb-gold); }
.gb-drawer .gb-mc-item__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--gb-fs-13); color: var(--gb-on-dark-muted); margin: 0; }
.gb-drawer .gb-mc-stock { color: #7bc490; font-weight: 600; }
.gb-drawer .gb-mc-item__price { margin: 0; font-weight: 700; font-size: var(--gb-fs-15); color: #fff; white-space: nowrap; }
.gb-drawer .gb-mc-item__price del { opacity: .6; font-weight: 400; margin-right: 4px; }
.gb-drawer .gb-mc-item__price ins { text-decoration: none; }
.gb-drawer .gb-mc-item__row { display: flex; align-items: center; gap: 14px; margin-top: 2px; }

.gb-drawer .gb-wl-add {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 34px; padding: 0 14px;
	background: transparent; border: 1.5px solid var(--gb-gold); color: var(--gb-gold);
	border-radius: var(--gb-r-sm); cursor: pointer; text-decoration: none;
	font-weight: 700; font-size: var(--gb-fs-13);
}
.gb-drawer .gb-wl-add:hover { background: var(--gb-gold); color: var(--gb-dark); }
.gb-drawer .gb-wl-add.loading { opacity: .6; pointer-events: none; }
.gb-drawer .gb-wl-add.added::after { display: none; }
.gb-drawer .added_to_cart { display: none; }
.gb-drawer .gb-mc-remove {
	background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; box-shadow: none;
	font-size: var(--gb-fs-13); font-weight: 600; color: var(--gb-on-dark-muted);
	text-decoration: underline; text-underline-offset: 2px;
}
.gb-drawer .gb-mc-remove:hover { color: #fff; background: none; }

.gb-drawer .gb-mc-note { margin: 0 0 12px; font-size: var(--gb-fs-13); line-height: 1.45; color: var(--gb-on-dark-muted); }

.gb-drawer .gb-mc-empty { text-align: center; padding-top: 12px; }
.gb-drawer .gb-mc-illus { margin: 8px auto 14px; color: rgba(177, 141, 86, .65); display: block; }
.gb-drawer .gb-mc-empty__text { margin: 0 0 16px; font-size: var(--gb-fs-15); color: var(--gb-on-dark-muted); }

@media (max-width: 480px) {
	.gb-drawer .gb-drawer__panel { width: 100%; }
	.gb-drawer .gb-mc-item { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.gb-drawer .gb-drawer__panel, .gb-drawer .gb-drawer__scrim { transition: none; }
}

/* The drawer element carries .gb-root, whose page ground colour would cover the page behind the scrim. */
.gb-root.gb-drawer { background: transparent; }
/* Prototype note: 12px on a faint gold ground with a gold edge. */
.gb-drawer .gb-mc-note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--gb-gold); border-radius: var(--gb-r-sm); background: rgba(177, 141, 86, 0.12); font-size: var(--gb-fs-12); line-height: 1.5; color: var(--gb-on-dark); }
/* While saved hampers load, no "empty" message flashes. */
.gb-drawer--wish.is-loading .gb-mc-empty { visibility: hidden; }
/* ...and a pulsing placeholder line shows, so a heart tap opens to visible progress, not a blank panel (QA). */
.gb-drawer--wish.is-loading [data-wishdrawer-inner]::before {
	content: ""; display: block; flex: none; height: 76px; margin: 16px 20px 0; border-radius: var(--gb-r-sm);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
	background-size: 200% 100%; animation: gb-wl-loading 1.1s ease-in-out infinite;
}
@keyframes gb-wl-loading { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .gb-drawer--wish.is-loading [data-wishdrawer-inner]::before { animation: none; } }