/*
 * CreamCouch CN: WordPress's checkout, thank-you and account pages in the
 * storefront's look (D · 色场, the storefront's app/globals.css): paper and
 * ink only, square fields, pill buttons, Archivo for prices. Text passes AA
 * everywhere: ink on paper 17:1, soft on paper 6.5:1, paper on ink 17:1.
 */

:root {
	--cc-paper: var(--wp--preset--color--paper, #f7f3ec);
	--cc-ink: var(--wp--preset--color--ink, #17130f);
	--cc-soft: var(--wp--preset--color--soft, #5c5751);
	--cc-tint: var(--wp--preset--color--tint, #ebe4d8);
	--cc-line: var(--wp--preset--color--line, #ddd4c6);
	--cc-latin: var(--wp--preset--font-family--latin, Archivo, system-ui, sans-serif);
	--cc-swift: cubic-bezier(0.65, 0, 0.25, 1);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* ---------- Header and footer ---------- */

.cc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 72px;
	padding: 0 clamp(18px, 4vw, 36px);
	font-size: 14px;
	letter-spacing: 0.06em;
}

/* The CREAM wordmark as a mask, so it takes the text's colour */
.cc-logo {
	display: block;
	width: 104px;
	aspect-ratio: 1024 / 307;
	background-color: currentColor;
	-webkit-mask: url(cream-logo.png) center / contain no-repeat;
	mask: url(cream-logo.png) center / contain no-repeat;
}

.cc-back,
.cc-footer a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.35s var(--cc-swift);
}

.cc-back:hover,
.cc-back:focus-visible,
.cc-footer a:hover,
.cc-footer a:focus-visible {
	background-size: 100% 1.5px;
}

.cc-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 96px;
	padding: 40px clamp(18px, 4vw, 36px) 48px;
	background: var(--cc-ink);
	color: var(--cc-paper);
	font-size: 14px;
	letter-spacing: 0.06em;
}

.cc-footer p {
	margin: 0;
}

.cc-footer-brand {
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0;
}

.cc-footer-brand span {
	margin-left: 10px;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* ---------- The page ---------- */

.cc-main {
	padding: clamp(16px, 3vw, 40px) clamp(18px, 4vw, 36px) 0;
}

.cc-title {
	margin-bottom: 28px;
}

/* Prices in Archivo, set wide, as on the storefront */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
	font-family: var(--cc-latin);
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* WooCommerce marks required fields red; here they're ink like the label */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: inherit;
	text-decoration: none;
	border: 0;
}

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

.woocommerce form .form-row label {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.5;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--cc-line);
	border-radius: 0;
	background: #fffdf9;
	color: var(--cc-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
}

/* select2 (country, province): the same box as the other fields */
.woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 48px;
	padding-block: 0;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 24px 0 0;
	line-height: 1.5;
	color: var(--cc-ink);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 100%;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
	outline: 2px solid var(--cc-ink);
	outline-offset: 2px;
	border-color: var(--cc-ink);
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--cc-ink);
	border-width: 2px;
}

.woocommerce form .form-row input[type="checkbox"] {
	accent-color: var(--cc-ink);
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

/* ---------- Buttons: the storefront's ink pill ---------- */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--cc-ink);
	color: var(--cc-paper);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.3s var(--cc-swift);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.wp-element-button:hover {
	background: var(--cc-ink);
	color: var(--cc-paper);
	transform: translateY(-2px);
}

.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce #place_order:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--cc-ink);
	outline-offset: 4px;
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.5;
	transform: none;
}

.woocommerce #place_order {
	width: 100%;
	padding-block: 20px;
	font-size: 16px;
}

/* ---------- Notices: a quiet ink tint ---------- */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 0;
	border-radius: 0;
	background: color-mix(in oklab, var(--cc-ink) 7%, var(--cc-paper));
	color: var(--cc-ink);
	font-size: 14px;
	list-style: none;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	color: var(--cc-ink);
}

/* WooCommerce's newer banners come in blue, green and red, with an icon
   on a coloured disc: all ink here */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-default {
	border: 0;
	background: color-mix(in oklab, var(--cc-ink) 7%, var(--cc-paper));
	color: var(--cc-ink);
}

.wc-block-components-notice-banner > svg {
	background-color: var(--cc-ink) !important;
	fill: var(--cc-paper) !important;
}

.wc-block-components-notice-banner a,
.wc-block-components-notice-banner .button {
	color: inherit;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: inherit;
	font-weight: 600;
}

/* ---------- Checkout ---------- */

.woocommerce-checkout h3,
#order_review_heading {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 900;
}

.woocommerce form.login,
.woocommerce form.checkout_coupon,
.woocommerce form.register {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--cc-line);
	border-radius: 0;
}

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--cc-line);
	background: transparent;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td {
	border-top: 1.5px solid var(--cc-ink);
	font-size: 17px;
}

.woocommerce-checkout #payment {
	border-radius: 0;
	background: var(--cc-tint);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: 0;
	background: var(--cc-paper);
	color: var(--cc-ink);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--cc-paper);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--cc-line);
}

/* ---------- My account ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cc-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--cc-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 0;
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.04em;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 10px 18px;
	font-size: 13px;
}

/* ---------- Thank you ---------- */

.wc-block-order-confirmation-status {
	margin-bottom: 8px;
}

.wc-block-order-confirmation-status h1 {
	font-weight: 900;
}

.cc-continue {
	margin: 24px 0 40px;
}

.wc-block-order-confirmation-summary-list {
	padding: 20px 0;
	border-block: 1px solid var(--cc-line);
}

.wc-block-order-confirmation-totals table,
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	border-color: var(--cc-line) !important;
}

.wc-block-order-confirmation-address-wrapper address,
.wc-block-order-confirmation-totals__table {
	border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		transition-duration: 0.01ms !important;
	}
}