/*
 * Nicholle storefront styling.
 * Brings every WooCommerce surface onto the brand design system:
 * shop, single product, cart, checkout, order received, and account.
 *
 * Brand palette, and nothing outside it:
 *   Primary   #2B3A67   navy
 *   Secondary #0171E4   blue
 *   Text      #141414
 *   Accent    #ED4749   red
 *   Cream     #E8E8E8
 *   White     #FFFFFF
 * Greys are alpha values of Text, so no off palette hue is ever introduced.
 */

:root {
	--nch-primary: #2b3a67;
	--nch-secondary: #0171e4;
	--nch-text: #141414;
	--nch-accent: #ed4749;
	--nch-cream: #e8e8e8;
	--nch-white: #ffffff;
	--nch-body: rgba(20, 20, 20, 0.7);
	--nch-muted: rgba(20, 20, 20, 0.5);
	--nch-line: rgba(20, 20, 20, 0.12);
	--nch-radius-card: 32px;
	--nch-radius-field: 30px;
	--nch-radius-pill: 980px;
	--nch-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Shell ---------- */

.woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-order,
.woocommerce-account .woocommerce,
.woocommerce-page .site-main {
	font-family: var(--nch-font);
	color: var(--nch-body);
}

.woocommerce-page .site-main > .woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-order {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Nothing on this site shouts. */
.woocommerce,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6,
.woocommerce a,
.woocommerce button,
.woocommerce input,
.woocommerce label,
.woocommerce span,
.woocommerce p,
.wc-block-components-title,
.wc-block-components-button,
.wc-block-components-checkout-step__title,
.woocommerce-breadcrumb,
.woocommerce ul.order_details li,
.product_meta {
	text-transform: none !important;
	letter-spacing: normal;
	font-family: var(--nch-font);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.woocommerce-order h2,
.woocommerce div.product .product_title {
	color: var(--nch-text);
	letter-spacing: -0.4px;
	line-height: 1.12;
}

/* ---------- Single product ---------- */

.woocommerce div.product .product_title {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--nch-primary) !important;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.5px;
	text-decoration: none;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--nch-muted) !important;
	font-size: 22px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--nch-body);
	font-size: 19px;
	line-height: 1.5;
	max-width: 60ch;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--nch-muted);
	font-weight: 500;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--nch-text);
	border-bottom: 2px solid var(--nch-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .entry-content h3,
.woocommerce #tab-description h3 {
	font-size: 24px;
	font-weight: 600;
	margin-top: 28px;
}

.woocommerce div.product .entry-content ul,
.woocommerce #tab-description ul {
	color: var(--nch-body);
	line-height: 1.9;
}

.woocommerce div.product .product_meta {
	color: var(--nch-muted);
	font-size: 14px;
	border-top: 1px solid var(--nch-line);
	padding-top: 18px;
	margin-top: 24px;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
	border-radius: var(--nch-radius-card);
}

.woocommerce span.onsale,
.wc-block-components-product-badge {
	background: var(--nch-accent);
	border: 0;
	border-radius: var(--nch-radius-pill);
	color: var(--nch-white);
	font-family: var(--nch-font);
	font-weight: 500;
	min-height: 0;
	line-height: 1.4;
	padding: 6px 16px;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	color: var(--nch-muted);
	font-size: 15px;
}

.woocommerce-breadcrumb a:hover {
	color: var(--nch-secondary);
}

/* ---------- Buttons: brand only, pill only ---------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product a.button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--nch-secondary) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--nch-radius-pill) !important;
	color: var(--nch-white) !important;
	font-family: var(--nch-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	padding: 14px 30px;
	text-shadow: none;
	text-transform: none !important;
	transition: background 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--nch-primary) !important;
	color: var(--nch-white) !important;
}

.woocommerce a.button.wc-backward,
.wc-block-components-button--outlined {
	background: transparent !important;
	border: 1px solid var(--nch-text) !important;
	color: var(--nch-text) !important;
}

.woocommerce a.button.wc-backward:hover,
.wc-block-components-button--outlined:hover {
	background: var(--nch-text) !important;
	color: var(--nch-white) !important;
}

/* ---------- Fields ---------- */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.select2-container .select2-selection--single {
	background: var(--nch-cream);
	border: 0;
	border-radius: var(--nch-radius-field);
	color: var(--nch-text);
	font-family: var(--nch-font);
	font-size: 16px;
	padding: 14px 16px;
	box-shadow: none;
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: 2px solid var(--nch-secondary);
	outline-offset: 1px;
}

.wc-block-components-text-input label,
.woocommerce form .form-row label {
	color: var(--nch-body);
	font-family: var(--nch-font);
	font-size: 15px;
}

/* ---------- Card surfaces ---------- */

.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__totals-footer,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce ul.order_details,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background: var(--nch-cream);
	border: 0;
	border-radius: var(--nch-radius-card);
	padding: 32px;
	list-style: none;
}

.wc-block-components-order-summary-item,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--nch-line);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--nch-text);
	font-family: var(--nch-font);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

/* ---------- Notices ---------- */

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	background: var(--nch-cream);
	border: 0;
	border-left: 3px solid var(--nch-secondary);
	border-radius: var(--nch-radius-field);
	color: var(--nch-text);
	font-family: var(--nch-font);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--nch-secondary);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: var(--nch-cream);
	border-left-color: var(--nch-accent);
	color: var(--nch-text);
}

.woocommerce-error::before {
	color: var(--nch-accent);
}

/* ---------- Order received ---------- */

.woocommerce-order .woocommerce-thankyou-order-received {
	color: var(--nch-text);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.4px;
}

.woocommerce ul.order_details li {
	border-right: 1px solid var(--nch-line);
	color: var(--nch-muted);
	font-size: 13px;
}

.woocommerce ul.order_details li strong {
	color: var(--nch-text);
	font-size: 17px;
	font-weight: 600;
}

/* ---------- Next steps block ---------- */

.nmb-next {
	background: var(--nch-white);
	border-radius: var(--nch-radius-card);
	font-family: var(--nch-font);
	margin: 0 auto 56px;
	max-width: 1200px;
	padding: 0 0 8px;
}

.nmb-next__eyebrow {
	color: var(--nch-accent);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 12px;
}

.nmb-next__title {
	color: var(--nch-text);
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.28px;
	line-height: 1.07;
	margin: 0 0 16px;
}

.nmb-next__sub {
	color: var(--nch-body);
	font-size: 21px;
	line-height: 1.48;
	margin: 0 0 40px;
	max-width: 640px;
}

.nmb-next__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
}

.nmb-next__step {
	display: flex;
	flex: 1 1 28%;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	min-width: 240px;
}

.nmb-next__num {
	color: rgba(20, 20, 20, 0.2);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1;
}

.nmb-next__text {
	color: var(--nch-body);
	font-size: 15px;
	line-height: 1.5;
}

.nmb-next__booking {
	background: var(--nch-cream);
	border-radius: var(--nch-radius-card);
	padding: 48px;
}

.nmb-next__booking-title {
	color: var(--nch-text);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.15;
	margin: 0 0 8px;
}

.nmb-next__booking-note {
	color: var(--nch-muted);
	font-size: 17px;
	margin: 0 0 28px;
}

@media (max-width: 767px) {
	.woocommerce div.product .product_title {
		font-size: 34px;
	}

	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 28px;
	}

	.nmb-next__title {
		font-size: 36px;
	}

	.nmb-next__sub {
		font-size: 18px;
		margin-bottom: 32px;
	}

	.nmb-next__steps {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 28px;
	}

	.nmb-next__step {
		flex: 1 1 100%;
		width: 100%;
	}

	.nmb-next__booking {
		padding: 28px 22px;
	}

	.nmb-next__booking-title {
		font-size: 26px;
	}

	.woocommerce-page .site-main > .woocommerce,
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	.woocommerce-order {
		padding-inline: 16px;
	}

	.wc-block-components-sidebar,
	.wp-block-woocommerce-checkout-order-summary-block,
	.woocommerce-order-details,
	.woocommerce-customer-details {
		padding: 24px;
	}
}