/*
 * CC Storefront coming soon. The button keeps the theme's .button look; colours and fonts of
 * the dialog come from the theme. The look is in :where() (zero specificity), so any site rule
 * wins. The close button is reset with element selectors so a theme's global button style
 * (e.g. Elementor's kit) does not turn it into a big button.
 */
:where(.cc-coming-soon__button) { cursor: pointer; }
/* WooCommerce greys the add button until a size is chosen; here it always works. */
.cc-coming-soon--form .single_add_to_cart_button.button.disabled { opacity: 1; cursor: pointer; }
:where(html.cc-coming-soon-open) { overflow: hidden; }
:where(dialog.cc-coming-soon-dialog) {
	width: min(520px, 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-coming-soon-dialog)::backdrop { background: rgba(0, 0, 0, 0.6); }
:where(.cc-coming-soon-dialog__header) {
	display: flex; align-items: center; justify-content: space-between; gap: 1em;
	padding: 16px 20px 0;
}
:where(.cc-coming-soon-dialog__title) { margin: 0; font-size: 1.25em; }
dialog.cc-coming-soon-dialog button.cc-coming-soon-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-coming-soon-dialog button.cc-coming-soon-dialog__close::before, dialog.cc-coming-soon-dialog button.cc-coming-soon-dialog__close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor;
}
dialog.cc-coming-soon-dialog button.cc-coming-soon-dialog__close::before { transform: translate(-50%, -50%) rotate(45deg); }
dialog.cc-coming-soon-dialog button.cc-coming-soon-dialog__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:where(.cc-coming-soon-dialog__body) { padding: 12px 20px 20px; }
:where(.cc-coming-soon-dialog__text) { margin: 0 0 1em; }
:where(.cc-coming-soon-dialog__body) > :last-child { margin-bottom: 0; }