/*
 * CC Storefront basket toast. Neutral look in :where() (zero specificity) so any site rule
 * wins; buttons are reset with element selectors against global theme button styles.
 */
: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__view {
	width: auto; min-height: 0; margin: 0; padding: 10px 14px; border: 1px solid currentColor; border-radius: 0;
	background: none; box-shadow: none; color: inherit; font: inherit; font-size: 0.8125em; cursor: pointer; white-space: nowrap;
}
.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); }
/* Card tiles: the dropdown stays in the form but out of sight. */
.cc-loop-cart--tiles .cc-loop-cart__select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
:where(.cc-loop-cart__tiles) { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-loop-cart__tiles button.cc-swatch-btn {
	min-width: 44px; min-height: 40px; margin: 0; padding: 0 10px; border: 1px solid rgba(127, 127, 127, 0.4); border-radius: 0;
	background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer;
}
.cc-loop-cart__tiles button.cc-swatch-btn.is-active { border-color: currentColor; }
.cc-loop-cart__tiles button.cc-swatch-btn:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
:where(.cc-loop-cart__tiles.is-missing) { outline: 1px solid #c62828; outline-offset: 3px; }

/* Quantity buttons: fixed-size − / + around the number (no browser spinner arrows). */
:where(.cc-qty) { display: inline-flex; align-items: stretch; border: 1px solid rgba(127, 127, 127, 0.4); }
.cc-qty button.cc-qty__step {
	width: 36px; min-height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
}
.cc-qty button.cc-qty__step:disabled { opacity: 0.35; cursor: default; }
.cc-qty input.qty { width: 44px !important; min-height: 0; margin: 0; padding: 0; border: 0 !important; background: none; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.cc-qty input.qty::-webkit-outer-spin-button, .cc-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(.cc-qty__value) { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; }
:where(.cc-mini-qty) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-mini-qty.is-loading { opacity: 0.5; pointer-events: none; }

/* The toast replaces WooCommerce's "View basket" link after an add. */
.cc-loop-cart ~ .added_to_cart, .cc-loop-cart .added_to_cart, form.cart .added_to_cart { display: none !important; }
@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; } }

/*
 * Button icon (cc-add-icons): a bag icon after "Add to basket"; while adding it turns into a
 * spinner, then a tick, then the bag again, in the same spot so the text never moves. A site
 * sets its own icon with --cc-add-icon (a url() used as a mask) and the size with
 * --cc-add-icon-size.
 */
:root {
	--cc-add-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
	--cc-add-icon-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
	--cc-add-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
}
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button::before {
	content: ""; order: 1; flex: none;
	width: var(--cc-add-icon-size, 1.3em); height: var(--cc-add-icon-size, 1.3em);
	/* Taller than the text: doesn't make the button taller. */
	margin-block: calc((1em - var(--cc-add-icon-size, 1.3em)) / 2);
	background-color: currentColor;
	-webkit-mask: var(--cc-add-icon) no-repeat center / contain; mask: var(--cc-add-icon) no-repeat center / contain;
	animation: cc-add-icon-in 0.2s ease-out;
}
/* While adding the button stays as it is (WooCommerce fades it); the spinner says it's busy. */
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button.loading { opacity: 1; }
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button.loading::before {
	-webkit-mask-image: var(--cc-add-icon-spinner); mask-image: var(--cc-add-icon-spinner);
	animation: cc-add-icon-in 0.15s ease-out, cc-add-spin 0.7s linear infinite;
}
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button.added::before {
	-webkit-mask-image: var(--cc-add-icon-tick); mask-image: var(--cc-add-icon-tick);
	animation: cc-add-tick-in 0.25s ease-out;
}
/* WooCommerce's own spinner and tick (after the text) aren't needed. */
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button:is(.loading, .added)::after { content: none; display: none; }
@keyframes cc-add-icon-in { from { opacity: 0; } }
@keyframes cc-add-tick-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes cc-add-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button::before,
	.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button:is(.loading, .added)::before { animation: none; }
}

/*
 * Notify me (notify_me): a sold-out choice keeps the add button, reading Notify me with a bell
 * (--cc-notify-icon, with the button icon on); quantity is hidden and WooCommerce's own
 * sign-up form is not shown. The button stays clickable though WooCommerce marks it disabled.
 */
:root {
	--cc-notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
}
.cc-add-icons :is(.single_add_to_cart_button, .cc-loop-cart__button).button.cc-notify-button::before {
	-webkit-mask-image: var(--cc-notify-icon); mask-image: var(--cc-notify-icon);
}
.cc-notify-button.button:is(.disabled, :disabled) { opacity: 1 !important; cursor: pointer !important; }
.cc-notify-active .quantity { display: none !important; }
.cc-notify-me .wc_bis_form { display: none !important; }
:where(html.cc-notify-open) { overflow: hidden; }
:where(dialog.cc-notify-dialog) {
	width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
	border: 1px solid rgba(127, 127, 127, 0.3); color: CanvasText; background: Canvas; overflow: auto;
}
:where(dialog.cc-notify-dialog)::backdrop { background: rgba(0, 0, 0, 0.6); }
:where(.cc-notify-dialog__header) { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 16px 20px 0; }
:where(.cc-notify-dialog__title) { margin: 0; font-size: 1.25em; }
dialog.cc-notify-dialog button.cc-notify-dialog__close {
	position: relative; flex: none; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; cursor: pointer;
}
dialog.cc-notify-dialog button.cc-notify-dialog__close::before, dialog.cc-notify-dialog button.cc-notify-dialog__close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor;
}
dialog.cc-notify-dialog button.cc-notify-dialog__close::before { transform: translate(-50%, -50%) rotate(45deg); }
dialog.cc-notify-dialog button.cc-notify-dialog__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:where(.cc-notify-dialog__body) { padding: 12px 20px 20px; }
:where(.cc-notify-dialog__text) { margin: 0 0 1em; }
:where(.cc-notify-dialog__form) { display: flex; flex-direction: column; gap: 10px; }
:where(.cc-notify-dialog__form[hidden], .cc-notify-dialog__text[hidden]) { display: none; }
:where(.cc-notify-dialog__input) { width: 100%; }
:where(.cc-notify-dialog__submit) { width: 100%; }
:where(.cc-notify-dialog__submit.loading) { opacity: 0.6; }
:where(.cc-notify-dialog__message) { margin: 1em 0 0; }
:where(.cc-notify-dialog__form[hidden] + .cc-notify-dialog__result .cc-notify-dialog__message) { margin-top: 0; }
:where(.cc-notify-dialog__message.is-error) { color: #c62828; }