/* Candlecopia Wishlist — add buttons, floating launcher, and bottom slide-up sheet. */

/* ----------------------------------------------------------------- buttons */

.cwl-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: #1f8a4c;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .6em 1.2em;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

.cwl-btn:hover {
	background: #1a7741;
}

.cwl-btn.is-active {
	background: #b23b6f;
}

/* Keep the label white in every state (Add and Remove), overriding theme link/button colors. */
.cwl-btn,
.cwl-btn:hover,
.cwl-btn:focus,
.cwl-btn:active,
.cwl-btn.is-active,
.cwl-btn .cwl-add__label {
	color: #fff;
}

.cwl-archive-cta {
	margin: 0 0 1em;
}

/* When appended inside the term-description ("gray") box, sit at the bottom with top spacing. */
.term-description .cwl-archive-cta {
	margin: 1.25em 0 0;
}

/* Inside the WooCommerce variation "gray box" (selected fragrance), sit below the description,
   centered horizontally in the box. */
.cwl-variation-cta {
	margin: 0.75em 0 0;
	text-align: center;
}

.cwl-variation-cta .cwl-btn {
	display: inline-flex;
}

.cwl-product-cta {
	margin: 1em 0;
}

.cwl-add__glyph {
	font-size: 1.05em;
	line-height: 1;
}

.cwl-add.is-active .cwl-add__glyph {
	content: '';
}

/* Compact heart toggle on shop cards. */
.cwl-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	margin: .25em 0;
	background: rgba( 255, 255, 255, .9 );
	color: #b23b6f;
	border: 1px solid #e0c3d2;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
}

.cwl-heart.is-active {
	background: #b23b6f;
	color: #fff;
	border-color: #b23b6f;
}

.cwl-heart__glyph {
	line-height: 1;
}

/* ---------------------------------------------------------------- launcher */

.cwl-launcher {
	position: fixed;
	right: 1em;
	bottom: 1em;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: #b23b6f;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .65em 1.1em;
	font-size: 14px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .25 );
	cursor: pointer;
}

.cwl-launcher[hidden] {
	display: none;
}

.cwl-launcher__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 .35em;
	background: #fff;
	color: #b23b6f;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
}

.cwl-launcher__count[hidden] {
	display: none;
}

/* --- Storefront handheld footer bar (phones): a heart, left of the cart --- */

/* Heart icon (the bar hides the text label via text-indent; ::before draws the glyph). */
.storefront-handheld-footer-bar ul li.wishlist > a::before {
	content: "\2665";
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 400;
}

/* Count badge, mirroring the cart's badge geometry. */
.storefront-handheld-footer-bar ul li.wishlist .count {
	text-indent: 0;
	display: block;
	width: 2em;
	height: 2em;
	line-height: 2;
	box-sizing: content-box;
	font-size: .75em;
	position: absolute;
	top: .875em;
	left: 50%;
	border-radius: 100%;
	border: 1px solid rgba( 255, 255, 255, .5 );
	background-color: #8e2c57;
	color: #fff;
}

.storefront-handheld-footer-bar ul li.wishlist .count[hidden] {
	display: none;
}

/* On phones the bar heart replaces the floating pill, which would overlap the bar's buttons. */
@media ( max-width: 768px ) {
	.cwl-launcher {
		display: none !important;
	}
}

/* ------------------------------------------------------------------- sheet */

.cwl-sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.cwl-sheet[hidden] {
	display: none;
}

.cwl-sheet__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .45 );
}

.cwl-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -6px 24px rgba( 0, 0, 0, .2 );
	padding: 1.25em 1.25em 1.75em;
	animation: cwl-slide-up .28s ease-out;
}

@keyframes cwl-slide-up {
	from { transform: translateY( 100% ); }
	to { transform: translateY( 0 ); }
}

@media ( min-width: 600px ) {
	.cwl-sheet__panel {
		left: 50%;
		right: auto;
		width: 32em;
		max-width: calc( 100% - 2em );
		transform: translateX( -50% );
	}
	@keyframes cwl-slide-up {
		from { transform: translate( -50%, 100% ); }
		to { transform: translate( -50%, 0 ); }
	}
}

.cwl-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .75em;
}

.cwl-sheet__title {
	margin: 0;
	font-size: 1.2em;
}

.cwl-sheet__close {
	background: none;
	border: 0;
	font-size: 1.8em;
	line-height: 1;
	color: #646970;
	cursor: pointer;
}

.cwl-sheet__list {
	list-style: none;
	margin: 0 0 .5em;
	padding: 0;
}

.cwl-sheet__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .6em 0;
	border-bottom: 1px solid #eee;
}

.cwl-sheet__name {
	font-size: 1em;
}

a.cwl-sheet__name {
	color: #b23b6f;
	text-decoration: underline;
}

a.cwl-sheet__name:hover,
a.cwl-sheet__name:focus {
	color: #8e2c57;
}

.cwl-sheet__remove {
	background: none;
	border: 0;
	color: #b23b6f;
	font-size: .85em;
	cursor: pointer;
	text-decoration: underline;
}

.cwl-sheet__empty {
	color: #646970;
	margin: .5em 0 0;
}

/* --------------------------------------------------------------- save panel */

.cwl-save {
	margin-top: 1em;
	padding: 1em;
	background: #faf3f7;
	border: 1px solid #f0dbe6;
	border-radius: 8px;
}

.cwl-save[hidden] {
	display: none;
}

.cwl-save__prompt {
	margin: 0 0 .6em;
	font-size: .95em;
}

.cwl-save__label {
	display: block;
	font-size: .85em;
	margin-bottom: .25em;
}

.cwl-save__row {
	display: flex;
	gap: .5em;
}

.cwl-save__email {
	flex: 1 1 auto;
	padding: .55em .7em;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
}

.cwl-save__msg {
	margin: .6em 0 0;
	font-size: .9em;
	color: #1f8a4c;
}

.cwl-save__msg.is-error {
	color: #b32d2e;
}

.cwl-sheet__footer {
	margin-top: 1em;
}

.cwl-sheet__note {
	margin: 0;
	font-size: .9em;
	color: #646970;
	font-style: italic;
}

/* Lock background scroll while the sheet is open. */
body.cwl-sheet-open {
	overflow: hidden;
}