/*
 * FuzzPups wide-screen and type refinement — 1.7.2.
 *
 * Loaded last so the same fluid layout, readable type scale and resilient
 * WordPress shortcode markup apply to the storefront, stories and footer.
 */

:root {
	--fuzz-page-max: 1920px;
	--fuzz-wide: 1920px;
	--fuzz-reading: 860px;
	--fuzz-fluid-gutter: clamp(1rem, 3vw, 5rem);
	--fuzz-display: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
	--fuzz-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
	--fuzz-hand: "Kalam", "Segoe Print", cursive;
	--fuzz-type-caption: clamp(0.8125rem, calc(0.79rem + 0.06vw), 0.875rem);
	--fuzz-type-meta: clamp(0.9375rem, calc(0.9rem + 0.08vw), 1rem);
	--fuzz-type-body: clamp(1rem, calc(0.97rem + 0.08vw), 1.08rem);
	--fuzz-type-lede: clamp(1.05rem, calc(1rem + 0.18vw), 1.22rem);
}

html {
	font-size: clamp(16px, calc(15.6px + 0.08vw), 18px);
}

body,
button,
input,
select,
textarea {
	font-family: var(--fuzz-body);
}

:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-query-title) {
	font-family: var(--fuzz-display);
	font-weight: 700;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

.fuzz-page-kicker,
.world-kicker,
.fuzz-eyebrow,
.fuzz-section-number,
.fuzz-index,
.fuzz-product-placeholder__eyebrow,
.world-moment__label,
.world-principle__label,
.world-glimpse figcaption,
.world-housemate__name,
.world-room-label,
.world-closing__company,
.fuzz-category-door__body small,
.fuzz-catalog-placeholder > p {
	font-family: var(--fuzz-hand);
	font-size: var(--fuzz-type-meta);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.3;
	text-transform: none;
}

:where(.fuzz-primary-navigation, .fuzz-header-tools, .wp-element-button, .fuzz-button, .fuzz-text-link, .fuzz-catalog-sort, .fuzz-catalog-chips, .woocommerce) {
	font-family: var(--fuzz-body);
}

:where(.fuzz-main, .fuzz-site-footer) small,
:where(.fuzz-main, .fuzz-site-footer) figcaption {
	font-size: var(--fuzz-type-caption);
	line-height: 1.45;
}

/* Wide screens should feel intentionally composed, not like a tablet canvas
 * floating in the middle of a desktop monitor. Reading copy stays restrained. */
.fuzz-catalog .alignwide,
.fuzz-single-product-shell .woocommerce,
.fuzz-product-story,
.fuzz-product-field-note,
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.fuzz-product-preview-notice,
.single-product .woocommerce-notices-wrapper,
.single-product .woocommerce-breadcrumb,
.fuzz-site-footer > .fuzz-newsletter,
.fuzz-site-footer__grid,
.fuzz-site-footer__bottom {
	max-width: var(--fuzz-page-max) !important;
	width: min(calc(100% - (2 * var(--fuzz-fluid-gutter))), var(--fuzz-page-max));
}

.fuzz-content-shell,
.fuzz-commerce-shell,
.fuzz-service-page,
.fuzz-values__inner {
	max-width: var(--fuzz-page-max);
}

/* Category and product pages ------------------------------------------------ */
.fuzz-catalog__crumbs {
	font-size: var(--fuzz-type-meta);
}

.fuzz-catalog-hero {
	gap: clamp(2.5rem, 4vw, 6rem);
	grid-template-columns: minmax(32rem, 0.82fr) minmax(0, 1.18fr);
	min-height: clamp(600px, 68svh, 800px);
	padding-block: clamp(2.5rem, 4vw, 5rem);
}

.fuzz-catalog-hero__copy {
	max-width: 50rem;
}

.fuzz-catalog-hero h1 {
	font-size: clamp(3rem, 3.6vw, 5rem);
	letter-spacing: -0.05em;
	line-height: 0.96;
	max-width: 14ch;
}

.fuzz-catalog-hero .fuzz-page-lede,
.fuzz-choice-guide__copy > p:last-child,
.fuzz-world-v2 :where(.world-hero__intro, .world-noticing__copy > p:not(.world-kicker), .world-moment__copy > p:last-child, .world-closing__copy > p:not(.world-kicker)) {
	font-size: var(--fuzz-type-lede);
	line-height: 1.65;
}

.fuzz-section-heading h2,
.fuzz-catalog-shop__head h2,
.fuzz-choice-guide h2,
.fuzz-catalog-faq h2 {
	font-size: clamp(2.35rem, 3vw, 4rem);
	letter-spacing: -0.05em;
	line-height: 0.98;
	max-width: 16ch;
}

.fuzz-category-door__body small,
.fuzz-catalog-placeholder > p,
.fuzz-catalog-sort label,
.fuzz-catalog-chips a,
.fuzz-product-card__eyebrow {
	font-size: var(--fuzz-type-meta);
	line-height: 1.35;
}

.fuzz-category-door__body small,
.fuzz-catalog-placeholder > p {
	font-size: var(--fuzz-type-meta);
}

.fuzz-category-door__body strong,
.fuzz-catalog-placeholder h3 {
	font-size: clamp(1.2rem, 1.35vw, 1.55rem);
}

.fuzz-routine-story__pin,
.fuzz-product-story__pin {
	align-items: center;
	gap: clamp(3rem, 5vw, 7rem);
	grid-template-columns: minmax(0, 1.12fr) minmax(25rem, 0.88fr);
	min-height: calc(100svh - var(--fuzz-header-height));
	padding-block: clamp(3rem, 5vw, 5rem);
}

.fuzz-routine-story__content,
.fuzz-product-story__copy {
	max-width: 48rem;
	min-width: 0;
}

.fuzz-routine-story__content > h2,
.fuzz-product-story__copy > h2 {
	font-size: clamp(2.7rem, 3.2vw, 4.2rem);
	letter-spacing: -0.052em;
	line-height: 0.96;
	max-width: 13ch;
}

/* wpautop can add an empty paragraph between the step number and its copy.
 * Make the semantic copy wrapper own column two regardless of that markup. */
.fuzz-routine-step,
.fuzz-product-story__step {
	gap: 0.25rem 1.1rem;
	grid-template-columns: 2.75rem minmax(0, 1fr);
}

.fuzz-routine-step > div,
.fuzz-product-story__step > div {
	grid-column: 2;
	min-width: 0;
}

.fuzz-routine-step > :is(p, br),
.fuzz-product-story__step > :is(p, br) {
	display: none;
}

.fuzz-routine-step > span,
.fuzz-product-story__step > span {
	font-size: var(--fuzz-type-meta);
}

.fuzz-routine-step h3,
.fuzz-product-story__step h3 {
	font-size: clamp(1.3rem, 1.35vw, 1.65rem);
}

.fuzz-routine-step p,
.fuzz-product-story__step p {
	font-size: clamp(0.98rem, calc(0.94rem + 0.1vw), 1.08rem);
	line-height: 1.6;
}

.single-product div.product .product_title {
	font-size: clamp(2.8rem, 3.4vw, 4.5rem);
	line-height: 0.98;
}

.fuzz-product-field-note h2,
.single-product div.product .woocommerce-tabs h2,
.single-product div.product .related h2,
.single-product div.product .upsells h2 {
	font-size: clamp(2.4rem, 3vw, 4rem);
	line-height: 0.98;
}

.fuzz-product-field-note__grid p,
.single-product div.product .woocommerce-tabs,
.single-product #reviews {
	font-size: clamp(0.96rem, calc(0.92rem + 0.1vw), 1.06rem);
}

/* Our World --------------------------------------------------------------- */
.world-hero {
	height: calc(100svh - var(--fuzz-header-height));
	min-height: 680px;
}

.world-hero__copy {
	left: var(--fuzz-fluid-gutter);
	max-width: min(52rem, 43vw);
}

.world-hero__copy h1 {
	font-size: clamp(3.55rem, 4.6vw, 5.75rem);
	letter-spacing: -0.055em;
	line-height: 0.91;
	max-width: 11ch;
}

.world-noticing,
.world-principles,
.world-housemates__stage,
.world-moments__head,
.world-moment {
	max-width: var(--fuzz-page-max);
}

.world-noticing,
.world-principles,
.world-moments__head,
.world-moment,
.world-housemates {
	padding-inline: var(--fuzz-fluid-gutter);
}

.world-noticing__copy h2,
.fuzz-world-v2 h2,
.world-closing h2 {
	font-size: clamp(2.7rem, 3.6vw, 4.7rem);
	letter-spacing: -0.05em;
	line-height: 0.97;
}

.world-moments__head,
.world-principles__head {
	display: block;
}

.world-moments__head {
	padding-bottom: clamp(3rem, 5vw, 5.5rem);
}

.world-moments__head h2,
.world-principles__head h2 {
	max-width: 19ch;
}

.world-moments__head > p:last-child,
.world-principles__head > p:last-child {
	font-size: var(--fuzz-type-lede);
	line-height: 1.65;
	margin-top: 1.4rem;
	max-width: 46rem;
}

.world-moments__stage {
	height: calc(100svh - var(--fuzz-header-height));
	min-height: 680px;
}

.world-moment {
	gap: clamp(3rem, 5vw, 7rem);
	grid-template-columns: minmax(24rem, 0.7fr) minmax(0, 1.3fr);
}

.world-moment__copy {
	max-width: 42rem;
}

.world-moment__count {
	font-size: clamp(3.5rem, 4.4vw, 5.8rem);
	margin-bottom: 1.5rem;
}

.world-moment__label {
	font-size: var(--fuzz-type-meta);
}

.world-moment h3 {
	font-size: clamp(2.55rem, 3.2vw, 4.2rem);
	line-height: 0.98;
}

.world-moment__media {
	height: min(66svh, 760px);
}

.world-principle__label,
.world-glimpse figcaption,
.world-housemate__name,
.world-room-label,
.world-closing__company {
	font-size: var(--fuzz-type-meta);
	line-height: 1.4;
}

/* Homepage type roles: editorial headlines and all card content stay in the
 * commercial print face; handwriting remains a quiet supporting accent. */
.fuzz-routine-heading h2,
.fuzz-routine-heading__story,
.fuzz-routine span,
.fuzz-routine small,
.fuzz-routine em {
	font-family: var(--fuzz-body);
}

.fuzz-routine-heading h2 {
	font-size: clamp(2.7rem, 4.6vw, 5rem) !important;
	line-height: 0.96;
}

.fuzz-routine-heading__story {
	font-size: clamp(1.25rem, calc(1.05rem + 0.85vw), 2.05rem);
	line-height: 1.18;
}

.fuzz-routine span {
	font-size: clamp(1.45rem, calc(1.2rem + 0.8vw), 2rem);
	line-height: 1.08;
	max-width: 12ch;
}

.fuzz-routine small {
	font-size: clamp(0.95rem, calc(0.92rem + 0.08vw), 1rem);
	line-height: 1.58;
	overflow-wrap: normal;
}

.fuzz-routine em {
	font-size: var(--fuzz-type-meta);
	line-height: 1.5;
}

.fuzz-house-instruction,
.fuzz-mega-menu__eyebrow,
.fuzz-mega-menu__preview-head a {
	font-size: var(--fuzz-type-meta);
}

/* Shared utility scale. These selectors intentionally override older local
 * component values so labels of the same job remain the same size everywhere. */
.fuzz-primary-navigation > a,
.fuzz-mega-nav__link,
.fuzz-mega-menu__category,
.fuzz-mega-product h3,
.fuzz-house-card a,
.fuzz-house-fallback a,
.fuzz-product-placeholder a,
.woocommerce-account form label,
.woocommerce-account:not(.logged-in) #customer_login form label,
.woocommerce-account .woocommerce-MyAccount-navigation a,
.fuzz-product-purchase-notes,
.fuzz-product-preview-notice span,
.single-product div.product .woocommerce-product-rating {
	font-size: var(--fuzz-type-meta);
}

.fuzz-mega-product p,
.fuzz-house-card p:not(.fuzz-house-card__eyebrow),
.fuzz-policy-meta,
.fuzz-policy-nav a,
.fuzz-policy-table,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text,
.fuzz-product-field-note__grid p {
	font-size: var(--fuzz-type-caption);
	line-height: 1.55;
}

.fuzz-house .fuzz-eyebrow,
.fuzz-house-card__eyebrow,
.fuzz-product-kicker,
.world-hero__room-label {
	font-family: var(--fuzz-hand);
	font-size: var(--fuzz-type-meta);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.3;
	text-transform: none;
}

.fuzz-house .fuzz-house-instruction,
.fuzz-room-hotspot__label,
.fuzz-house-card__close,
.fuzz-house__mobile-hint,
.fuzz-house__intro-reset,
.fuzz-house .fuzz-house-copy .wp-block-button__link {
	font-size: var(--fuzz-type-meta);
}

.fuzz-house .fuzz-house-intro {
	font-size: var(--fuzz-type-body);
}

/* Newsletter and footer --------------------------------------------------- */
.fuzz-site-footer > .fuzz-newsletter {
	gap: clamp(2.5rem, 4vw, 6rem);
	grid-template-columns: minmax(24rem, 0.8fr) minmax(32rem, 1.2fr);
	padding: clamp(2.75rem, 4vw, 5rem);
}

.fuzz-newsletter h2 {
	font-size: clamp(2.25rem, 2.7vw, 3.4rem);
	line-height: 1.03;
	max-width: 18ch;
}

.fuzz-newsletter__copy > p:not(.fuzz-page-kicker):not(.fuzz-newsletter__fineprint) {
	font-size: clamp(1rem, calc(0.96rem + 0.08vw), 1.08rem);
	line-height: 1.6;
}

.fuzz-newsletter__fineprint,
.fuzz-newsletter__consent,
.fuzz-newsletter__notice,
.fuzz-footer-legal,
.fuzz-site-footer__bottom {
	font-size: var(--fuzz-type-caption);
	line-height: 1.55;
}

.fuzz-footer-links a,
.fuzz-footer-brand p {
	font-size: clamp(0.92rem, calc(0.88rem + 0.08vw), 1rem);
	line-height: 1.55;
}

@media (min-width: 1600px) {
	.fuzz-catalog-products.fuzz-product-feed .products,
	.fuzz-catalog-placeholders {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	.world-moments__head h2 {
		max-width: none;
		white-space: nowrap;
	}
}

@media (max-width: 1100px) {
	.fuzz-catalog-hero {
		grid-template-columns: minmax(22rem, 0.9fr) minmax(0, 1.1fr);
	}

	.fuzz-routine-story__pin,
	.fuzz-product-story__pin {
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.92fr);
	}

	.fuzz-site-footer > .fuzz-newsletter {
		grid-template-columns: minmax(20rem, 0.9fr) minmax(24rem, 1.1fr);
	}
}

@media (max-width: 899px) {
	:root {
		--fuzz-fluid-gutter: clamp(1rem, 4.5vw, 2rem);
	}

	.fuzz-catalog-hero {
		display: flex;
		min-height: 0;
	}

	.fuzz-catalog-hero h1 {
		font-size: clamp(2.8rem, 7.5vw, 4.2rem);
	}

	.fuzz-routine-story__pin,
	.fuzz-product-story__pin,
	.fuzz-site-footer > .fuzz-newsletter {
		grid-template-columns: 1fr;
	}

	.fuzz-routine-story__pin,
	.fuzz-product-story__pin {
		min-height: 0;
	}

	.world-hero__copy {
		max-width: 42rem;
	}

	.world-moments__stage {
		height: auto;
		min-height: 0;
	}

	.world-moment {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}
}

@media (max-width: 620px) {
	html {
		font-size: 16px;
	}

	.fuzz-catalog .alignwide,
	.fuzz-single-product-shell .woocommerce,
	.fuzz-product-story,
	.fuzz-product-field-note,
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .upsells,
	.fuzz-product-preview-notice,
	.single-product .woocommerce-notices-wrapper,
	.single-product .woocommerce-breadcrumb,
	.fuzz-site-footer > .fuzz-newsletter,
	.fuzz-site-footer__grid,
	.fuzz-site-footer__bottom {
		width: calc(100% - 2rem);
	}

	.fuzz-catalog-hero h1 {
		font-size: clamp(2.55rem, 10.5vw, 3.45rem);
		line-height: 0.98;
	}

	.fuzz-section-heading h2,
	.fuzz-catalog-shop__head h2,
	.fuzz-choice-guide h2,
	.fuzz-catalog-faq h2,
	.fuzz-routine-story__content > h2,
	.fuzz-product-story__copy > h2 {
		font-size: clamp(2.25rem, 9.5vw, 3.15rem);
		line-height: 1;
	}

	.fuzz-routine-step,
	.fuzz-product-story__step {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	.world-hero__copy h1 {
		font-size: clamp(2.75rem, 11.4vw, 3.55rem);
		line-height: 0.93;
	}

	.world-noticing__copy h2,
	.fuzz-world-v2 h2,
	.world-closing h2,
	.world-moment h3 {
		font-size: clamp(2.3rem, 9.8vw, 3.25rem);
		line-height: 0.98;
	}

	.world-moment {
		display: block;
	}

	.fuzz-site-footer > .fuzz-newsletter {
		padding: 1.5rem;
	}

	.fuzz-newsletter h2 {
		font-size: clamp(2rem, 9vw, 2.7rem);
	}

	.fuzz-routine-heading__story {
		font-size: clamp(1.2rem, 5.3vw, 1.55rem);
	}
}

@media (max-width: 680px) {
	/* The wider breakpoint turns these cards into a horizontal rail. Reset
	 * both implicit-column properties so small screens get a true stack. */
	.fuzz-routine-grid {
		display: grid !important;
		grid-auto-columns: auto !important;
		grid-auto-flow: row !important;
		grid-template-columns: minmax(0, 1fr) !important;
		margin-inline: 0;
		max-width: none;
		overflow: visible !important;
		padding-inline: 1rem;
		scroll-snap-type: none;
	}

	.fuzz-routine {
		aspect-ratio: auto;
		flex: none;
		min-height: 270px;
		min-width: 0;
		padding: 1.35rem;
		scroll-snap-align: none;
		width: 100%;
	}
}

@media (max-height: 700px) and (min-width: 900px) {
	.fuzz-routine-story__pin,
	.fuzz-product-story__pin,
	.world-moments__stage {
		min-height: 0;
	}

	.fuzz-routine-story__visual,
	.fuzz-product-story__gallery,
	.world-moment__media {
		height: min(62svh, 560px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fuzz-category-door,
	.fuzz-category-door > img,
	.world-glimpse,
	.world-moment,
	.world-moment__friends {
		transition: none !important;
	}
}

/* Mobile Safari can paint content before GSAP applies a from-state. Keeping
 * reveal targets static on phones prevents the brief disappear/reappear flash
 * while preserving the richer desktop sequence. */
@media (max-width: 899px), (pointer: coarse) {
	[data-catalog-reveal],
	[data-catalog-hero-copy],
	[data-catalog-hero-stage],
	[data-world-reveal],
	[data-world-principle],
	[data-world-housemate],
	[data-world-glimpse] {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.world-glimpse,
	.world-moment,
	.world-moment__friends,
	.fuzz-category-door {
		will-change: auto !important;
	}
}
