/**
 * Premium footer (inc/footer/premium-footer.php).
 * Loaded only when the "Premium footer: Brand" widget area has content. Selectors start
 * with `html body.ce-premium-footer .site-footer` so they outrank the classic footer's
 * !important rules in style.css and the palette CSS.
 */

:root {
	--ce-footer-accent: #c9a45c;
	--ce-footer-accent-deep: #775a19;
	--ce-footer-page: #fbf9f8;
	--ce-footer-line: #e2ded6;
	--ce-footer-ink: #1b1c1c;
	--ce-footer-ink-soft: #5d5f60;
	--ce-footer-onyx: #141210;
	--ce-footer-onyx-2: #1c1a17;
	--ce-footer-on: #e8e2d6;
	--ce-footer-on-soft: #9d9587;
	--ce-footer-hair: color-mix(in srgb, var(--ce-footer-accent) 24%, transparent);
	--ce-footer-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ce-footer-sans: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
}

html body.ce-premium-footer .site-footer {
	padding: 0 !important;
	background: var(--ce-footer-page) !important;
	color: var(--ce-footer-on);
}

html body.ce-premium-footer .site-footer > .col-full {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.ce-premium-footer .site-footer .ce-footer,
html body.ce-premium-footer .site-footer .ce-footer p,
html body.ce-premium-footer .site-footer .ce-footer li {
	font-family: var(--ce-footer-sans) !important;
}

.ce-footer p,
.ce-footer ul {
	margin: 0;
}

/* Spacing comes from this stylesheet, not WordPress's block layout margins. */
html body.ce-premium-footer .site-footer .ce-footer .is-layout-flow > *,
html body.ce-premium-footer .site-footer .ce-footer .wp-block-group > *,
html body.ce-premium-footer .site-footer .ce-footer .ce-footer__links-body {
	margin-block: 0;
}

.ce-footer ul {
	list-style: none;
	padding: 0;
}

.ce-footer__inner,
.ce-footer__main,
.ce-footer__bottom,
.ce-footer__band {
	max-width: 1320px;
	margin: 0 auto;
}

/* Titles inside widgets (Heading blocks or widget titles) */
html body.ce-premium-footer .site-footer .ce-footer h2,
html body.ce-premium-footer .site-footer .ce-footer h3,
html body.ce-premium-footer .site-footer .ce-footer h4,
html body.ce-premium-footer .site-footer .ce-footer .ce-footer__title {
	margin: 0 0 20px !important;
	padding: 0 !important;
	font-family: var(--ce-footer-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--ce-footer-accent) !important;
}

/* 1. Promise strip ------------------------------------------------------ */

.ce-footer__promise {
	display: grid;
	/* Line the first promise up with the brand column below on wide screens. */
	padding-inline: max(0px, calc((100% - 1320px) / 2 + 28px));
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	border-top: 1px solid var(--ce-footer-line);
	border-bottom: 1px solid var(--ce-footer-line);
	background: var(--ce-footer-page);
}

.ce-footer__promise > .ce-footer__widget {
	position: relative;
	padding: 30px 28px 32px;
}

.ce-footer__promise > .ce-footer__widget + .ce-footer__widget {
	border-left: 1px solid var(--ce-footer-line);
}

.ce-footer__promise > .ce-footer__widget::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 14px;
	background: var(--ce-footer-accent-deep);
	-webkit-mask: var(--ce-promise-icon) center / contain no-repeat;
	mask: var(--ce-promise-icon) center / contain no-repeat;
	--ce-promise-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 4v16M20 4v16M4 8h16M4 16h16M8 8v8M12 8v8M16 8v8'/%3E%3C/svg%3E");
}

.ce-footer__promise > .ce-footer__widget:nth-child(4n+2)::before {
	--ce-promise-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Ccircle cx='15' cy='9' r='5'/%3E%3Ccircle cx='12' cy='14.5' r='5'/%3E%3C/svg%3E");
}

.ce-footer__promise > .ce-footer__widget:nth-child(4n+3)::before {
	--ce-promise-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.ce-footer__promise > .ce-footer__widget:nth-child(4n)::before {
	--ce-promise-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8 8 0 1 1 8 18.8L4 20z'/%3E%3C/svg%3E");
}

html body.ce-premium-footer .site-footer .ce-footer__promise h2,
html body.ce-premium-footer .site-footer .ce-footer__promise h3,
html body.ce-premium-footer .site-footer .ce-footer__promise h4 {
	margin: 0 0 6px !important;
	font-family: var(--ce-footer-serif) !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.3 !important;
	color: var(--ce-footer-ink) !important;
}

html body.ce-premium-footer .site-footer .ce-footer__promise p {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ce-footer-ink-soft) !important;
}

/* 2. Main footer --------------------------------------------------------- */

.ce-footer__dark {
	background: var(--ce-footer-onyx);
	color: var(--ce-footer-on);
}

html body.ce-premium-footer .site-footer .ce-footer__dark a {
	color: inherit;
	text-decoration: none !important;
}

.ce-footer__main {
	display: grid;
	grid-template-columns: 1.35fr repeat(3, minmax(0, 0.7fr)) 1fr;
	gap: 40px;
	padding: 64px 56px 48px;
}

.ce-footer__brand {
	display: grid;
	gap: 18px;
	align-content: start;
}

html body.ce-premium-footer .site-footer a.ce-footer__wordmark {
	font-family: var(--ce-footer-serif) !important;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ce-footer-on);
}

.ce-footer__brand .ce-footer__widget {
	display: grid;
	gap: 18px;
}

html body.ce-premium-footer .site-footer .ce-footer__brand p {
	max-width: 36ch;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--ce-footer-on-soft) !important;
}

html body.ce-premium-footer .site-footer .ce-footer__brand p a:hover {
	color: var(--ce-footer-accent);
}

/* Buttons block (e.g. "Chat with a stylist") */
.ce-footer .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

html body.ce-premium-footer .site-footer .ce-footer .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 1px solid var(--ce-footer-hair);
	border-radius: 999px;
	background: transparent;
	color: var(--ce-footer-on);
	font-family: var(--ce-footer-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: border-color 0.2s, background-color 0.2s;
}

html body.ce-premium-footer .site-footer .ce-footer .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	background: var(--ce-footer-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8 8 0 1 1 8 18.8L4 20z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8 8 0 1 1 8 18.8L4 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body.ce-premium-footer .site-footer .ce-footer .wp-block-button__link:hover,
html body.ce-premium-footer .site-footer .ce-footer .wp-block-button__link:focus-visible {
	border-color: var(--ce-footer-accent);
	background: color-mix(in srgb, var(--ce-footer-accent) 8%, transparent);
}

/* Link columns */
.ce-footer__links ul {
	display: grid;
	gap: 12px;
}

html body.ce-premium-footer .site-footer .ce-footer__links li,
html body.ce-premium-footer .site-footer .ce-footer__house p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--ce-footer-on) !important;
}

html body.ce-premium-footer .site-footer .ce-footer__links a {
	opacity: 0.86;
	transition: opacity 0.2s, color 0.2s;
}

html body.ce-premium-footer .site-footer .ce-footer__links a:hover,
html body.ce-premium-footer .site-footer .ce-footer__links a:focus-visible {
	opacity: 1;
	color: var(--ce-footer-accent);
}

html body.ce-premium-footer .site-footer .ce-footer__toggle {
	all: unset;
	display: block;
	cursor: default;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Address */
.ce-footer__house .ce-footer__widget,
.ce-footer__house .wp-block-group,
.ce-footer__house .wp-block-group__inner-container {
	display: grid;
	gap: 14px;
	align-content: start;
}

html body.ce-premium-footer .site-footer .ce-footer__house p {
	line-height: 1.7 !important;
	opacity: 0.86;
}

html body.ce-premium-footer .site-footer .ce-footer__house p:last-child a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ce-footer-hair);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ce-footer-accent);
}

html body.ce-premium-footer .site-footer .ce-footer__house p:last-child {
	opacity: 1;
}

/* 3. Wordmark band ------------------------------------------------------ */

.ce-footer__band {
	overflow: hidden;
	padding: 0 56px;
	container-type: inline-size;
}

html body.ce-premium-footer .site-footer .ce-footer__band span {
	display: block;
	font-family: var(--ce-footer-serif) !important;
	/* Sized to the name's length so a long site name still fits the width. */
	font-size: min(188px, calc(100cqi / (var(--ce-band-chars, 10) * 0.56)));
	font-weight: 400;
	line-height: 0.8;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--ce-footer-accent) 30%, transparent);
	transform: translateY(14%);
	user-select: none;
}

/* 4. Bottom bar --------------------------------------------------------- */

.ce-footer__dark > .ce-footer__bottom {
	max-width: none;
	padding: 22px max(56px, calc((100% - 1320px) / 2 + 56px));
	border-top: 1px solid var(--ce-footer-hair);
	background: var(--ce-footer-onyx-2);
}

.ce-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	font-size: 12px;
	color: var(--ce-footer-on-soft);
}

.ce-footer__legal,
.ce-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

html body.ce-premium-footer .site-footer .ce-footer__bottom li,
html body.ce-premium-footer .site-footer .ce-footer__bottom p,
html body.ce-premium-footer .site-footer .ce-footer__copyright {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--ce-footer-on-soft) !important;
}

html body.ce-premium-footer .site-footer .ce-footer__legal a:hover {
	color: var(--ce-footer-accent);
}

.ce-footer__payments ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

html body.ce-premium-footer .site-footer .ce-footer__payments li {
	padding: 6px 8px;
	border: 1px solid color-mix(in srgb, var(--ce-footer-on) 18%, transparent);
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 600;
	line-height: 1 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ce-footer-on) !important;
}

.ce-footer__social .wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
}

html body.ce-premium-footer .site-footer .ce-footer__social li {
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 1 !important;
}

html body.ce-premium-footer .site-footer .ce-footer__social a {
	display: flex;
	color: var(--ce-footer-on) !important;
	opacity: 0.8;
	transition: opacity 0.2s, color 0.2s;
}

html body.ce-premium-footer .site-footer .ce-footer__social a:hover,
html body.ce-premium-footer .site-footer .ce-footer__social a:focus-visible {
	opacity: 1;
	color: var(--ce-footer-accent) !important;
}

.ce-footer__social svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ce-footer__social .wp-block-social-link-label,
.ce-footer__social .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

html body.ce-premium-footer .site-footer .ce-footer__credit {
	width: 100%;
	text-align: center;
	font-size: 11px !important;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--ce-footer-on-soft) 70%, transparent) !important;
}

html body.ce-premium-footer .site-footer .ce-footer__credit a:hover {
	color: var(--ce-footer-accent);
}

.ce-footer a:focus-visible,
.ce-footer button:focus-visible {
	outline: 2px solid var(--ce-footer-accent);
	outline-offset: 3px;
}

/* Tablet ---------------------------------------------------------------- */

@media (max-width: 1100px) {
	.ce-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 48px;
	}

	.ce-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Phone ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ce-footer__promise {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}

	.ce-footer__promise > .ce-footer__widget {
		padding: 22px 18px;
	}

	.ce-footer__promise > .ce-footer__widget + .ce-footer__widget {
		border-left: 0;
	}

	.ce-footer__promise > .ce-footer__widget:nth-child(even) {
		border-left: 1px solid var(--ce-footer-line);
	}

	.ce-footer__promise > .ce-footer__widget:nth-child(n+3) {
		border-top: 1px solid var(--ce-footer-line);
	}

	html body.ce-premium-footer .site-footer .ce-footer__promise h2,
	html body.ce-premium-footer .site-footer .ce-footer__promise h3,
	html body.ce-premium-footer .site-footer .ce-footer__promise h4 {
		font-size: 15px !important;
	}

	.ce-footer__main {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 44px 20px 12px;
	}

	.ce-footer__brand {
		padding-bottom: 32px;
	}

	.ce-footer__links {
		border-top: 1px solid var(--ce-footer-hair);
	}

	html body.ce-premium-footer .site-footer .ce-footer__links h2,
	html body.ce-premium-footer .site-footer .ce-footer__links h3,
	html body.ce-premium-footer .site-footer .ce-footer__links h4,
	html body.ce-premium-footer .site-footer .ce-footer__links .ce-footer__title {
		margin: 0 !important;
	}

	html body.ce-premium-footer .site-footer .ce-footer__toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20px 0;
		cursor: pointer;
	}

	html body.ce-premium-footer .site-footer .ce-footer__toggle::after {
		display: inline-block !important;
		content: "+";
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 0;
		color: var(--ce-footer-on-soft);
	}

	html body.ce-premium-footer .site-footer .ce-footer__toggle[aria-expanded="true"]::after {
		content: "–";
	}

	.ce-footer__links-body {
		padding-bottom: 22px;
	}

	.ce-footer__house {
		padding: 24px 0 32px;
		border-top: 1px solid var(--ce-footer-hair);
	}

	.ce-footer__band {
		padding: 0 20px;
	}


	.ce-footer__dark > .ce-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px 20px 26px;
	}

	html body.ce-premium-footer .site-footer .ce-footer__credit {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ce-footer * {
		transition: none !important;
	}
}

/* The address column spaces its lines with a grid gap, so its title needs less margin. */
html body.ce-premium-footer .site-footer .ce-footer__house h2,
html body.ce-premium-footer .site-footer .ce-footer__house h3,
html body.ce-premium-footer .site-footer .ce-footer__house h4 {
	margin-bottom: 6px !important;
}