/*
 * Nanny Goat Pottery: runtime styles that theme.json cannot express.
 * Design tokens (color/type/spacing) live in theme.json; this file is only for
 * behavior: the top banner, sold-out treatment, image hover swap, load fade-in,
 * and the newsletter popup.
 */

:root {
	--ng-taupe: #999790;
	--ng-charcoal: #38383b;
	--ng-light: #dfe0e1;
	--ng-ink: #111111;

	/* Type scale: the single source of truth for every font-size in this stylesheet.
	   Everything below references these instead of hard-coded rem values. */
	--ng-fs-2xs: 0.72rem;
	--ng-fs-xs: 0.95rem;
	--ng-fs-sm: 1rem;
	--ng-fs-base: 1.15rem;
	--ng-fs-md: 1.3rem;
	--ng-fs-lg: 1.55rem;
	--ng-fs-xl: 1.75rem;
	--ng-fs-2xl: 2rem;
	--ng-fs-3xl: 2.3rem;
	/* fluid sizes for the banner, hero nav overlay, and newsletter title */
	--ng-fs-banner: clamp(0.95rem, 0.7rem + 0.9vw, 1.25rem);
	--ng-fs-news-title: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);
	--ng-fs-nav-overlay: clamp(1.6rem, 6.5vw, 2.35rem);
	--ng-fs-nav-overlay-lg: clamp(2rem, 8vw, 3rem);
}

/* Global box-sizing so width:100% / 90vw plus padding never overflow the viewport. This
   was making the store-notice bar and the newsletter popup wider than the screen on
   mobile, which read as the whole site being off-center (a 40px sideways scroll). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * "Shop Update" banner (WooCommerce Store Notice moved to the top)
 * ------------------------------------------------------------------------- */
.woocommerce-store-notice,
p.demo_store {
	position: relative;
	left: auto;
	bottom: auto;
	width: 100%;
	margin: 0;
	/* extra right padding leaves room for the X in the corner */
	padding: 0.7rem 2.8rem;
	background: var(--ng-charcoal);
	color: #fff;
	font-family: "EB Garamond", Georgia, serif;
	/* fluid: ~0.95rem on phones (unchanged), scaling up to 1.25rem on desktop */
	font-size: var(--ng-fs-banner);
	letter-spacing: 0.02em;
	text-align: center;
	box-shadow: none;
	/* fade in slower than the page content (which uses ng-page-fade 1.4s) */
	animation: ng-banner-fade 2.4s ease both;
}
/* "Sign up" in the banner (wrapped into a link by app.js) reopens the newsletter popup */
.ng-notice-signup {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
/* Replace WooCommerce's "Dismiss" text link with an X in the upper-right corner */
.woocommerce-store-notice__dismiss-link {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	color: #fff;
	text-decoration: none;
	font-size: 0;
	line-height: 1;
}
.woocommerce-store-notice__dismiss-link::before {
	content: "\00d7";
	font-size: var(--ng-fs-xl);
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Header layout: logo left, nav centered, cart right
 * ------------------------------------------------------------------------- */
.ng-header {
	padding-block: 1.9rem;
}
/* Three-zone bar: logo left, nav, actions right, with EQUAL gaps between the
   groups (native flex space-between from the block markup). */
/* Grid so the nav sits at the PAGE center (not balanced between the side groups):
   logo left, nav dead-center, actions right. */
.ng-header .ng-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding-inline: clamp(2rem, 6vw, 6rem);
}
.ng-header .ng-header__brand {
	justify-self: start;
}
.ng-header .ng-header__bar .ng-nav {
	justify-self: center;
}
.ng-header .ng-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
/* Instagram + cart: same size, vertically aligned, flush to the right edge */
.ng-header__actions .wp-block-social-links,
.ng-header__actions .wp-social-link,
.ng-header__actions .wp-social-link a,
.ng-header__actions .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	line-height: 0;
	margin: 0;
	padding: 0;
	gap: 0;
}
.ng-header__actions .wp-social-link a {
	color: #fff;
}
.ng-header__actions .wp-social-link svg {
	width: 26px;
	height: 26px;
}
/* cart glyph reads smaller than the social icons, so size it up to match */
.ng-header__actions .wc-block-mini-cart__button svg {
	width: 30px;
	height: 30px;
}
/* same hover animation on all three icons */
.ng-header__actions .wp-social-link a,
.ng-header__actions .wc-block-mini-cart__button {
	transition: transform 0.25s ease;
	transform-origin: center;
}
.ng-header__actions .wp-social-link a:hover,
.ng-header__actions .wc-block-mini-cart__button:hover {
	transform: scale(1.18);
}
/* shrink-wrap each social icon (kills empty slots); even space between icons */
.ng-header__actions .ng-social {
	gap: 1rem;
}
.ng-header__actions .wp-social-link,
.ng-header__actions .wp-social-link a {
	width: 26px;
	height: 26px;
	min-width: 0;
}
.ng-header__actions .wp-social-link svg {
	width: 100%;
	height: 100%;
}
/* zero the mini-cart WRAPPER + button + badge so the icon sits flush right */
.ng-header__actions .wp-block-woocommerce-mini-cart,
.ng-header__actions .wc-block-mini-cart,
.ng-header__actions .wc-block-mini-cart__button,
.ng-header__actions .wc-block-mini-cart__quantity-badge {
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
}
.ng-header__actions .wp-block-woocommerce-mini-cart {
	display: flex;
	align-items: center;
}

/* Collapse the nav to a hamburger sooner (<=900px), and put the hamburger to the
   LEFT of the logo (mobile pattern). */
@media (max-width: 900px) {
	.ng-header .ng-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	/* overlay is always present so it can animate; closed state fades + slides up,
	   open state fades + slides in (sleek open/close like brettwulc) */
	.ng-header .ng-nav .wp-block-navigation__responsive-container {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		background-color: var(--ng-charcoal);
		opacity: 0 !important;
		visibility: hidden;
		transform: none !important;
		pointer-events: none;
		/* NO transition by default so resizing across the breakpoint can't flash it;
		   the transition is enabled only during an actual open/close tap (app.js adds
		   .ng-menu-animate to <html>). */
		transition: none !important;
		animation: none !important; /* kill core's instant 0.1s fade-in */
	}
	html.ng-menu-animate .ng-header .ng-nav .wp-block-navigation__responsive-container {
		transition: opacity 0.45s ease, visibility 0.45s !important;
	}
	.ng-header .ng-nav .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
		animation: none !important;
	}
	/* hamburger far left, logo centered, cart far right */
	.ng-header .ng-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.ng-header .ng-header__bar .ng-nav {
		order: -1;
		justify-self: start;
	}
	.ng-header .ng-header__brand {
		justify-self: center;
		margin: 0;
	}
	.ng-header .ng-header__actions {
		justify-self: end;
	}
}

/* Suppress the overlay transition while the window is actively resizing, so it
   doesn't flash when crossing the mobile breakpoint. (class toggled in app.js) */
.ng-resizing .wp-block-navigation__responsive-container,
.ng-resizing .wp-block-navigation__responsive-container * {
	transition: none !important;
	animation: none !important;
}

/* Opened mobile menu overlay: charcoal, centered large serif, X top-left (brettwulc). */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--ng-charcoal) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	flex: 1;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: var(--ng-fs-nav-overlay-lg);
	font-weight: 400;
	color: #fff;
	letter-spacing: 0.01em;
}
/* Close (X) sits exactly where the hamburger was: same left, same vertical row,
   same size, so a single tap opens and closes. (Tuned for the notice bar shown.) */
/* WordPress's own close button becomes an INVISIBLE tap target sitting over the
   folding hamburger (JS positions it there); the visible X is the animated hamburger. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 4.3rem;
	left: clamp(2rem, 6vw, 6rem);
	right: auto;
	padding: 0;
	width: 46px;
	height: 46px;
	opacity: 0;
	z-index: 100004;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	color: #fff;
}

/* Full brettwulc-style opened overlay on mobile: X left, logo center, cart right,
   nav centered, Instagram + email at the bottom. */
@media (max-width: 900px) {
	/* closed header shows only the cart on the right; social moves into the menu */
	.ng-header__actions .ng-social {
		display: none;
	}
	/* keep logo + cart visible over the charcoal overlay (relative, not fixed, so
	   toggling the menu doesn't reflow the page and break the fade) */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header {
		position: relative;
		z-index: 100000;
	}
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header__brand,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header__actions {
		position: relative;
		z-index: 100002;
	}
	/* Instagram + email centered at the bottom of the open menu */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header__actions .ng-social {
		display: flex;
		position: fixed;
		left: 50%;
		bottom: 3rem;
		transform: translateX(-50%);
		z-index: 100002;
		gap: 1.75rem;
		width: auto;
	}
}

/* No big page titles: the active nav item is underlined instead (see app.js). */
.wp-block-query-title,
.woocommerce-products-header__title {
	display: none;
}
.ng-nav a.ng-current,
.ng-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

/* Catalog "Sort by" dropdown */
.woocommerce-ordering select,
select.orderby,
.wp-block-woocommerce-catalog-sorting select,
.wc-block-sort-select__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0;
	padding: 0.5rem 2.2rem 0.5rem 0.9rem;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-xs);
	letter-spacing: 0.02em;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
}
.woocommerce-ordering select option,
select.orderby option {
	background-color: #38383b;
	color: #fff;
}
/* WHITE logo, nav, and icons on the clay background (like brettwulc) */
.ng-header a,
.ng-header .wp-block-site-title a,
.ng-header .wc-block-mini-cart__button,
.ng-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
}
.ng-header .wc-block-mini-cart__button svg,
.ng-header__actions svg {
	fill: #fff;
}
/* Delicate two-line hamburger that folds into an X on open (brettwulc-style).
   The open button stays visible on top of the overlay so it can animate; WordPress's
   own close button becomes an invisible tap target over it (see below). */
.ng-header .wp-block-navigation__responsive-container-open {
	color: #fff;
	position: relative;
	width: 40px;
	height: 22px;
	z-index: 100003;
}
.ng-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.ng-header .wp-block-navigation__responsive-container-open::before,
.ng-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background-color: #fff;
	transition: transform 0.4s ease, top 0.4s ease;
}
.ng-header .wp-block-navigation__responsive-container-open::before {
	top: 7px;
}
.ng-header .wp-block-navigation__responsive-container-open::after {
	top: 14px;
}
/* fold the two lines into an X while the menu is open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header .wp-block-navigation__responsive-container-open::before {
	top: 10px;
	transform: rotate(45deg);
}
body:has(.wp-block-navigation__responsive-container.is-menu-open) .ng-header .wp-block-navigation__responsive-container-open::after {
	top: 10px;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * Shop feed / product grid
 * ------------------------------------------------------------------------- */
/* The shop uses WooCommerce's block Product Collection (default 3 columns).
   Force a 4-up feed on desktop like brettwulc; auto-fill keeps it responsive. */
.wc-block-product-template.columns-3 {
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 3rem 2rem !important;
}
/* step down columns so items never get tiny: 4 -> 3 -> 2 -> 1 */
@media (max-width: 1100px) {
	.wc-block-product-template.columns-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 760px) {
	.wc-block-product-template.columns-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.wc-block-product-template.columns-3 {
		grid-template-columns: 1fr !important;
	}
}
.wc-block-product-template .wc-block-product {
	text-align: center;
}
/* slightly larger product titles in the shop grid. !important is required because the
   block adds a preset font-size class (.has-...-font-size) that WordPress emits with
   !important, which otherwise wins. */
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wp-block-post-title a {
	font-size: var(--ng-fs-lg) !important;
}
/* bigger titles on mobile, where the grid drops to 1-2 columns */
@media (max-width: 760px) {
	.wc-block-product-template .wp-block-post-title,
	.wc-block-product-template .wp-block-post-title a {
		font-size: var(--ng-fs-2xl) !important;
	}
}

/* All buttons bold: product buttons, single-product add-to-cart, the newsletter submit,
   and the mini-cart drawer's View cart / Checkout buttons. */
.wp-element-button,
.wp-block-button__link,
.wc-block-product-template a.button,
.wc-block-components-button,
.wc-block-mini-cart__footer .wc-block-components-button,
.ng-modal__submit {
	font-weight: 900;
}
/* subtle hover indication: the product image gently zooms (clipped to its square) */
.wc-block-product-template .wc-block-components-product-image {
	overflow: hidden;
	position: relative;
}
.wc-block-product-template .wc-block-components-product-image img {
	display: block;
	transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.wc-block-product-template .wc-block-components-product-image:hover img {
	transform: scale(1.06);
}
/* Two-photo hover swap (request #6): the product's second photo fades in over the
   featured one (injected as img.ng-hover-swap by inc/woocommerce.php). Products with a
   single photo have no overlay, so they just keep the gentle zoom. */
.wc-block-product-template .wc-block-components-product-image img.ng-hover-swap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1),
		transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
	pointer-events: none;
}
@media (hover: hover) {
	.wc-block-product:hover .ng-hover-swap,
	.wc-block-product-template .wc-block-components-product-image:hover img.ng-hover-swap {
		opacity: 1;
	}
}
/* Compact product buttons that never wrap to two lines */
.wc-block-product-template .wp-element-button,
.wc-block-product-template .wp-block-button__link,
.wc-block-product-template a.button,
.wc-block-product-template .add_to_cart_button,
.wc-block-product-template .wp-element-button *,
.wc-block-product-template a.button * {
	white-space: nowrap !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
}
.wc-block-product-template .wp-element-button,
.wc-block-product-template .wp-block-button__link,
.wc-block-product-template a.button,
.wc-block-product-template .add_to_cart_button {
	width: auto;
	max-width: 100%;
	display: inline-block;
	font-size: var(--ng-fs-2xs);
	letter-spacing: 0.06em;
	padding: 0.6rem 1.15rem;
}

ul.products li.product {
	position: relative;
	text-align: center;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail {
	margin-inline: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	font-size: var(--ng-fs-base);
	letter-spacing: 0.01em;
	padding-top: 0.6rem;
}
ul.products li.product .price {
	color: var(--ng-charcoal);
	font-size: var(--ng-fs-sm);
}

/* Tighten the space between a product's button and the "View cart" link that appears after
   adding to cart. The gap came from three places: the button's 16px bottom margin, the
   button-block's 12px flex gap, and the link's own top spacing. Collapse all three. The
   :has() keeps the button's normal bottom margin except when the link is actually shown. */
.wc-block-product-template .wc-block-components-product-button {
	gap: 0.4rem;
}
.wc-block-product-template .wc-block-components-product-button:has(.added_to_cart) .wp-block-button__link {
	margin-bottom: 0;
}
.wc-block-product-template .wc-block-components-product-button a.added_to_cart {
	margin-top: 0;
	padding-top: 0;
}

/* Sold Out badge */
.ng-soldout-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	background: rgba(56, 56, 59, 0.9);
	color: #fff;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
}

/* Hover image swap on the shop loop */
ul.products li.product a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
}
ul.products li.product img.ng-secondary-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	pointer-events: none;
}
@media (hover: hover) {
	ul.products li.product:hover img.ng-secondary-image {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Load fade-in for content images (JS adds .ng-loaded)
 * ------------------------------------------------------------------------- */
/* Progressive enhancement: only HIDE images (to fade them in) when JS is running.
   app.js adds .ng-js to <html>. So with no JS, and in the block editor where app.js
   never runs, images are visible by default instead of stuck invisible at opacity:0. */
html.ng-js .ng-fade img,
html.ng-js .wp-block-image img,
html.ng-js .wp-block-cover__image-background {
	opacity: 0;
	transition: opacity 0.8s ease-in;
}
html.ng-js .ng-loaded .ng-fade img,
html.ng-js .ng-loaded .wp-block-image img,
html.ng-js .ng-loaded .wp-block-cover__image-background {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Single product: quiet two-column layout
 * ------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
}
/* Product layout: 50/50 image + info that scale with the window; stacks to
   title -> image -> info at the mobile breakpoint (same 900px as the hamburger). */
/* Desktop: image left; title + description + add-to-cart sandwiched together as one
   unit and vertically centered against the image (1fr spacer rows top & bottom). */
.ng-product-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* title + summary sit at the TOP of the image column (a flexible spacer row absorbs
	   the remaining height below), rather than vertically centered against the image. */
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"img title"
		"img summary"
		"img .";
	column-gap: 3rem;
	row-gap: 0.35rem;
}
.ng-product-grid > .wp-block-post-title {
	grid-area: title;
	margin: 0;
	text-align: center;
}
.ng-product-grid > .wp-block-woocommerce-product-image-gallery {
	grid-area: img;
}
.ng-product-grid > .ng-psummary {
	grid-area: summary;
	text-align: center;
}
.single-product .wc-block-add-to-cart-form,
.single-product .wc-block-add-to-cart-form form.cart {
	justify-content: center;
}
.single-product .wc-block-add-to-cart-form .quantity {
	margin-inline: auto;
}
/* hide the block product meta (Category / SKU): brettwulc shows none */
.wp-block-woocommerce-product-meta {
	display: none;
}
@media (max-width: 900px) {
	/* stacked: title ABOVE the image, then description + add-to-cart, all centered */
	.ng-product-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas: "title" "img" "summary";
		justify-items: center;
		row-gap: 1rem;
	}
	.ng-product-grid > .wp-block-woocommerce-product-image-gallery {
		width: 100%;
		max-width: 440px;
		margin-inline: auto;
	}
	.ng-product-grid > .wp-block-post-title {
		width: 100%;
		margin: 0;
	}
	/* narrower container for the description */
	.ng-product-grid > .ng-psummary {
		width: 100%;
		max-width: 420px;
	}
}
@media (max-width: 600px) {
	.ng-product-grid > .wp-block-woocommerce-product-image-gallery {
		max-width: 340px;
	}
}
/* breadcrumb: small, quiet, chevron separators */
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--ng-fs-base);
	letter-spacing: 0.03em;
	margin-bottom: var(--wp--preset--spacing--30);
}
/* remove the "Showing all N results" count on the shop */
.wp-block-woocommerce-product-results-count,
.woocommerce-result-count {
	display: none;
}
/* ---------------------------------------------------------------------------
 * ONE button style for the whole site. Product list, single product, newsletter
 * section + popup, and the cart drawer all use it: a white outline on the clay
 * surfaces that fills charcoal on hover. Identical size, weight, border, spacing, and
 * transition everywhere. !important beats WooCommerce's per-block button CSS.
 * ------------------------------------------------------------------------- */
.wc-block-product-template .wp-block-button__link,
.wc-block-product-template .wc-block-components-product-button__button,
.single-product .wc-block-add-to-cart-form .wp-element-button,
.ng-newsletter__submit,
.ng-modal__submit,
.wc-block-mini-cart__drawer .wp-block-button__link,
.wc-block-mini-cart__footer-actions > a,
.wc-block-mini-cart__footer-checkout {
	background-color: transparent !important;
	color: #fff !important;
	border: 1.5px solid #fff !important;
	border-radius: 0 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 900 !important;
	font-size: var(--ng-fs-sm) !important;
	line-height: 1.2 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 0.7em 1.6em !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.wc-block-product-template .wp-block-button__link:hover,
.wc-block-product-template .wc-block-components-product-button__button:hover,
.single-product .wc-block-add-to-cart-form .wp-element-button:hover,
.ng-newsletter__submit:hover,
.ng-modal__submit:hover,
.wc-block-mini-cart__drawer .wp-block-button__link:hover,
.wc-block-mini-cart__footer-actions > a:hover,
.wc-block-mini-cart__footer-checkout:hover {
	background-color: var(--ng-charcoal) !important;
	border-color: var(--ng-charcoal) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Mini-cart drawer (the cart sidebar): larger content + charcoal button hover.
 * The quantity stepper and delete button are left at their default size.
 * ------------------------------------------------------------------------- */
.wc-block-mini-cart__drawer .wc-block-components-product-name,
.wc-block-mini-cart__drawer a.wc-block-components-product-name {
	font-size: var(--ng-fs-lg) !important;
}
/* Each cart line was printing its price TWICE: the per-unit price under the product name
   (.wc-block-cart-item__prices) and the line total on the right (.wc-block-cart-item__total).
   They're identical at quantity 1, so hide the per-unit copy and keep the line total (which
   stays correct if the quantity is ever > 1). */
.wc-block-mini-cart__drawer .wc-block-cart-item__prices {
	display: none !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__total,
.wc-block-mini-cart__drawer .wc-block-components-product-price {
	font-size: var(--ng-fs-md) !important;
}
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	font-size: var(--ng-fs-base) !important;
}
/* Larger product thumbnails in the cart drawer, with breathing room around each line. */
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
	width: 124px !important;
	padding-right: 1.1rem !important;
	vertical-align: top;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
	width: 124px !important;
	height: auto !important;
	max-width: none !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-items__row,
.wc-block-mini-cart__drawer .wc-block-cart-item__wrap {
	padding-block: 0.7rem !important;
}
.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
	font-size: var(--ng-fs-lg) !important;
}
.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	font-size: var(--ng-fs-base) !important;
}
/* The cart drawer wears the site's clay + white scheme (not WooCommerce's white panel), so
   the white-outline buttons and all the text read correctly and it matches the rest of the
   site. Buttons themselves are styled by the unified rule above. */
.wc-block-mini-cart__drawer {
	background-color: var(--ng-taupe) !important;
}
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer :is(h1, h2, h3, a, span, p, strong, div, td, li, label) {
	color: #fff !important;
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	border-color: rgba(255, 255, 255, 0.55) !important;
}
.wc-block-mini-cart__drawer svg,
.wc-block-components-drawer__close svg {
	fill: #fff !important;
}
.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	color: rgba(255, 255, 255, 0.8) !important;
}
/* The cart drawer must sit above everything: the store-notice banner (WooCommerce gives
   it z-index 99998) and the mobile hamburger/menu overlay (~100003). */
.wc-block-components-drawer__screen-overlay {
	z-index: 100010 !important;
}

/* ---------------------------------------------------------------------------
 * Newsletter section on the shop page (brettwulc-style "subscribe" block).
 * Text is editable in Appearance > Customize > "Newsletter section (Shop)".
 * ------------------------------------------------------------------------- */
.ng-newsletter {
	text-align: center;
	/* less space on top than bottom */
	padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 6vw, 6rem) clamp(2.5rem, 7vh, 4.5rem);
}
.ng-newsletter__inner {
	max-width: 620px;
	margin: 0 auto;
}
.ng-newsletter__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	font-size: var(--ng-fs-news-title);
	color: #fff;
	margin: 0 0 1rem;
}
.ng-newsletter__text {
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-base);
	line-height: 1.5;
	color: #fff;
	margin: 0 0 1.75rem;
}
.ng-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 460px;
	margin: 0 auto;
}
.ng-newsletter__input {
	flex: 1 1 60%;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-right: 0;
	background: transparent;
	color: #fff;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-sm);
}
.ng-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
/* the button itself is styled by the site-wide unified button rule; here we only keep it
   from stretching in the flex row */
.ng-newsletter__submit {
	flex: 0 0 auto;
	cursor: pointer;
}
.ng-newsletter__msg {
	flex: 1 0 100%;
	color: #fff;
	margin: 0.75rem 0 0;
	font-size: var(--ng-fs-xs);
}
.ng-newsletter__msg:empty {
	margin: 0;
}
.ng-newsletter__privacy {
	font-size: var(--ng-fs-base);
	color: rgba(255, 255, 255, 0.75);
	margin: 0.9rem 0 0;
}
@media (max-width: 480px) {
	.ng-newsletter__text {
		margin-bottom: 1.25rem;
	}
	.ng-newsletter__form {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.6rem;
	}
	.ng-newsletter__input {
		border-right: 1px solid rgba(255, 255, 255, 0.6);
	}
	/* in the mobile column, don't let the (usually empty) message inflate its height */
	.ng-newsletter__msg {
		flex: 0 0 auto;
		margin: 0;
	}
	.ng-newsletter__privacy {
		margin-top: 0.9rem;
	}
}
.woocommerce .woocommerce-breadcrumb .ng-crumb-sep {
	opacity: 0.7;
	padding-inline: 0.15rem;
}

/* ---------------------------------------------------------------------------
 * Home hero: three full-bleed images (thirds) with the header overlaid, like brettwulc
 * ------------------------------------------------------------------------- */
.ng-hero {
	flex-wrap: nowrap !important;
	gap: 0 !important;
	align-items: stretch !important;
	/* Fill the container edge to edge. We strip the side padding from the home <main>
	   (below), so plain width:100% spans the viewport. The old 100vw + calc(50% - 50vw)
	   full-bleed trick shifted the image sideways in iOS Safari (flex-item percentage
	   margins resolve differently there), so it is gone. */
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* fill the remaining viewport height inside the home flex column (see body.home) */
	flex: 1 1 auto;
	min-height: 0;
}
.ng-hero .wp-block-image {
	flex: 1 1 0;
	margin: 0;
	min-width: 0;
	height: 100%;
}
.ng-hero .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Below the 900px mobile breakpoint (same switch as the hamburger) the three side-by-side
   images become cramped, so show only the middle one, full-screen. Desktop keeps the 3-up.
   To feature a different photo, reorder the images in the Home page so the wanted one is in
   the middle (or change nth-child). */
@media (max-width: 900px) {
	.ng-hero .wp-block-image:nth-child(1),
	.ng-hero .wp-block-image:nth-child(3) {
		display: none;
	}
}
/* HOME: exactly one viewport tall, no scroll. For block themes WooCommerce renders the
   store-notice bar as the first child of <body> (a sibling before .wp-site-blocks). We
   make <body> a flex column locked to the viewport: the notice takes its natural height
   and the site (with the hero inside <main>) fills the rest. Pure CSS, so there is no JS
   race and never a sliver of scroll past the images. */
/* Hard guarantee: the home page's scroll container (the root) cannot scroll at all, so
   sub-pixel rounding can never expose a sliver of background below the hero. The flex
   column below still sizes the hero to fill, so there is nothing meaningful to clip. */
html:has( body.home ) {
	overflow: hidden;
}
body.home {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* logged-in only: the fixed admin bar offsets the page, so subtract it (visitors never
   see this branch) */
body.admin-bar.home {
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
	body.admin-bar.home {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}
body.home .woocommerce-store-notice,
body.home p.demo_store {
	flex: 0 0 auto;
}
.home main.ng-home {
	margin: 0;
	/* strip the root side padding on home so the hero fills the viewport width without any
	   negative-margin full-bleed trick */
	padding-left: 0;
	padding-right: 0;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* WordPress wraps page content in a .wp-block-post-content div between <main> and the
   hero. On home it must (a) grow so the hero fills the height, and (b) be released from
   the constrained layout's 680px content-size clamp so the hero fills the full viewport
   width. No vw / percentage margins, so it stays correct in iOS Safari too. */
.home main.ng-home > .wp-block-post-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
.ng-hero .wp-block-image {
	padding-left: 0;
	padding-right: 0;
}
/* overlay the header on top of the hero (home page only); this is also the flex column
   that lets <main> fill the space under the notice */
.home .wp-site-blocks {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.home .ng-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
}
/* The three images ALWAYS stay side by side and shrink horizontally (never stack). */

/* The footer is intentionally empty (no footer, like brettwulc). Hide the whole footer
   template part so it contributes neither height nor a block-gap. (Hiding only the inner
   .ng-footer left the wrapper's 1.5rem top block-gap, which showed as a strip of
   background below the home hero.) */
footer.wp-block-template-part {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Gentle page fade-in on load
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	main.wp-block-group {
		animation: ng-page-fade 1.4s ease both;
	}
}
@keyframes ng-page-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes ng-banner-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Newsletter popup
 * ------------------------------------------------------------------------- */
.ng-modal[hidden] {
	display: none;
}
.ng-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ng-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.45);
}
.ng-modal__box {
	position: relative;
	z-index: 1;
	width: min(420px, 90vw);
	background: var(--ng-taupe);
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.ng-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: 0;
	font-size: var(--ng-fs-lg);
	line-height: 1;
	cursor: pointer;
	color: #fff;
}
.ng-modal__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	font-size: var(--ng-fs-3xl);
	margin: 0 0 0.5rem;
	color: #fff;
}
.ng-modal__text {
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-md);
	margin: 0 0 1.25rem;
	color: #fff;
}
.ng-modal__input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-base);
	margin-bottom: 0.75rem;
}
.ng-modal__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
/* first + last name side by side in the popup */
.ng-modal__names {
	display: flex;
	gap: 0.5rem;
}
.ng-modal__names .ng-modal__input {
	flex: 1 1 0;
	min-width: 0;
}
.ng-modal__submit {
	width: 100%;
	padding: 0.85rem;
	background: var(--ng-charcoal);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: var(--ng-fs-md);
	letter-spacing: 0.04em;
}
.ng-modal__submit:hover {
	background: var(--ng-ink);
}
.ng-modal__msg {
	min-height: 1.2em;
	margin: 0.75rem 0 0;
	font-size: var(--ng-fs-xs);
}
/* Mobile: a compact centered card, not a shrunk-down desktop dialog. */
@media (max-width: 600px) {
	.ng-modal__box {
		width: min(360px, 92vw);
		padding: 2rem 1.35rem 1.5rem;
	}
	.ng-modal__title {
		font-size: var(--ng-fs-xl);
	}
	.ng-modal__text {
		font-size: var(--ng-fs-base);
	}
	.ng-modal__close {
		top: 0.35rem;
		right: 0.55rem;
		font-size: var(--ng-fs-xl);
	}
}
/* Overlay VISUALS apply whether the menu is open or closed (≤900), so the close
   animation keeps the charcoal + centered layout while it fades out. Only opacity/
   visibility/transform are toggled by .is-menu-open (above). */
@media (max-width: 900px) {
	.ng-header .ng-nav .wp-block-navigation__responsive-container {
		background-color: var(--ng-charcoal) !important;
		flex-direction: column !important;
		overflow: auto;
		z-index: 100000;
	}
	.ng-header .ng-nav .wp-block-navigation__responsive-container-content {
		justify-content: center !important;
		align-items: center !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		/* push the list further down so it isn't crammed under the logo */
		padding-top: clamp(6rem, 22vh, 12rem) !important;
	}
	.ng-header .ng-nav .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: center !important;
		gap: 1.1rem !important;
	}
	.ng-header .ng-nav .wp-block-navigation-item__content {
		font-family: "Cormorant Garamond", Georgia, serif !important;
		font-size: var(--ng-fs-nav-overlay) !important;
		font-weight: 400 !important;
		color: #fff !important;
	}
	.ng-header .ng-nav .wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: 4.3rem;
		left: clamp(1rem, 2.5vw, 2rem);
		right: auto;
		color: #fff !important;
		width: 38px;
		height: 38px;
		padding: 0;
	}
	.ng-header .ng-nav .wp-block-navigation__responsive-container-close svg {
		width: 38px;
		height: 38px;
	}
}

/* Stagger the menu items in one-by-one on open (Shop, then FAQ, then About, ...) */
@keyframes ng-nav-item-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (max-width: 900px) {
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		opacity: 0;
		animation: ng-nav-item-in 0.55s ease forwards;
	}
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) {
		animation-delay: 0.2s;
	}
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) {
		animation-delay: 0.34s;
	}
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) {
		animation-delay: 0.48s;
	}
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) {
		animation-delay: 0.62s;
	}
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) {
		animation-delay: 0.76s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ng-header .ng-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		opacity: 1;
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * Contact form (Contact page). Sits on the normal light page background (not the
 * clay surfaces), so it uses dark text + a charcoal-outline button that fills on hover.
 * ------------------------------------------------------------------------- */
.ng-contact-form {
	max-width: 540px;
	margin: 0 auto;
	text-align: left;
}
.ng-contact__row {
	margin-bottom: 1rem;
}
/* Transparent fields with white text and outline, matching the newsletter on the clay page. */
.ng-contact__input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-base);
}
.ng-contact__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.ng-contact__input:focus {
	outline: none;
	border-color: #fff;
}
.ng-contact__textarea {
	resize: vertical;
	min-height: 160px;
}
/* honeypot: visually hidden, off-screen (bots fill it, humans never see it) */
.ng-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* White-outline button, matching the newsletter/site buttons on the clay background. */
.ng-contact__submit {
	background-color: transparent;
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 900;
	font-size: var(--ng-fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.7em 2em;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ng-contact__submit:hover {
	background-color: var(--ng-charcoal);
	border-color: var(--ng-charcoal);
	color: #fff;
}
.ng-contact__submit:disabled {
	opacity: 0.55;
	cursor: default;
}
.ng-contact__msg {
	margin: 1rem 0 0;
	font-family: "EB Garamond", Georgia, serif;
	font-size: var(--ng-fs-base);
	min-height: 1.2em;
	color: #fff;
}
.ng-contact__msg.is-error {
	color: #f4c6b8;
}

/* No footer, so give the shop feed breathing room at the bottom of the page. */
.woocommerce-shop main.wp-block-group,
.post-type-archive-product main.wp-block-group {
	padding-bottom: clamp(4rem, 10vh, 8rem);
}

/* ---------------------------------------------------------------------------
 * Cart page (/cart): much larger type throughout so it's easy to read.
 * ------------------------------------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart {
	font-size: var(--ng-fs-md);
}
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .wc-block-cart-item__prices,
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-product-metadata {
	font-size: var(--ng-fs-lg) !important;
}
.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-item__value {
	font-size: var(--ng-fs-lg) !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--ng-fs-2xl) !important;
}
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-button,
.woocommerce-cart .wc-block-components-quantity-selector__input,
.woocommerce-cart .wc-block-components-quantity-selector__button,
.woocommerce-cart .wc-block-components-totals-coupon__button,
.woocommerce-cart a.wc-block-cart__shopping-button {
	font-size: var(--ng-fs-md) !important;
}
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block,
.woocommerce-cart .wc-block-cart__totals-title {
	font-size: var(--ng-fs-xl) !important;
}

/* Soft-launch catalog mode (see inc/catalog-mode.php): while the site is a browse-only
   catalog, hide the header mini-cart. Nothing is purchasable, so a cart is meaningless
   until prices + payments are turned on. The body carries .ng-catalog-mode in this mode. */
.ng-catalog-mode .wc-block-mini-cart {
	display: none;
}