/* WeStyle cart drawer — slides in from the right (inc/cart-drawer.php). */

.wscd { position: fixed; inset: 0; z-index: 10001; }
.wscd[hidden] { display: none; }
.wscd__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(33, 26, 23, .5);
	opacity: 0;
	transition: opacity .22s var(--ws-ease);
}
.wscd__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	background: var(--ws-bg);
	color: var(--ws-ink);
	box-shadow: var(--ws-shadow-lg);
	font-family: var(--ws-font-body);
	transform: translateX(100%);
	transition: transform .25s var(--ws-ease);
	outline: none;
	padding-top: env(safe-area-inset-top, 0px);
}
.wscd.is-in .wscd__backdrop { opacity: 1; }
.wscd.is-in .wscd__panel { transform: none; }
.wscd-open { overflow: hidden; }
.wscd-open .ws-cc,
.wscd-open #wsl-sheet { display: none !important; }

.wscd__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 14px 20px;
	border-bottom: 1px solid var(--ws-line);
}
.wscd__title { margin: 0; font: 700 1.6rem/1.1 var(--ws-font-display); color: var(--ws-ink); }
.wscd__x {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ws-line);
	border-radius: 50%;
	background: var(--ws-bg);
	color: var(--ws-ink);
	font-size: 15px;
	cursor: pointer;
}
.wscd__x:hover, .wscd__x:focus { background: var(--ws-cream); color: var(--ws-ink); }

.wscd__added {
	margin: 0;
	padding: 10px 20px;
	background: var(--ws-success-tint);
	color: var(--ws-success);
	font-size: var(--ws-fs-sm);
	font-weight: 600;
}

.wscd__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; }
.wscd__items { list-style: none; margin: 0; padding: 0; }
.wscd__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ws-line); }
.wscd__thumb img { display: block; width: 76px; height: 96px; object-fit: cover; border-radius: var(--ws-radius-sm); }
.wscd__info { display: grid; gap: 3px; align-content: start; min-width: 0; }
.wscd__name { color: var(--ws-ink); font-weight: 600; text-decoration: none; line-height: 1.3; }
.wscd__name:hover { color: var(--ws-rose); }
.wscd__meta { margin: 0; font-size: var(--ws-fs-xs); color: var(--ws-ink-soft); }
.wscd__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wscd__price { font-size: var(--ws-fs-sm); }
.wscd__remove {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--ws-muted);
	font-size: var(--ws-fs-xs);
	text-decoration: underline;
	cursor: pointer;
}
.wscd__remove:hover, .wscd__remove:focus { background: none; color: var(--ws-danger); }

.wscd__look { margin-top: 18px; padding: 14px; background: var(--ws-cream); border-radius: var(--ws-radius); }
.wscd__look-title { margin: 0; font: 700 1.25rem/1.2 var(--ws-font-display); color: var(--ws-ink); }
.wscd__look-sub { margin: 2px 0 10px; font-size: var(--ws-fs-xs); color: var(--ws-muted); }
.wscd__look-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wscd__look-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.wscd__look-item img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--ws-radius-sm); background: var(--ws-bg); }
.wscd__look-info { display: grid; min-width: 0; }
.wscd__look-name { font-size: var(--ws-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wscd__look-price { font-size: var(--ws-fs-xs); color: var(--ws-ink-soft); }
.wscd__add {
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--ws-rose);
	border-radius: var(--ws-radius-pill);
	background: var(--ws-bg);
	color: var(--ws-rose);
	font: 600 var(--ws-fs-xs)/1 var(--ws-font-body);
	cursor: pointer;
	white-space: nowrap;
}
.wscd__add:hover, .wscd__add:focus { background: var(--ws-rose); color: #fff; }
.wscd__add[disabled] { opacity: .6; cursor: progress; }

.wscd__foot {
	display: grid;
	gap: 8px;
	padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ws-line);
	background: var(--ws-bg);
	box-shadow: 0 -8px 20px -16px rgba(33, 26, 23, .35);
}
.wscd__msg { margin: 0; padding: 8px 12px; border-radius: var(--ws-radius-sm); background: var(--ws-danger-tint); color: var(--ws-danger); font-size: var(--ws-fs-xs); }
.wscd__msg[hidden] { display: none; }
.wscd__total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--ws-fs-md); }
.wscd__total strong { font-size: 1.15rem; }
.wscd__note { margin: 0 0 4px; font-size: var(--ws-fs-xs); color: var(--ws-muted); }
.wscd__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border-radius: var(--ws-radius-pill);
	font: 600 var(--ws-fs-md)/1 var(--ws-font-body);
	text-decoration: none;
}
.wscd__btn--primary { background: var(--ws-rose); color: #fff; }
.wscd__btn--primary:hover, .wscd__btn--primary:focus { background: var(--ws-rose-deep); color: #fff; }
.wscd__btn--ghost { min-height: 44px; color: var(--ws-ink); text-decoration: underline; font-size: var(--ws-fs-sm); }
.wscd__btn--ghost:hover { color: var(--ws-rose); }

.wscd__empty { display: grid; gap: 14px; padding: 32px 20px; text-align: center; color: var(--ws-ink-soft); }
.wscd__empty p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.wscd__panel, .wscd__backdrop { transition: none; }
}