/*
 * CC Storefront wishlist: neutral styling in :where() so any site rule wins. The buttons are
 * reset with element + attribute selectors so a theme's or Elementor kit's global button style
 * (background, border, hover colour) does not restyle them; sites style them with
 * button.cc-wishlist-btn[aria-pressed] or more specific selectors.
 */
:where(.cc-wishlist-btn) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; }
button.cc-wishlist-btn[aria-pressed],
button.cc-wishlist-btn[aria-pressed]:hover,
button.cc-wishlist-btn[aria-pressed]:focus {
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0; padding: 0; border: 1px solid rgba(127, 127, 127, 0.4); border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; line-height: 1; text-transform: none; letter-spacing: 0;
}
.cc-wishlist-btn .cc-wishlist-heart { display: block; flex: none; }
button.cc-wishlist-btn[aria-pressed]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
button.cc-wishlist-btn:disabled { opacity: 0.6; cursor: progress; }
.cc-wishlist-heart { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.2s ease, transform 0.2s ease; }
.cc-wishlist-btn[aria-pressed="true"] .cc-wishlist-heart { fill: currentColor; }
.cc-wishlist-btn:active .cc-wishlist-heart { transform: scale(0.88); }

/* Product cards: the heart in the top corner of the card. */
li.product:has(> .cc-wishlist-btn--loop) { position: relative; }
:where(.cc-wishlist-btn--loop) { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; }
button.cc-wishlist-btn--loop[aria-pressed],
button.cc-wishlist-btn--loop[aria-pressed]:hover,
button.cc-wishlist-btn--loop[aria-pressed]:focus { border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; }

/* Header link: heart with a count bubble (hidden at 0). */
:where(.cc-wishlist-link) { position: relative; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
:where(.cc-wishlist-count) { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; }
.cc-wishlist-count[data-count="0"] { display: none; }

/* The list. */
:where(.cc-wishlist__items) { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
:where(.cc-wishlist__item) { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; padding: 16px; border: 1px solid rgba(127, 127, 127, 0.25); }
:where(.cc-wishlist__image img) { display: block; width: 96px; height: 96px; object-fit: cover; }
:where(.cc-wishlist__info) { display: grid; justify-items: start; gap: 4px; min-width: 0; }
:where(.cc-wishlist__actions) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.cc-wishlist button.cc-wishlist__remove,
.cc-wishlist button.cc-wishlist__remove:hover,
.cc-wishlist button.cc-wishlist__remove:focus {
	min-height: 0; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; font-size: 0.875em; text-decoration: underline; text-transform: none; letter-spacing: 0; cursor: pointer; opacity: 0.7;
}
.cc-wishlist__empty { display: none; }
.cc-wishlist.is-empty .cc-wishlist__empty { display: block; }
.cc-wishlist-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
	:where(.cc-wishlist__item) { grid-template-columns: 80px minmax(0, 1fr); }
	:where(.cc-wishlist__image img) { width: 80px; height: 80px; }
	:where(.cc-wishlist__actions) { grid-column: 1 / -1; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .cc-wishlist-heart { transition: none; } }

/* Drawer (setting `drawer`): slides in from the right over a dimmed page. */
.cc-wishlist-drawer { position: fixed; inset: 0; z-index: 99999; visibility: hidden; pointer-events: none; transition: visibility 0.3s; }
.cc-wishlist-drawer.is-open { visibility: visible; pointer-events: auto; }
:where(.cc-wishlist-drawer__overlay) { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.cc-wishlist-drawer.is-open .cc-wishlist-drawer__overlay { opacity: 1; }
:where(.cc-wishlist-drawer__panel) {
	position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
	width: min(420px, 100vw); background: Canvas; color: CanvasText; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25);
	transform: translateX(100%); transition: transform 0.3s ease; outline: none;
}
.cc-wishlist-drawer.is-open .cc-wishlist-drawer__panel { transform: none; }
:where(.cc-wishlist-drawer__head) { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(127, 127, 127, 0.25); }
:where(.cc-wishlist-drawer__title) { font-weight: 700; }
/* Outside :where(), so a theme's paragraph margins do not push the header or status lines around. */
.cc-wishlist-drawer .cc-wishlist-drawer__title, .cc-wishlist-drawer .cc-wishlist-drawer__loading, .cc-wishlist-drawer .cc-wishlist-drawer__error { margin: 0; }
.cc-wishlist-drawer button.cc-wishlist-drawer__close,
.cc-wishlist-drawer button.cc-wishlist-drawer__close:hover,
.cc-wishlist-drawer button.cc-wishlist-drawer__close:focus {
	position: relative; flex: none; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; color: inherit; cursor: pointer;
}
.cc-wishlist-drawer button.cc-wishlist-drawer__close::before, .cc-wishlist-drawer button.cc-wishlist-drawer__close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor;
}
.cc-wishlist-drawer button.cc-wishlist-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cc-wishlist-drawer button.cc-wishlist-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:where(.cc-wishlist-drawer__body) { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px; }
:where(.cc-wishlist-drawer__loading, .cc-wishlist-drawer__error) { padding: 40px 0; text-align: center; opacity: 0.7; }
:where(.cc-wishlist-drawer__footer) { padding: 20px 24px 24px; border-top: 1px solid rgba(127, 127, 127, 0.25); }
:where(.cc-wishlist-drawer__button) { display: block; padding: 14px 16px; border: 1px solid currentColor; color: inherit; text-align: center; text-decoration: none; }
.cc-wishlist-drawer__panel:has(.cc-wishlist.is-empty) .cc-wishlist-drawer__footer { display: none; }
html.cc-wishlist-drawer-open { overflow: hidden; }
/* Compact rows in the drawer: image and details, the add-to-basket form across the bottom. */
:where(.cc-wishlist--drawer .cc-wishlist__items) { gap: 0; }
:where(.cc-wishlist--drawer .cc-wishlist__item) { grid-template-columns: 88px minmax(0, 1fr); gap: 12px 16px; padding: 18px 0; border: 0; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
:where(.cc-wishlist--drawer .cc-wishlist__image img) { width: 88px; height: 88px; }
:where(.cc-wishlist--drawer .cc-wishlist__actions) { grid-column: 1 / -1; justify-content: stretch; }
:where(.cc-wishlist--drawer .cc-wishlist__actions > *) { flex: 1; }
:where(.cc-wishlist--drawer .cc-wishlist__empty) { padding: 40px 0; text-align: center; }
:where(.cc-wishlist--drawer .cc-wishlist__note) { padding: 16px 0; }
@media (prefers-reduced-motion: reduce) { .cc-wishlist-drawer, .cc-wishlist-drawer__overlay, .cc-wishlist-drawer__panel { transition: none; } }

/* Toast: the same rules as Add to basket's (so it also works with that module off). */
:where(.cc-basket-toast) {
	position: fixed; right: 16px; bottom: 16px; z-index: 100000;
	display: flex; align-items: center; gap: 16px; width: min(420px, calc(100vw - 32px));
	padding: 16px 16px 16px 20px; background: Canvas; color: CanvasText;
	border: 1px solid rgba(127, 127, 127, 0.3); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.cc-basket-toast.is-visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
:where(.cc-basket-toast__body) { flex: 1; min-width: 0; }
:where(.cc-basket-toast__title) { margin: 0 0 4px; font-weight: 700; }
:where(.cc-basket-toast__text) { margin: 0; font-size: 0.875em; opacity: 0.8; }
:where(.cc-basket-toast__actions) { display: flex; align-items: center; gap: 8px; }
.cc-basket-toast button.cc-basket-toast__close {
	position: relative; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; color: inherit; cursor: pointer; opacity: 0.6;
}
.cc-basket-toast button.cc-basket-toast__close::before, .cc-basket-toast button.cc-basket-toast__close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor;
}
.cc-basket-toast button.cc-basket-toast__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cc-basket-toast button.cc-basket-toast__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 767px) { :where(.cc-basket-toast) { left: 16px; right: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .cc-basket-toast { transition: none; } }