/*
Theme Name: LEVON
Description: LEVON womenswear storefront, built on Blocksy and WooCommerce.
Template: blocksy
Version: 1.0.3
Text Domain: levon-child
*/

@font-face {
	font-family: "Bodoni Moda";
	src: url("assets/bodoni.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Bodoni Moda";
	src: url("assets/bodoni-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Manrope;
	src: url("assets/manrope.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--levon-white: #fff;
	--levon-paper: #f7f3ed;
	--levon-ink: #171717;
	--levon-sand: #e8dfd2;
	--levon-line: #d8d0c5;
	--levon-muted: #58534d;
	--levon-serif: "Bodoni Moda", Georgia, serif;
	--levon-sans: Manrope, Arial, sans-serif;
	--levon-gutter: clamp(18px, 4.2vw, 64px);
}

.levon-home,
.levon-header,
.levon-footer,
.levon-catalog-empty {
	color: var(--levon-ink);
	font-family: var(--levon-sans);
}

.levon-shell,
.levon-header-inner,
.levon-footer-inner,
.levon-footer-bottom {
	width: min(100% - 2 * var(--levon-gutter), 1440px);
	margin-inline: auto;
}

.levon-header {
	position: relative;
	z-index: 10;
	background: var(--levon-white);
	border-bottom: 1px solid var(--levon-line);
}

.levon-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 76px;
	gap: 24px;
}

.levon-wordmark {
	color: inherit;
	font-family: var(--levon-serif);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: .13em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/* The linked wordmark keeps its existing grid footprint. */
.levon-header .levon-wordmark {
	color: transparent;
}

.levon-header .levon-wordmark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(122px, 36vw, 176px);
	aspect-ratio: 3;
	transform: translate(-50%, -50%);
	background: url("assets/levon-wordmark.png") center / contain no-repeat;
}

.levon-header :where(a),
.levon-footer :where(a) {
	color: inherit;
	text-decoration: none;
}

.levon-header :where(a:hover),
.levon-footer :where(a:hover) {
	text-decoration: underline;
	text-underline-offset: .27em;
}

.levon-desktop-nav,
.levon-desktop-nav .levon-menu,
.levon-header-actions {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 30px);
}

.levon-desktop-nav {
	font-size: 13px;
	font-weight: 600;
}

.levon-menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.levon-header-actions {
	justify-content: flex-end;
	gap: 3px;
}

.levon-mobile-nav { display: none; }
.levon-mobile-toggle,
.levon-header-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	list-style: none;
}
.levon-header summary::-webkit-details-marker { display: none; }

.levon-search-panel,
.levon-mobile-panel {
	position: absolute;
	top: 100%;
	right: var(--levon-gutter);
	z-index: 12;
	padding: 16px;
	background: var(--levon-white);
	border: 1px solid var(--levon-line);
}

.levon-search-panel {
	display: flex;
	align-items: stretch;
	width: min(440px, calc(100vw - 2 * var(--levon-gutter)));
	gap: 8px;
}
.levon-search:not([open]) .levon-search-panel,
.levon-mobile-nav:not([open]) .levon-mobile-panel { display: none; }

.levon-search-panel input { min-width: 0; flex: 1; }
.levon-search-panel button { background: var(--levon-ink); color: var(--levon-white); }

.levon-home {
	padding-block: 24px clamp(52px, 8vw, 108px);
	background: var(--levon-white);
}
.levon-home section[id] { scroll-margin-top: 28px; }

.levon-hero {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
	min-height: clamp(410px, 54vw, 670px);
	background: var(--levon-paper);
}
.levon-hero-copy {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(30px, 4vw, 76px);
}

.levon-kicker {
	margin: 0 0 16px;
	color: var(--levon-ink);
	font: 650 11px/1.5 var(--levon-sans);
	letter-spacing: .17em;
	text-transform: uppercase;
}

.levon-home :where(h1, h2, h3),
.levon-catalog-empty h2 {
	margin: 0;
	color: var(--levon-ink);
	font-family: var(--levon-serif);
	font-weight: 400;
	letter-spacing: -.045em;
}

.levon-home .levon-hero h1 {
	font-size: clamp(38px, 18cqi, 96px);
	line-height: .94;
	overflow-wrap: anywhere;
}
.levon-hero h1 em { font-weight: 400; }

.levon-hero-description,
.levon-section-heading > p,
.levon-universe-inner > p:not(.levon-kicker),
.levon-catalog-empty > p:not(.levon-kicker) {
	color: var(--levon-muted);
	font-size: 15px;
	line-height: 1.75;
}

.levon-hero-description {
	max-width: 33ch;
	margin: 24px 0;
}

.levon-button,
.levon-text-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 46px;
	font: 650 12px/1.45 var(--levon-sans);
	text-decoration: none;
}

.levon-button {
	padding: 10px 15px;
	border: 1px solid var(--levon-ink);
	color: var(--levon-white);
	background: var(--levon-ink);
}
.levon-button:hover,
.levon-button:focus-visible { background: var(--levon-white); color: var(--levon-ink); }

.levon-text-link {
	color: var(--levon-ink);
	text-decoration: underline;
	text-underline-offset: .35em;
}

.levon-home :where(figure) { margin: 0; }
.levon-hero-image,
.levon-look-photo {
	overflow: hidden;
	background: var(--levon-sand);
}
.levon-hero-image { position: relative; min-height: 100%; }
.levon-hero-image img,
.levon-look-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.levon-hero-image img {
	position: absolute;
	inset: 0;
	object-position: center;
}

.levon-collection {
	padding-block: clamp(54px, 9vw, 130px);
}

.levon-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(26px, 4vw, 52px);
}
.levon-section-heading h2,
.levon-universe h2,
.levon-catalog-empty h2 {
	font-size: clamp(43px, 5.5vw, 82px);
	line-height: 1;
}
.levon-section-heading > p { max-width: 32ch; margin: 0; }

.levon-lookbook {
	display: grid;
	grid-template-columns: 1.22fr 1fr .83fr;
	align-items: end;
	gap: clamp(14px, 2.3vw, 32px);
}
.levon-look-photo { aspect-ratio: 3 / 4; }
.levon-look figcaption { padding-top: 12px; }
.levon-home .levon-look h3 {
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1.12;
}
.levon-look figcaption p {
	margin: 4px 0 0;
	color: var(--levon-muted);
	font-size: 13px;
	line-height: 1.55;
}

.levon-universe { background: var(--levon-sand); }
.levon-universe-inner {
	max-width: 740px;
	padding: clamp(30px, 6vw, 90px);
}
.levon-universe-inner > p:not(.levon-kicker) {
	max-width: 43ch;
	margin: 18px 0 9px;
}

.levon-footer {
	padding-block: 50px 18px;
	background: var(--levon-paper);
	border-top: 1px solid var(--levon-line);
}
.levon-footer-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 28px;
}
.levon-footer-brand p,
.levon-footer-links a,
.levon-footer-bottom { font-size: 13px; }
.levon-footer-brand p { margin: 10px 0 0; }
.levon-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.levon-footer-heading {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.levon-footer-bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--levon-line);
}

.levon-catalog-empty {
	margin: 22px 0 62px;
	padding: clamp(28px, 6vw, 84px);
	background: var(--levon-paper);
}
.levon-catalog-empty > p:not(.levon-kicker) { margin: 18px 0 24px; }

.woocommerce :is(.hero-section .page-title, .woocommerce-products-header h1, .product_title, .woocommerce-loop-product__title) {
	color: var(--levon-ink);
	font-family: var(--levon-serif);
	font-weight: 400;
	letter-spacing: -.025em;
}
.post-type-archive-product .hero-section {
	--theme-hero-section-background: var(--levon-paper);
	background: var(--levon-paper);
}
.post-type-archive-product .hero-section .page-title {
	font-size: clamp(43px, 6vw, 84px);
}
.woocommerce :is(.woocommerce-product-gallery, ul.products li.product) img { border-radius: 0; }
.woocommerce ul.products li.product a img { aspect-ratio: 3 / 4; object-fit: cover; }
.woocommerce :is(.summary, .woocommerce-result-count, .woocommerce-ordering) { font-family: var(--levon-sans); }
.woocommerce .summary :is(.single_add_to_cart_button, .button) {
	border-radius: 0;
	background-color: var(--levon-ink);
	color: var(--levon-white);
}
.woocommerce .summary .variations :is(select, button),
.woocommerce .summary .single_add_to_cart_button { min-height: 46px; }

:where(.levon-home, .levon-header, .levon-footer, .levon-catalog-empty) :focus-visible {
	outline: 2px solid var(--levon-ink);
	outline-offset: 3px;
}

@media (max-width: 850px) {
	.levon-header-inner { min-height: 62px; gap: 0; }
	.levon-wordmark { font-size: 34px; }
	.levon-desktop-nav { display: none; }
	.levon-mobile-nav { display: block; }
	.levon-mobile-panel {
		left: var(--levon-gutter);
		display: grid;
		gap: 3px;
	}
	.levon-mobile-panel a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 6px 10px;
		font-size: 16px;
	}
	.levon-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.levon-hero-image {
		order: -1;
		aspect-ratio: 4 / 4.15;
		max-height: 530px;
	}
	.levon-hero-copy { padding: 27px clamp(22px, 5vw, 44px) 34px; }
	.levon-home .levon-hero h1 { font-size: clamp(53px, 10.5vw, 84px); }
	.levon-home { padding-top: 12px; }
	.levon-section-heading { align-items: flex-start; flex-direction: column; }
	.levon-lookbook { grid-template-columns: 1fr 1fr; align-items: start; }
	.levon-look-layers { grid-column: 1 / -1; width: min(76%, 440px); margin: 13px auto 0; }
	.levon-footer-inner { grid-template-columns: 1fr 1fr; }
	.levon-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
	.levon-header .levon-wordmark { font-size: 30px; }
	.levon-hero-copy { padding-inline: 18px; }
	.levon-look figcaption p { font-size: 12px; }
}

.levon-benefit-bar { --icon-bg: #171717; display: flex; align-items: center; justify-content: center; gap: clamp(5px, 2vw, 16px); padding: 7px 4px; background: var(--icon-bg); color: white; font: 600 clamp(8px, 2.5vw, 12px)/1.15 Manrope, Arial, sans-serif; }
.levon-benefit-bar span { display: inline-flex; align-items: center; gap: clamp(3px, 1.2vw, 8px); }
.levon-benefit-bar span + span { border-inline-start: 1px solid #aaa; padding-inline-start: clamp(5px, 2vw, 16px); }
.levon-benefit-bar svg { width: clamp(13px, 4vw, 19px); height: auto; flex: none; }
.levon-header { background: white; }

.levon-header .levon-wordmark { position: relative; }