/*
 * The "coming soon" page visitors see without the private link (WooCommerce > Settings > Site visibility).
 * WooCommerce draws it with block-theme layout rules that Kadence doesn't have, so the header, logo and title land off
 * centre. These rules put it on the store's look: logo left, Log in right, the title centred in the display face.
 * WooCommerce's sample social links (linkedin.com, instagram.com, facebook.com) and its "Built with" line are hidden.
 */

.woocommerce-coming-soon-default .coming-soon-cover {
	padding: 0 !important;
	background: #fff;
	color: var(--jkd-text);
}

.woocommerce-coming-soon-default .wp-block-cover__inner-container,
.woocommerce-coming-soon-default .woocommerce-coming-soon-banner-container,
.woocommerce-coming-soon-default .woocommerce-coming-soon-header,
.woocommerce-coming-soon-default .woocommerce-coming-soon-header .alignwide {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-banner-container {
	gap: 0;
}

/* Header: the same edges and divider as the store's header. */
.woocommerce-coming-soon-default .woocommerce-coming-soon-header {
	padding: 18px 0 !important;
	border-bottom: 1px solid var(--jkd-line);
	background: #fff;
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-header > .wp-block-group__inner-container {
	box-sizing: border-box;
	max-width: var(--global-content-width, 1920px);
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-header .is-content-justification-space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.woocommerce-coming-soon-default .wp-block-site-logo img {
	width: auto;
	height: 40px;
	max-width: none;
}

.woocommerce-coming-soon-default .wp-block-site-title,
.woocommerce-coming-soon-default .woocommerce-coming-soon-powered-by-woo,
.woocommerce-coming-soon-default .wp-block-social-links {
	display: none;
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-header-login .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--jkd-black);
	border-radius: 4px;
	background: transparent;
	color: var(--jkd-black) !important; /* over WooCommerce's link colour on the cover */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-header-login .wp-block-button__link:hover,
.woocommerce-coming-soon-default .woocommerce-coming-soon-header-login .wp-block-button__link:focus-visible {
	border-color: var(--jkd-red);
	background: var(--jkd-red);
	color: #fff !important;
}

/* The message: centred in what's left of the screen. */
.woocommerce-coming-soon-default .woocommerce-coming-soon-banner-container > .is-vertical {
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 48px var(--global-content-edge-padding, 1.5rem) 96px;
	text-align: center;
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-banner {
	max-width: 14ch;
	margin: 0 auto;
	color: var(--jkd-black);
	font-family: var(--jkd-display);
	font-size: clamp(2.75rem, 7vw, 6rem);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
}

/* The brand's red slash above the title. */
.woocommerce-coming-soon-default .woocommerce-coming-soon-banner::before {
	content: "";
	display: block;
	width: 64px;
	height: 8px;
	margin: 0 auto 28px;
	background: var(--jkd-red);
	transform: skewX(-24deg);
}

.woocommerce-coming-soon-default .woocommerce-coming-soon-banner + p {
	max-width: 36ch;
	margin: 20px auto 0;
	color: var(--jkd-muted);
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.woocommerce-coming-soon-default .wp-block-site-logo img {
		height: 32px;
	}
}