/* Diwan Canada – Book Card Icons
 * An orange bookmark of three icons (Favourites, Cart, Quick View) in the
 * middle of the cover's right edge. Colours and corners follow the header
 * search button: site orange #C63D32, white icons, 5px corners. Labels use
 * the site's graphite and cream, as in the top bar and footer.
 */

/* The previous heart, Quick View box and cart circle stay in the page (the
   icons press them) but are no longer shown on cards that have the bookmark. */
li.product.dwca-on > .cs-quickview,
li.product.dwca-on > .cs-add-to-cart,
li.product.dwca-on > .dwf-heart {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
li.product:has(> .dwca) > .cs-quickview,
li.product:has(> .dwca) > .cs-add-to-cart,
li.product:has(> .dwca) > .dwf-heart {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* The frame over the visible cover. It clips the bookmark so it slides in
   from the cover's edge, like a bookmark coming out of the book. */
.dwca {
	--dwca-bg: var(--cs-color-button, #C63D32);
	--dwca-bg-hover: var(--cs-color-button-hover, #B33A31);
	--dwca-fg: var(--cs-color-button-contrast, #FFFFFF);
	--dwca-ink: #2D2926;
	--dwca-cream: #FFF8EF;
	--dwca-cell: 40px;
	--dwca-r: var(--cs-layout-elements-border-radius, 5px);
	--dwca-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--cs-thumb-height, 350px);
	display: none;
	overflow: hidden;
	pointer-events: none;
	transform-origin: var(--dwca-ox, 50%) var(--dwca-oy, 50%);
	transition: transform 0.25s;
}
.dwca.is-placed {
	display: block;
}

/* The theme zooms the cover slightly when its picture is hovered; the
   bookmark zooms with it so it stays on the cover's edge. */
@media (hover: hover) {
	.woocommerce ul.products li.product:has(> a:hover) > .dwca {
		transform: scale(1.05);
	}
}

/* The bookmark */
.dwca .dwca__panel {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--dwca-bg);
	border-radius: var(--dwca-r) 0 0 var(--dwca-r);
	box-shadow: -3px 3px 12px rgba(45, 41, 38, 0.28);
	pointer-events: auto;
	visibility: hidden;
	transform: translate(calc(100% + 16px), -50%);
	transition: transform 0.34s var(--dwca-ease), visibility 0s linear 0.34s;
}
li.product:hover > .dwca .dwca__panel,
li.product:focus-within > .dwca .dwca__panel {
	visibility: visible;
	transform: translate(0, -50%);
	transition: transform 0.34s var(--dwca-ease), visibility 0s;
}

/* The three icons */
.dwca button.dwca__btn.dwca__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: visible; /* the theme clips buttons; the label sits outside */
	width: var(--dwca-cell);
	height: var(--dwca-cell);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--dwca-fg);
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.dwca button.dwca__btn.dwca__btn[hidden] {
	display: none;
}
/* thin cream line between icons */
.dwca button.dwca__btn.dwca__btn:not(.is-first) {
	box-shadow: inset 0 1px 0 rgba(255, 248, 239, 0.3);
}
.dwca button.dwca__btn.is-first {
	border-top-left-radius: var(--dwca-r);
}
.dwca button.dwca__btn.is-last {
	border-bottom-left-radius: var(--dwca-r);
}
.dwca button.dwca__btn.dwca__btn:hover,
.dwca button.dwca__btn.dwca__btn:focus-visible {
	background: var(--dwca-bg-hover);
	color: var(--dwca-fg);
}
.dwca button.dwca__btn.dwca__btn:focus {
	outline: none;
}
.dwca button.dwca__btn.dwca__btn:focus-visible {
	outline: 2px solid var(--dwca-cream);
	outline-offset: -5px;
}
.dwca button.dwca__btn.is-disabled.dwca__btn {
	cursor: not-allowed;
}
.dwca button.dwca__btn.is-disabled.dwca__btn:hover {
	background: transparent;
}
.dwca button.dwca__btn.is-disabled .dwca__icon {
	opacity: 0.45;
}

.dwca .dwca__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	pointer-events: none;
}
.dwca .dwca__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
.dwca .dwca__icon .cs-icon {
	display: block;
	font-size: 16px;
	line-height: 1;
	color: inherit;
}
.dwca button.dwca__btn[aria-pressed="true"] .dwca__icon svg path {
	fill: currentColor;
}
.dwca .dwca-pop {
	animation: dwca-pop 0.3s ease;
}
@keyframes dwca-pop {
	50% { transform: scale(1.22); }
}

/* Labels: shown beside each icon, over the cover */
.dwca .dwca__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 9px);
	padding: 6px 10px;
	border-radius: var(--dwca-r);
	background: var(--dwca-ink);
	color: var(--dwca-cream);
	box-shadow: 0 2px 6px rgba(45, 41, 38, 0.25);
	font-family: var(--cs-font-primary-family, "Plus Jakarta Sans"), "Plus Jakarta Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(6px, -50%);
	transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}
.dwca .dwca__label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left-color: var(--dwca-ink);
}
.dwca button.dwca__btn:hover .dwca__label,
.dwca button.dwca__btn:focus-visible .dwca__label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

/* Phones and tablets (no hover): the bookmark stays on the cover, slightly
   smaller, without labels, as the heart and cart did before. */
@media (hover: none) {
	.dwca {
		--dwca-cell: 36px;
	}
	.dwca .dwca__panel {
		visibility: visible;
		transform: translate(0, -50%);
		transition: none;
	}
	.dwca .dwca__label {
		display: none;
	}
	.dwca .dwca__icon,
	.dwca .dwca__icon svg {
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dwca,
	.dwca .dwca__panel,
	.dwca .dwca__label {
		transition-duration: 0.01ms !important;
	}
}