/* UAT World — theme styles that theme.json can't express. */

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { -webkit-font-smoothing: antialiased; }

/* ---------- Header ---------- */
.uat-header {
	position: relative;
	/* Solid background on purpose: backdrop-filter would trap the mobile menu overlay inside the header. */
	background: #ffffff;
	border-bottom: 1px solid #e6e6e8;
}
/* The sticky part is the outer header wrapper WordPress puts around the header,
   so it can follow the whole page as you scroll. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(> .uat-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .uat-header) { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part,
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .uat-header) { top: 46px; }
}
@media (max-width: 600px) {
	/* WordPress lets its admin bar scroll away on phones */
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
/* A soft edge once the page scrolls under the menu */
.uat-header { transition: box-shadow 0.2s ease; }
.uat-is-scrolled .uat-header { box-shadow: 0 6px 24px -12px rgba(29, 29, 31, 0.25); }
.uat-header .wp-block-navigation a { color: rgba(0, 0, 0, 0.8); }
.uat-header .wp-block-navigation a:hover { color: #1d1d1f; }

/* ---------- Type helpers ---------- */
.uat-eyebrow { font-size: 18px; letter-spacing: 0.3px; margin: 0; }
.uat-muted { color: #6e6e73; }

/* ---------- Cards ---------- */
.uat-card { border-radius: 28px; overflow: hidden; }
/* Hero art keeps its full height at every width: the image is pre-cropped to the hand,
   so wide screens show all of it and phones only trim the empty sides. */
.wp-block-image.uat-hero-image img {
	display: block; width: 100% !important; height: auto !important;
	aspect-ratio: 2560 / 1304; object-fit: contain; object-position: 50% 100%; border-radius: 0;
	/* On big screens keep the art a sensible size; the mint background fills the sides seamlessly. */
	max-height: min(78vh, 860px);
}
@media (max-width: 700px) {
	.wp-block-image.uat-hero-image img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; }
}
.wp-block-image.uat-about-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; }

/* ---------- Outline button style ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: #1d1d1f;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #1d1d1f; color: #fff; }

/* ---------- WooCommerce product grid as rounded cards ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 !important;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 28px;
	background: #f5f5f7;
	border-radius: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}
.uat-band-mist .woocommerce ul.products li.product,
.uat-band-mist ul.products li.product { background: #ffffff; }
.woocommerce ul.products li.product a img {
	margin: 0 0 8px !important;
	border-radius: 20px;
	background: #ffffff;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--schoolbell); font-weight: 400 !important;
	font-size: 26px !important;
	letter-spacing: 0.2px;
	padding: 0 !important;
	color: #1d1d1f;
}
.woocommerce ul.products li.product .price {
	color: #1d1d1f !important;
	font-size: 17px !important;
	font-weight: 600;
	margin: 0 !important;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .wp-element-button.add_to_cart_button {
	margin-top: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 9999px !important;
	background: #1d1d1f !important;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--schoolbell); font-weight: 400 !important;
	font-size: 19px;
	border: 0;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: #2b4d17 !important; }
.woocommerce span.onsale {
	background: #BCF09D;
	color: #1d1d1f;
	border-radius: 9999px;
	font-weight: 600;
	min-height: 0;
	line-height: 1;
	padding: 8px 12px;
}

/* Empty-state message when a category has no products yet */
.uat-shop-empty {
	border: 1px dashed #86868b;
	border-radius: 28px;
	padding: 40px;
	text-align: center;
	color: #6e6e73;
}

/* ---------- Single product: size selector as pills ---------- */
.woocommerce div.product form.cart .variations select {
	min-height: 44px;
	padding: 0 40px 0 18px;
	border-radius: 9999px;
	border: 1px solid #86868b;
	background-color: #fff;
	font-size: 15px;
}
.woocommerce div.product .product_title { font-family: var(--wp--preset--font-family--schoolbell); font-weight: 400; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: #1d1d1f; font-weight: 600; }
.woocommerce div.product div.images img { border-radius: 28px; }

/* ---------- Playlist ---------- */
.uat-playlist-card { background: #ffffff; border-radius: 28px; padding: 28px; }

/* ---------- Forms ---------- */
.uat-footer input[type="email"],
.woocommerce form .form-row input.input-text {
	border-radius: 980px;
	border: 1px solid #86868b;
	min-height: 44px;
	padding: 0 18px;
}

/* ---------- Measures ---------- */
.uat-measure { max-width: 560px; }
.uat-measure-sm { max-width: 380px; }
.wp-block-group.is-vertical > .uat-measure { align-self: center; }

@media (max-width: 900px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: minmax(0, 1fr); }
	.woocommerce ul.products li.product { padding: 20px; }
}
.uat-hero-image { margin-top: 0 !important; }

/* ---------- WooCommerce block templates (shop, category, related) ---------- */
.wc-block-product-template { gap: 20px !important; }
.wc-block-product-template li.wc-block-product,
.wp-block-woocommerce-product-template li.wc-block-product {
	background: #f5f5f7;
	border-radius: 28px;
	padding: 28px;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image img { border-radius: 20px; overflow: hidden; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--schoolbell) !important; font-weight: 400 !important;
	font-size: 26px !important;
	letter-spacing: 0.2px;
	text-align: left !important;
	text-decoration: none;
	margin: 6px 0 0 !important;
}
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price { text-align: left !important; font-weight: 600; font-size: 17px !important; }
.wc-block-product .wp-block-button,
.wc-block-product .wc-block-components-product-button { margin-top: auto !important; align-items: stretch !important; }
.wc-block-product .wc-block-components-product-button .wp-block-button__link,
.wc-block-product .wp-block-button__link { width: 100%; min-height: 48px; justify-content: center; display: inline-flex; align-items: center; }
.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	min-height: 40px;
	padding: 0 32px 0 16px;
	border-radius: 9999px;
	border: 1px solid #86868b;
	background-color: #fff;
	font-size: 14px;
}
.woocommerce div.product form.cart .qty,
.wc-block-components-quantity-selector { border-radius: 9999px; min-height: 48px; }

/* Hero image sits inside a full-width section with no side padding, so cancel the
   alignfull negative margins (they caused sideways scrolling on phones). */
.wp-block-image.uat-hero-image.alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: none; }

/* Mobile menu overlay: solid background, roomy links */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #ffffff !important;
	color: #1d1d1f !important;
	padding: 24px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 20px; padding-top: 48px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 28px; font-family: var(--wp--preset--font-family--schoolbell); }


/* =========================================================
   Plain-font zones: checkout, policy pages, typed form fields
   ========================================================= */
:root { --uat-plain: var(--wp--preset--font-family--inter); }

/* Anything a shopper types or picks reads in the plain font */
input, textarea, select, .wc-block-components-text-input input, .wc-block-components-combobox input {
	font-family: var(--uat-plain) !important;
	letter-spacing: -0.1px;
}

/* Checkout + order confirmation: whole page body in the plain font (header/footer stay on-brand) */
body.woocommerce-checkout main,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-order-received main,
body.woocommerce-checkout main *:not(.wp-block-post-title):not(h1) {
	font-family: var(--uat-plain) !important;
	letter-spacing: -0.1px;
}
body.woocommerce-checkout main { font-size: 16px; }

/* Info pages (Shipping, Returns, Terms, Privacy): title on-brand, the policy text plain */
.uat-info-content,
.uat-info-content *:not(h2):not(h3):not(h4) {
	font-family: var(--uat-plain) !important;
	letter-spacing: -0.1px;
}
.uat-info-content { font-size: 17px; line-height: 1.65; }
/* Section titles on info pages stay in the art font; only the body text is plain */
.uat-info-content h2, .uat-info-content h3, .uat-info-content h4 {
	font-family: var(--wp--preset--font-family--schoolbell) !important;
	font-weight: 400 !important;
	letter-spacing: 0.2px;
}
.uat-info-content h2 { font-size: 32px; margin-top: 44px; margin-bottom: 8px; }
.uat-info-content h3 { font-size: 24px; margin-bottom: 6px; }
.uat-info-content li { margin-bottom: 6px; }

/* ---------- Contact form ---------- */
.uat-contact { display: flex; flex-direction: column; gap: 16px; max-width: 100% !important; }
.uat-contact__row { display: flex; flex-direction: column; gap: 6px; }
.uat-contact label { font-size: 19px; }
.uat-contact input[type="text"],
.uat-contact input[type="email"],
.uat-contact textarea {
	width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 18px;
	border: 1px solid #86868b; border-radius: 20px; background: #fff; font-size: 16px; color: #1d1d1f;
}
.uat-contact textarea { min-height: 160px; resize: vertical; }
.uat-contact input:focus, .uat-contact textarea:focus { outline: 2px solid #3d6b1f; outline-offset: 1px; }
.uat-contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.uat-contact button { align-self: flex-start; min-height: 48px; padding: 0 28px; border: 0; border-radius: 9999px; background: #1d1d1f; color: #fff; font-family: var(--wp--preset--font-family--schoolbell); font-size: 19px; cursor: pointer; }
.uat-contact button:hover { background: #2b4d17; }
.uat-notice { padding: 16px 20px; border-radius: 20px; background: #f0fbe8; color: #1d1d1f; }
.uat-notice.is-error { background: #fdecea; }

/* =========================================================
   Collage gallery: images packed into one gap-free rectangle
   (layout computed by assets/js/collage.js)
   ========================================================= */
.uat-collage-stage {
	min-height: calc(100vh - 64px);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(24px, 6vw, 96px) !important;
	box-sizing: border-box;
}
.wp-block-gallery.is-style-uat-collage { gap: 0 !important; margin: 0 auto !important; }
.wp-block-gallery.is-style-uat-collage.is-collaged {
	position: relative; display: block !important;
	box-shadow: 0 30px 80px -30px rgba(29, 29, 31, 0.35);
}
.wp-block-gallery.is-style-uat-collage.is-collaged > figure.wp-block-image {
	position: absolute !important; margin: 0 !important; padding: 0;
	max-width: none !important; flex: none !important; box-sizing: border-box;
	overflow: hidden; cursor: zoom-in;
}
.wp-block-gallery.is-style-uat-collage.is-collaged > figure.wp-block-image img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
	border-radius: 0 !important; transition: transform .4s ease;
}
.wp-block-gallery.is-style-uat-collage.is-collaged > figure.wp-block-image:hover img { transform: scale(1.025); }
.wp-block-gallery.is-style-uat-collage.is-collaged figcaption { display: none; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-uat-collage.is-collaged > figure.wp-block-image img { transition: none; }
}
.uat-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,22,.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.uat-lightbox[hidden] { display: none; }
.uat-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.uat-lightbox button { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 9999px; border: 0; background: #fff; color: #1d1d1f; font-size: 26px; cursor: pointer; }
body { font-synthesis: none; }

/* Hero: keep the art in its own layer below the text, never overlapping the buttons */
.uat-hero-image { position: relative; z-index: 0; margin-top: clamp(28px, 4vw, 48px) !important; margin-bottom: 0 !important; }
#top > .wp-block-group { position: relative; z-index: 1; }

/* Homepage gallery section */
.uat-gallery-collage { display: flex; justify-content: center; }
.uat-gallery-collage .wp-block-gallery.is-style-uat-collage { max-width: 100%; }