/**
 * NANZ.com Refresh (2026): Carl's gray-tile redesign. See docs/site-refresh.md.
 *
 * Every rule is scoped to html.nz-refresh, set by inc/site-refresh.php, so the
 * staging switcher's "Current site" look turns all of it off. Measurements come
 * from Carl's texted mockups (2026-10-12) until his Canvas files arrive.
 */

:root {
	/* Carl's four grays, sampled from his swatch image (approximate). Grays 3
	   and 4 are what the cut-outs, composed on #D9D6D4 and #EFECEA, decode to
	   (lossy WebP lands 1 level off in one channel), so tile and cut-out match
	   exactly. cutouts.py composes on the swatch values; don't feed these back. */
	--nz-gray-1: #DEDAD5;
	--nz-gray-2: #C7C3C0;
	--nz-gray-3: #D9D5D4;
	--nz-gray-4: #EEECEA;
	--nz-offwhite: #F5F6F6;
	--nz-orange: #E4541E;
	/* The brand orange darkened (same hue) to pass 4.5:1 for small text on
	   white (4.9:1) and on the off-white page (4.52:1). */
	--nz-orange-text: #C54718;
	--nz-green: #0A7118;
	/* Futura is a system font on Macs and iPhones; Jost is the free stand-in. */
	--nz-futura: Futura, "Futura PT", Jost, sans-serif;
	/* Quick Ship type: Montserrat, the mobile menu's face (Carl, 10/13; the
	   mockup's Cabin is gone), tracked 0.03 em (Carl, 10/13 evening: ".03
	   spacing is good"; it was a Design options choice until then). */
	--nz-qs-font: Montserrat, sans-serif;
	--nz-qs-tracking: 0.03em;
	/* Tile width / height: Carl's 19:31 everywhere (10/12 and 10/13 calls). */
	--nz-catalog-tile: 19 / 31;
	--nz-qs-tile: 19 / 31;
	/* Catalog: clear space under a row's captions, before the next row: tile to
	   tile 66 px (14 px to the caption, its 22 px band, then this), as on Quick
	   Ship. Carl's "triple the vertical space" meant the columns (his "vertical
	   gutters"), not rows (phone call, 10/13). Phones below. */
	--nz-row-space: 30px;
	/* ...and the space from a tile to its caption (phones below). Both are
	   halved by Design options → Row spacing (end of this file). */
	--nz-cap-space: 14px;
	/* Product page: white between the gray hero and the title below it, the
	   grid's tile-to-caption space (Sarah, 10/13: the title overlapped the
	   gray). Phones below. */
	--nz-hero-title-space: 14px;
}

/* ---------- Page background ---------- */

html.nz-refresh.nz-page-offwhite body,
html.nz-refresh.nz-page-offwhite .site,
html.nz-refresh.nz-page-offwhite .header-container,
html.nz-refresh.nz-page-offwhite .site-header,
html.nz-refresh.nz-page-offwhite .site-footer {
	background-color: var(--nz-offwhite);
}

html.nz-refresh.nz-page-offwhite .site-search input[type=text] {
	background-color: transparent;
}

/* ---------- Header ---------- */

/* The theme fades the pinned header to 95%: invisible over white tiles, but a
   ghost of every gray tile scrolling beneath it. */
html.nz-refresh .site-header {
	opacity: 1;
}

/* The pinned header's white ended at the logo's foot, so tiles scrolling up
   met the logo. Carl (10/15 text): "1/4 inch of white below logo when
   thumbnails roll under". 24 px of the theme's 38 px above the content moves
   inside the header, so nothing shifts at the top of the page. Product pages
   keep their 38 px (below, Sarah 10/13); the home page's header doesn't pin;
   phones' headers scroll away. */
@media only screen and (min-width: 769px) {
	html.nz-refresh body:not(.home) .site-header {
		padding-bottom: 24px;
	}

	html.nz-refresh body:not(.home) .site-content {
		margin-top: 14px;
	}
}

/* Right-hand nav: a link reached by keyboard turns orange, as on hover. The
   theme removes the focus outline and gives focus no color of its own, so a
   focused link looked like the rest (before the refresh too; found checking
   95, 90, 85 on 10/13). !important because the generated text colors
   (css/refresh-warm-text.css) outrank a plain rule. */
html.nz-refresh .widget-area a:focus-visible {
	color: var(--nz-orange) !important;
}

/* Right-hand nav: the page you are on in orange (Carl, 10/15 text: "orange for
   the selection you made and turn orange when you scroll over it"). The theme
   did this (css/style.css, .current-menu-item and a nested .current-menu-parent)
   until the accessibility pass grayed it in style.css, since the brand orange
   is 3.76:1 at 9 px. Design options → Side nav current page:
   - Orange (default): --nz-orange-text, the brand orange darkened just enough
     to pass 4.5:1 on the off-white page too (4.9:1 on white). Hover and
     keyboard focus take the same orange, so a link doesn't change orange
     when you reach the one you're on.
   - Brand orange: the theme's own marker, as before the accessibility pass.
   - Gray, as today: nothing here.
   Quick Ship's section keeps its green: those theme rules carry IDs, so they
   outrank these. !important for the reason above. */
html.nz-refresh.nz-navsel-orange .widget-area .menu .current-menu-item > a,
html.nz-refresh.nz-navsel-orange .widget-area .menu ul .current-menu-parent > a,
html.nz-refresh.nz-navsel-orange .widget-area .menu a:hover,
html.nz-refresh.nz-navsel-orange .widget-area .textwidget a:hover {
	color: var(--nz-orange-text) !important;
}
/* Its own rule: Safari before 15.4 doesn't know :focus-visible and drops a
   whole selector list that names it, which left Carl's Safari 15.1 with no
   orange current page (10/16 call). */
html.nz-refresh.nz-navsel-orange .widget-area a:focus-visible {
	color: var(--nz-orange-text) !important;
}

html.nz-refresh.nz-navsel-brand .widget-area .menu .current-menu-item > a,
html.nz-refresh.nz-navsel-brand .widget-area .menu ul .current-menu-parent > a {
	color: var(--nz-orange) !important;
}

/* ---------- Product grids (catalog and Quick Ship) ---------- */

/* Catalog columns 12 px apart, three times Quick Ship's 4 px (Carl, 10/13:
   "triple the vertical space between thumbnails on nanz site", meaning the
   columns). Rows are separated only by the caption band (.enwrap padding
   below), so a row's spacing is one number: --nz-row-space. */
html.nz-refresh .product-grid-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 0;
	overflow: visible;
}

/* Carl (10/13): the space from a page's description to the first row equals
   the space between rows. js/refresh.js marks a grid with copy above it
   (.nz-after-copy); many subcategory pages open with an empty <p> or a hidden
   <article> instead, which a sibling selector can't tell from copy. The +4 px
   matches the white space, not the boxes: a caption's text ends 10 px above
   its band's bottom, a description's 6 px above its last line box. */
html.nz-refresh body:not(.nanz-shop-page) .nz-after-copy {
	margin-top: calc(var(--nz-row-space) + 4px);
}

/* Ajax Load More wraps later pages; let their items join the same grid. */
html.nz-refresh .product-grid-items .alm-reveal {
	display: contents;
}

html.nz-refresh .product-grid-items .item {
	float: none;
	clear: none;
	width: auto;
	height: auto !important; /* collection pages set an inline height */
	margin: 0;
}

html.nz-refresh .product-grid-items .item article,
html.nz-refresh .product-grid-items .item .entry-footer {
	margin-bottom: 0;
}

/* The theme bottom-aligns headers (margin-top: auto), so tiles with one-line
   titles start lower than their neighbors. Tiles share a top edge instead. */
html.nz-refresh .product-grid-items .item .entry-header {
	margin-top: 0;
}

html.nz-refresh .product-grid-items .item[data-tone="1"] { --nz-tile: var(--nz-gray-1); }
html.nz-refresh .product-grid-items .item[data-tone="2"] { --nz-tile: var(--nz-gray-2); }
html.nz-refresh .product-grid-items .item[data-tone="3"] { --nz-tile: var(--nz-gray-3); }
html.nz-refresh .product-grid-items .item[data-tone="4"] { --nz-tile: var(--nz-gray-4); }

/* The escutcheon pages' tiles on white, an option since Nate's 10/16 21:31
   reading of Carl's "White behind the escutcheons" (the holes, now gray in
   the cut-outs; Design options → Escutcheon tiles). js/refresh.js leaves the
   photos uncut there, so their own white is the tile. */
html.nz-refresh.nz-esctile-white body.nz-escutcheons .product-grid-items .item[data-tone] { --nz-tile: #fff; }

/* The tile: tall, gray, product at the bottom. js/refresh.js swaps each photo
   for its cut-out on the tile's gray (img.nz-cut). Multiply is the fallback
   for a photo with no cut-out, and the gradient tile's look: the photos have
   pure-white backgrounds, so multiply turns the white into the tile's gray.
   The theme squares these links with padding-top: 100% and an absolutely
   positioned image; aspect-ratio replaces that here. */
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: var(--nz-catalog-tile);
	height: auto;
	margin-bottom: 0;
	padding-top: 0 !important;
	overflow: hidden;
	isolation: isolate;
	background: var(--nz-tile, var(--nz-gray-1));
}

/* While nzRefresh.layout() (inc/site-refresh.php) sets the grays: a tile shows
   its gray at once rather than fading in from gray 1 (the theme's
   .item header a transition). */
html.nz-toning .product-grid-items .item .entry-header > a:first-of-type {
	transition: none !important;
}

html.nz-refresh.nz-tile-gradient .product-grid-items .item .entry-header > a:first-of-type {
	background: linear-gradient(to bottom, color-mix(in srgb, var(--nz-tile, var(--nz-gray-1)) 88%, #000), var(--nz-tile, var(--nz-gray-1)) 70%);
}

html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img {
	position: static !important;
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
	object-fit: initial;
	mix-blend-mode: multiply;
}

/* A cut-out (js/refresh.js) already carries the tile's gray and the photo's own
   shadow: shown as is, no multiply. */
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img.nz-cut {
	mix-blend-mode: normal;
}

/* Product framing (Carl, 10/13: "knobs sit too low ... increase space at bottom
   by 3x", one optical size tile to tile, finish samples framed like knobs).
   docs/site-refresh/cutouts/frames.py gives each grid photo a scale and offset in
   tile widths (js/refresh-frames.js); js/refresh.js copies its photo's frame onto
   the <img> as --nz-s / --nz-x / --nz-y (plus --nz-ft/fr/fb/fl edge fades) and
   adds .nz-framed, then .nz-placed. Percent margins resolve against the tile's
   width and translate against the photo's own, so the numbers hold at every
   size. A photo without a frame keeps today's placement. The cut-out's backdrop
   is the tile's gray (multiply turns a white one into it), so moving the photo
   leaves no seam. Framing's one size is always on (Nate, 10/15); Design options
   choose only how low the products sit (nz-sit-low, the default; nz-sit-lower). */
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img.nz-framed {
	flex: none;
	width: calc(var(--nz-s) * 100%);
	max-width: none;
	margin-bottom: calc(var(--nz-y) * 100%);
	translate: calc(var(--nz-x) / var(--nz-s) * 100%) 0;
}

/* How low: frames.py puts every base 0.33 W up (BASELINE, Carl's 10/13 "3x");
   y is linear in the baseline, so subtracting from it lowers every base by the
   same amount. Low (default): 0.15 W up, a little above where door knobs sit as
   photographed (0.11 W); Carl on 10/15 liked them low but "could be a little bit
   higher". Lower: 0.10 W up, where the knobs sit as photographed, which Carl
   liked. A photo pushed past the tile's bottom is clipped there (the link hides
   overflow; its backdrop is the tile's gray). Levers sit 0.075 W higher than
   the rest (Carl, 10/19: "50% more space under the lever photos", so 0.225 W
   on Low), in their frames (frames.py LIFT), not here. */
html.nz-refresh.nz-sit-low { --nz-drop: 0.18; }
html.nz-refresh.nz-sit-lower { --nz-drop: 0.23; }
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img.nz-framed:not(.nz-held) {
	margin-bottom: calc((var(--nz-y) - var(--nz-drop, 0)) * 100%);
}

/* A shadow that runs off the photo's edge fades out where the frame brings that
   edge inside the tile (fades are fractions of the photo's height or width). */
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img.nz-framed.nz-fade {
	-webkit-mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-ft) * 100%), #000 calc(100% - var(--nz-fb) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-fl) * 100%), #000 calc(100% - var(--nz-fr) * 100%), transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-ft) * 100%), #000 calc(100% - var(--nz-fb) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-fl) * 100%), #000 calc(100% - var(--nz-fr) * 100%), transparent);
	mask-composite: intersect;
}

/* Hold a grid photo back until js/refresh.js has placed it, so nothing jumps
   from today's spot to its frame. The script runs at the end of the page and
   places Ajax Load More pages as they are inserted, before they paint; if it
   never runs, the animation shows the photo anyway after 2 s. */
html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img:not(.nz-placed) {
	opacity: 0;
	animation: nz-show 0s 2s forwards;
}

html.nz-refresh .product-grid-items .item .entry-header > a:first-of-type img {
	transition: opacity 0.25s ease-out;
}

@keyframes nz-show {
	to { opacity: 1; }
}

html.nz-refresh .product-grid-items .item .enwrap {
	margin-top: 0;
	padding: var(--nz-cap-space) 0 var(--nz-row-space);
}

/* Under 600 px the theme puts 20 px (!important) above this empty footer,
   under the caption; the catalog's row spacing is all in --nz-row-space.
   Quick Ship keeps the theme's 20 px: its phone spacing is unchanged. */
html.nz-refresh body:not(.nanz-shop-page) .product-grid-items .item .entry-footer {
	margin-top: 0 !important;
}

/* ---------- Quick Ship ---------- */

/* Carl loves Quick Ship's spacing as is (10/13): the caption band alone
   separates rows, 92 px tile to tile. */
html.nz-refresh body.nanz-shop-page .product-grid-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 4px;
	row-gap: 0;
}

html.nz-refresh body.nanz-shop-page .product-grid-items .item .entry-header > a:first-of-type {
	aspect-ratio: var(--nz-qs-tile);
}

html.nz-refresh body.nanz-shop-page .product-grid-items .item .enwrap {
	margin: 0;
	padding: 14px 16px 30px;
}

html.nz-refresh body.nanz-shop-page .product-grid-items .entry-title,
html.nz-refresh body.nanz-shop-page .product-grid-items .entry-title a,
html.nz-refresh body.nanz-shop-page .l-time,
html.nz-refresh body.nanz-shop-page .product-nav a,
html.nz-refresh body.nanz-shop-page .menu-filter label {
	font-family: var(--nz-qs-font) !important; /* the theme sets these with !important */
	letter-spacing: var(--nz-qs-tracking);
}

html.nz-refresh body.nanz-shop-page .product-grid-items .entry-title {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

/* Quick Ship nav a few points smaller (Carl, 10/13 evening: at 15 px "it drops
   filter results to its own line when the window isn't open really wide"; it
   wrapped at 1280 and 1366). The theme's rules are 15 px, 13 px below its
   narrower breakpoint. Desktop only: phones use the menu. */
@media only screen and (min-width: 769px) {
	html.nz-refresh body.nanz-shop-page .product-nav .menu-product-nav-container ul li a,
	html.nz-refresh body.nanz-shop-page .menu-filter label {
		font-size: 12px;
	}
}
/* One more point under 1100 px keeps 1024 (a tablet held sideways) on one line.
   Below about 1000 px Filter results wraps again; smaller type would be too small. */
@media only screen and (min-width: 769px) and (max-width: 1099px) {
	html.nz-refresh body.nanz-shop-page .product-nav .menu-product-nav-container ul li a,
	html.nz-refresh body.nanz-shop-page .menu-filter label,
	html.nz-refresh body.nanz-shop-page .top-my-order a {
		font-size: 11px;
	}
}

/* My Order the size of the nav it ends, with the nav's gap before it (Nate,
   10/19 8:48: at the theme's 15 px it was bigger than the nav and butted
   against NANZ.COM, or Filter results on a grid page). The theme spaces the
   nav 30 px, 25 px up to 1200. Where the row is too narrow, My Order wraps to
   a second line as it did before, set in by its gap as Filter results is. */
@media only screen and (min-width: 1100px) {
	html.nz-refresh body.nanz-shop-page .top-my-order a {
		font-size: 12px;
	}
}
@media only screen and (min-width: 769px) {
	html.nz-refresh body.nanz-shop-page .top-my-order {
		margin-left: 30px;
	}
	html.nz-refresh body.nanz-shop-page .top-my-order a {
		letter-spacing: var(--nz-qs-tracking);
		white-space: nowrap;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
	html.nz-refresh body.nanz-shop-page .top-my-order {
		margin-left: 25px;
	}
}

/* Quick Ship product page description in the order column's type (Carl, 10/13
   evening: "body copy … could be same as font at right"): Montserrat 400 at the
   column's 15 px, not the 19 px light it had. */
html.nz-refresh body.nanz-shop-page .product-content > p {
	font-family: var(--nz-qs-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
}

html.nz-refresh body.nanz-shop-page .l-time {
	margin: 4px 0 0;
	font-size: 12px;
}

/* The green logo is the orange one's size and in its place (Carl through June,
   10/17 11:13 and 11:14 PM: "the green and the orange logos throughout the site are
   identically sized", "the location of the logos should be identical as well", and
   on phones "the NANZ logo to be justified to the left"). Sizes are of the border
   box, not the PNG: InStockLogo.png's border is columns 42-1238 and rows 67-435 of
   1349 x 501; nanz-logo.png's is 0-843 by 0-258 of 900 x 271. So the orange box is
   196 x 60 px at the desktop's 209 px and 168.8 x 51.8 at the phone's 180 px, and
   the green PNG is drawn 1349/1197 of that box wide.
   Phones: the orange box is 10 px from the left and 28 px down, so the green one is
   too (header padding 15 left and 20 top: -15 + 10 - 5.92 white, -20 + 28 - 9.45). */
html.nz-refresh body.nanz-shop-page .site-header .site-branding {
	float: none;
	width: 100%;
	text-align: left;
}

html.nz-refresh body.nanz-shop-page .site-header .site-branding .site-title {
	display: block;
	float: none;
	width: 190.2px;
	max-width: 190.2px;
	margin: -1.45px 0 0 -10.92px;
}

/* On desktop the logo and the nav under it go all the way left (Carl through
   June, 10/17 10:04 PM: "the green logo justified all the way left and have the
   upper navigation below the logo like it is now, and have that justified left
   as well"; Quick Ship and Buy Now, which opens Quick Ship's cabinet hardware).
   The green border sits on the grid's left edge and its top 55 px down, where
   the orange one's is: 196 px wide makes the PNG 220.9 px, with 6.88 px of white
   left of the border and 10.97 above it (header padding 20 + 24 + 10.97 = 55).
   The nav's first letter is on the same edge. */
@media only screen and (min-width: 769px) {
	html.nz-refresh body.nanz-shop-page .site-header .site-branding .site-title {
		width: 220.9px;
		max-width: 220.9px;
		margin: 24px 0 0 -6.88px;
	}
}
/* From 1025 to 1200 px the theme pads the header 40 px but the grid 80 px; the
   header's left side follows the grid so the logo and nav stay on its edge. */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
	html.nz-refresh body.nanz-shop-page.product-page:not(.finish-samples-product) .site-header {
		padding-left: 80px;
	}
}

/* The nav row left under the logo, with the search on its line at the
   grid's right edge: desktop only. Phones keep the theme's header (its menu
   button and search): on them these rules left an invisible but focusable
   search field and made the header 49 px taller (10/13). */
@media only screen and (min-width: 769px) {
	/* The theme drops the nav row 30px with top: 30px, which hangs it below the
	   white header; once the header pins on scroll, tiles slide under the nav
	   text. Margin keeps the row inside the header. The right padding keeps the
	   nav clear of the search, and the row grows if the nav wraps. */
	html.nz-refresh body.nanz-shop-page .site-header .headprt {
		position: relative;
		top: 0;
		float: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		min-height: 24px;
		margin-top: 30px;
		padding: 0 90px 0 0;
	}

	/* Centered on the first nav line (half the 24px row), even when it wraps. */
	html.nz-refresh body.nanz-shop-page .site-header .headprt .site-search {
		position: absolute;
		top: 12px;
		right: 0;
		bottom: auto;
		display: flex;
		justify-content: flex-end;
		width: auto;
		margin: 0;
		transform: translateY(-50%);
	}
}

/* ---------- Slide pages ---------- */

/* Each homepage slide opens a page with the slide's photo (a block-editor image)
   over a product grid. The theme's figure { margin: 1em 10px } inset that photo
   10 px a side, so it showed 20 px narrower than the grid and than the slide
   on the homepage (Carl and Nate, 10/13: "a shrunken hero image that needs to
   match the width of the columns"). Only a figure directly above a grid. */
html.nz-refresh .entry-content > figure.wp-block-image:has(+ .product-grid) {
	margin-left: 0;
	margin-right: 0;
}

/* ---------- Finishes and Chasing: photo and text among the swatches ---------- */

/* Carl (10/15 call): with the text beside the photo the swatches still sat
   below the fold; he wants the photo, headline and text set within the swatch
   grid like a magazine page, as on Fremont. intro() in the head script
   (inc/site-refresh.php) moves them into the grid as two cells, placed by
   Design options → Finishes and Chasing layout (.nz-intro-on, data-intro).
   Each cell's edges line up with the tiles': its height is its rows of tile
   boxes (19:31 of a column) plus the caption bands between them (14 px to the
   caption, its 22 px line, then --nz-row-space; 66 px), with one band under
   it as under a tile, so a row of intro cells alone ("row") keeps the space
   before the next. Desktop only, where the grid is 3 across; phones keep the
   page's stack. Text is ragged right and unhyphenated: the site's justified
   setting opens rivers in columns this narrow. */
@media only screen and (min-width: 769px) {
	html.nz-refresh .product-grid-items.nz-intro-on {
		container-type: inline-size;
	}
	html.nz-refresh .nz-intro-on > .nz-intro-cell {
		--nz-col: calc((var(--nz-gw, 100cqw) - 24px) / 3); /* --nz-gw: Safari 15, intro() */
		--nz-box: calc(var(--nz-col) * 31 / 19);
		--nz-band: calc(var(--nz-cap-space) + 22px + var(--nz-row-space));
		--nz-span: calc(var(--nz-rows) * (var(--nz-box) + var(--nz-band)) - var(--nz-band));
		align-self: start;
		min-width: 0;
		margin: 0 0 var(--nz-band);
		box-sizing: border-box;
	}
	html.nz-refresh .nz-intro-on > .nz-intro-photo {
		height: var(--nz-span);
	}
	html.nz-refresh .nz-intro-on > .nz-intro-photo > p {
		height: 100%;
		margin: 0;
	}
	html.nz-refresh .nz-intro-on > .nz-intro-photo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover; /* both pages' subjects are central */
	}
	/* A collection page's group photo (Suzanne Tucker's six, 930 x 1200; Carl,
	   10/15 16:19: "could go full width so as not to be cropped"): row 1 across
	   all three columns at the photo's own height, nothing cut. Design options →
	   Collection group photo. */
	html.nz-refresh .nz-intro-on[data-photo-full] > .nz-intro-photo,
	html.nz-refresh .nz-intro-on[data-photo-full] > .nz-intro-photo > p,
	html.nz-refresh .nz-intro-on[data-photo-full] > .nz-intro-photo img {
		height: auto;
	}
	/* Suzanne Tucker Home's slideshow photos among its products (Carl, 10/15
	   14:41: "Like Fremont"; intro() places them). "row": two tiles wide, down
	   to the line of the captions beside it, then the usual space to the next
	   row; the square photo loses about a tenth of its height. "square": two by
	   two like Finishes' photo, cropped at the sides. The slideshow above the
	   grid goes while they are in it. */
	html.nz-refresh body.nz-slides-in-grid .nz-coll-slider {
		display: none;
	}
	html.nz-refresh .nz-intro-on > .nz-intro-slide {
		display: block;
		height: var(--nz-span);
	}
	html.nz-refresh .nz-intro-on[data-slides="row"] > .nz-intro-slide {
		height: calc(var(--nz-span) + var(--nz-cap-space) + 22px);
		margin-bottom: var(--nz-row-space);
	}
	html.nz-refresh .nz-intro-on > .nz-intro-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* The copy: a gray card (gray 4: the text color is 5.8:1 on it, and the
	   tiles beside these cards are never gray 4), at least as tall as its cells;
	   it grows rather than clip if text is added. */
	html.nz-refresh .nz-intro-on > .nz-intro-copy {
		min-height: var(--nz-span);
		padding: 16px;
		background: var(--nz-gray-4);
	}
	html.nz-refresh .nz-intro-on .nz-intro-copy > .nz-intro-head {
		margin: 0 0 12px;
		font-size: 17px !important; /* beats the all-caps 19pt rule and Finishes' inline 17pt */
		line-height: 1.15;
	}
	html.nz-refresh .nz-intro-on .nz-intro-copy > p {
		margin: 0;
		font-size: 13px;
		line-height: 1.4;
		text-align: left;
	}
	/* "row": a card one tile high across two columns; "top", "topright" and
	   "right" the same in cells 1-2, 2-3 and 5-6 (Carl's 10/16 16:19 call). */
	html.nz-refresh .nz-intro-on:is([data-intro="row"], [data-intro="top"], [data-intro="topright"], [data-intro="right"]) > .nz-intro-copy {
		padding: 18px 20px;
	}
	html.nz-refresh .nz-intro-on:is([data-intro="row"], [data-intro="top"], [data-intro="topright"], [data-intro="right"]) .nz-intro-copy > .nz-intro-head {
		margin-bottom: 10px;
		font-size: 19px !important;
	}
	html.nz-refresh .nz-intro-on:is([data-intro="row"], [data-intro="top"], [data-intro="topright"], [data-intro="right"]) .nz-intro-copy > p {
		font-size: 12.5px;
	}
	/* "tile" (collection pages, Carl 10/15: "Or a single cell"): one tile, so
	   tighter type; the card still grows rather than clip the longest copy. */
	html.nz-refresh .nz-intro-on[data-intro="tile"] > .nz-intro-copy {
		padding: 12px;
	}
	html.nz-refresh .nz-intro-on[data-intro="tile"] .nz-intro-copy > .nz-intro-head {
		margin-bottom: 8px;
		font-size: 15px !important;
	}
	html.nz-refresh .nz-intro-on[data-intro="tile"] .nz-intro-copy > p {
		font-size: 11px;
		line-height: 1.3;
	}
	/* "spread": no card; the text on white like a magazine's opening page, the
	   headline at the site's 19pt. */
	html.nz-refresh .nz-intro-on[data-intro="spread"] > .nz-intro-copy {
		min-height: 0;
		padding: 0 12px 0 0;
		background: none;
	}
	html.nz-refresh .nz-intro-on[data-intro="spread"] .nz-intro-copy > .nz-intro-head {
		margin-bottom: 14px;
		font-size: 19pt !important;
		line-height: 1.1;
	}
	html.nz-refresh .nz-intro-on[data-intro="spread"] .nz-intro-copy > p {
		font-size: 14px;
		line-height: 1.45;
	}
}

/* Collection pages on phones (Carl through June, 10/16 13:24: "the first two
   should be product, then the second two should be together as one
   double-wide with the title and copy, and then the next two go back to the
   product grid"). intro() puts the copy across the phone grid's row 2 (a
   group page's photo across row 1 above it). The card is one tile box high
   and grows rather than clip; under it the row space, as under a caption.
   Design options → Collection pages on phones. */
@media only screen and (max-width: 768px) {
	html.nz-refresh .product-grid-items.nz-intro-on {
		container-type: inline-size;
	}
	html.nz-refresh .nz-intro-on[data-intro="phone"] > .nz-intro-cell {
		align-self: start;
		min-width: 0;
		margin: 0 0 var(--nz-row-space);
		box-sizing: border-box;
	}
	html.nz-refresh .nz-intro-on[data-intro="phone"] > .nz-intro-photo > p {
		margin: 0;
	}
	html.nz-refresh .nz-intro-on[data-intro="phone"] > .nz-intro-photo img {
		display: block;
		width: 100%;
		height: auto;
	}
	html.nz-refresh .nz-intro-on[data-intro="phone"] > .nz-intro-copy {
		min-height: calc((var(--nz-gw, 100cqw) - 12px) / 2 * 31 / 19);
		padding: 18px 20px;
		background: var(--nz-gray-4);
	}
	html.nz-refresh.nz-phone-1 .nz-intro-on[data-intro="phone"] > .nz-intro-copy {
		min-height: 0;
	}
	html.nz-refresh .nz-intro-on[data-intro="phone"] .nz-intro-copy > .nz-intro-head {
		margin: 0 0 10px;
		font-size: 19px !important;
		line-height: 1.15;
	}
	/* 15 px, was 13 (Carl's 10/19 21:04 text; see Phone type, at the end). */
	html.nz-refresh .nz-intro-on[data-intro="phone"] .nz-intro-copy > p {
		margin: 0;
		font-size: 15px;
		line-height: 1.4;
		text-align: left;
	}
}

/* ---------- Collections: tiles and a text card ---------- */

/* Carl (10/15 text): the Collections slideshow "should also be tiled with copy
   cards", like Finishes and Chasing's Text card. inc/site-refresh.php writes
   ul.nz-colls (the copy, then a tile per slide) above the page's own content,
   kept as .nz-colls-src; Design options → Collections page shows one or the
   other. The slide photos are square, so the tiles are too, full bleed. The
   copy is two gray cards: its opening paragraphs two by two at the top left,
   ending level with the second row's photos (its bottom margin is one caption
   band: 10 px, a 15 px line, 24 px), and its last one tile-sized in the last
   cell, so 10 tiles fill five rows of three. One card for all of it measured
   766 px tall in one 191 px column and 345 px across two, stretching rows.
   More text makes a card, and its rows, taller rather than clip. Names are Goudy caps
   sized like the finish names under the swatches (10 px, 1 px spacing), in
   the text color as there (the page's links are orange), left under the
   photo. */
.nz-colls {
	display: none;
}

html.nz-refresh.nz-colls-tiles .nz-colls-src {
	display: none;
}

html.nz-refresh.nz-colls-tiles .nz-colls {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html.nz-refresh .nz-colls > li {
	min-width: 0;
	margin: 0;
	padding: 0 0 24px;
	list-style: none;
}

html.nz-refresh .nz-colls > .nz-colls-copy {
	grid-column: span 2;
	grid-row: span 2;
	margin-bottom: 49px;
	padding: 16px 18px;
	background: var(--nz-gray-4);
}

html.nz-refresh .nz-colls > .nz-colls-close {
	grid-column: auto;
	grid-row: auto;
	padding: 14px;
}

html.nz-refresh .nz-colls-copy > p {
	margin: 0 0 0.8em;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	hyphens: manual;
}

html.nz-refresh .nz-colls-copy > p:last-child {
	margin-bottom: 0;
}

/* COLLECTIONS at the top of the opening card (Carl, 10/15 16:39 text), in
   caps at the theme's 19pt like every other headline; Design options →
   Collections heading: None, as today. */
html.nz-refresh .nz-colls-copy > .nz-colls-head {
	margin: 0 0 12px;
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	line-height: 1.15;
	text-transform: uppercase;
}

html.nz-refresh.nz-collshead-off .nz-colls-copy > .nz-colls-head {
	display: none;
}

/* One paragraph, close under COLLECTIONS (Carl through June, 10/16 18:39:
   "too much space between the title and the copy", "It's only supposed to be
   one paragraph"; Design options → Collections copy). The page content gives
   its first paragraph the theme's .my-space (40 px on top, !important), and
   its opening is two paragraphs; they run on as one, 12 px under the title.
   The closing card is left alone. */
html.nz-refresh.nz-collcopy-one .nz-colls > .nz-colls-copy:not(.nz-colls-close) {
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

html.nz-refresh.nz-collcopy-one .nz-colls > .nz-colls-copy:not(.nz-colls-close) > p {
	display: inline;
	padding-top: 0 !important;
}

html.nz-refresh.nz-collcopy-one .nz-colls > .nz-colls-copy:not(.nz-colls-close) > p + p::before {
	content: " ";
}

/* A product page's copy ends with the collection it is in (Carl, 10/15 17:06
   text: "The No 1011 is in THE DRUM COLLECTION"), on a line of its own, the
   name in caps and linking to the collection page. The related items grid
   follows under it: js/refresh.js marks the strip blocks this line already
   names, and their headings and the strip title go. Design options → Collection line: None, as
   today. Hidden outside the refresh (Look: current site). */
.nz-coll-line {
	display: none;
}

html.nz-refresh.nz-collline-on .nz-coll-line {
	display: block;
	margin-top: 1em;
}

html.nz-refresh .nz-coll-line .nz-coll-line-name {
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

/* Outranks refresh-warm-text.css's orange for every link. */
html.nz-refresh .nz-coll-line .nz-coll-line-name:is(:link, :visited) {
	color: inherit;
}

html.nz-refresh .nz-coll-line .nz-coll-line-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

html.nz-refresh.nz-collline-on .nz-related.nz-named {
	padding-top: 24px;
}

html.nz-refresh.nz-collline-on .nz-related.nz-named > :is(.nz-related-note, .nz-related-title),
html.nz-refresh.nz-collline-on .nz-related-block.nz-named > .nz-related-collection {
	display: none;
}

html.nz-refresh.nz-collline-on .nz-related.nz-named > .nz-related-block:first-of-type {
	margin-top: 0;
}

/* The collection's own grid under the line, less this product (Carl through
   June, 10/15 17:38; nanz_refresh_coll_grids), moved by js/refresh.js to the
   foot of #main where the related strip sits; the strip hides while it shows.
   Design options → Collection grid: To complete the set brings the strip back. */
.nz-coll-grid {
	display: none;
}

html.nz-refresh.nz-collline-on.nz-collgrid-coll .nz-coll-grid {
	display: block;
	clear: both;
	padding: 24px 0 24px;
}

html.nz-refresh.nz-collline-on.nz-collgrid-coll #main:has(> .nz-coll-grid) > .nz-related {
	display: none;
}
/* The same for Safari before 15.4, which has no :has(): js/refresh.js marks
   #main when it moves the grid there. */
html.nz-refresh.nz-collline-on.nz-collgrid-coll #main.nz-has-coll-grid > .nz-related {
	display: none;
}

html.nz-refresh .nz-coll-grid-block + .nz-coll-grid-block {
	margin-top: 40px;
}

html.nz-refresh .nz-coll-grid-name {
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 14px;
}

html.nz-refresh .nz-coll-grid-name a:is(:link, :visited) {
	color: inherit;
	text-decoration: none;
}

/* Inside the product page's #main the product's own 36 px h1 rule reaches the
   captions: set them as the category grids' (as the related strip does). */
html.nz-refresh #main .nz-coll-grid .item .entry-title {
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: 1px;
	margin: 0 0 6.7px;
}

html.nz-refresh #main .nz-coll-grid .item .enprodnum {
	margin-bottom: 0;
}

html.nz-refresh .nz-colls-link {
	display: block;
	text-decoration: none;
}

/* Outranks refresh-warm-text.css's orange for every link. */
html.nz-refresh .nz-colls .nz-colls-link:is(:link, :visited) {
	color: inherit;
}

html.nz-refresh .nz-colls-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

html.nz-refresh .nz-colls-tile {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--nz-gray-1);
}

html.nz-refresh .nz-colls-tile img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Engravings instead of the photos (Nate, 10/16; Design options → Collection
   tiles): each group drawing whole inside its square, never cropped, black
   lines multiplied onto the tile's gray (the files are pure white behind the
   hardware) or on white. A tile without an engraving keeps its photo. */
html.nz-refresh .nz-colls-tile img.nz-colls-engr {
	display: none;
}

html.nz-refresh:is(.nz-collimg-gray, .nz-collimg-white) .nz-colls-tile--engr img.nz-colls-engr {
	display: block;
	box-sizing: border-box;
	padding: 7%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

html.nz-refresh:is(.nz-collimg-gray, .nz-collimg-white) .nz-colls-tile--engr img:not(.nz-colls-engr) {
	display: none;
}

html.nz-refresh.nz-collimg-white .nz-colls-tile--engr {
	background: #fff;
}

/* Lower on the gray (Carl through June, 10/16 18:38: "much lower on the gray
   backgrounds", "One-sixth below it"; Design options → Collection engravings):
   the drawing's foot a sixth of the tile up. Every file is landscape (1.20 to
   2.09) with 2.8% of its width as margin round the drawing, so at the 86%
   width the 7% sides leave, the foot is 2.4% of the tile above the image's
   bottom: 16.7% - 2.4%. The box stays wider than tall (86 x 78.7), so each
   drawing keeps its size and only moves down; all now share one foot line. */
html.nz-refresh.nz-collsit-sixth:is(.nz-collimg-gray, .nz-collimg-white) .nz-colls-tile--engr img.nz-colls-engr {
	padding-bottom: 14.3%;
	object-position: 50% 100%;
}

html.nz-refresh .nz-colls-name {
	display: block;
	padding-top: 10px;
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 15px;
	text-align: left;
	text-transform: uppercase;
}

/* Two across (Carl, 10/15 16:19 text: "Change collections to two grid wide";
   Design options → Collections across): the cards full width, the opening one
   above the tiles and the closing one below, as on phones; 10 tiles make five
   even rows. */
html.nz-refresh.nz-colls-tiles.nz-collsacross-2 .nz-colls {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.nz-refresh.nz-collsacross-2 .nz-colls > .nz-colls-copy {
	grid-column: 1 / -1;
	grid-row: auto;
	margin-bottom: 24px;
}

html.nz-refresh.nz-collsacross-2 .nz-colls > .nz-colls-close--beside {
	grid-column: auto;
	margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
	html.nz-refresh .nz-colls > .nz-colls-close--beside {
		grid-column: auto;
		margin-bottom: 0;
	}
}

/* The closing card beside the last tile is that tile's square, not the row's
   full height with the name band under it (Carl's 10/18 4:02 text, phone:
   "Make copy box even with product box please"). Longer copy still grows it. */
html.nz-refresh .nz-colls > .nz-colls-close--beside:not(.nz-colls-close--wide) {
	box-sizing: border-box;
	align-self: start;
	aspect-ratio: 1;
}

/* Which tiles (Carl's 10/16 20:48 text; Design options → Collections listed):
   every collection the side nav lists, in its order, or the slideshow's ten.
   A collection with no group photo shows Suzanne Tucker Home's first slide,
   or a product photo whole on the tile's gray like the engravings. Three
   across, 18 tiles leave the closing card's row one short: it takes two. */
html.nz-refresh.nz-collsrc-nav .nz-colls--slides,
html.nz-refresh.nz-collsrc-slides .nz-colls--nav {
	display: none !important;
}

html.nz-refresh .nz-colls-tile--product img {
	box-sizing: border-box;
	padding: 7%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

html.nz-refresh.nz-collsacross-3 .nz-colls > .nz-colls-close--wide {
	grid-column: span 2;
}

/* Phones: 2 across, the cards full width, one above the tiles and one below. */
@media only screen and (max-width: 768px) {
	html.nz-refresh.nz-colls-tiles .nz-colls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	html.nz-refresh .nz-colls > .nz-colls-copy {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-bottom: 24px;
	}
}

/* ---------- Hardware and Plumbing landing pages ---------- */

/* Each category's image on a warm-gray 5:8 tile in aligned rows, its name in
   caps under it, 3 across with the catalog's 12 px columns: /hardware/ in
   Carl's order (his 10/13 mockup had it 2 across; his 10/15 call: "make
   hardware 3 across like the plumbing is", captions the same size), /plumbing/
   as it was (his 10/13 text: "needs the 5x8 warm grey backgrounds too").
   inc/site-refresh.php writes the grid (ul.nz-cats) above the page's own
   columns and marks those .nz-cats-src; Design options → Hardware and Plumbing
   pages shows one or the other. Without the refresh classes (Look: current
   site, or no script) today's page shows.

   Measured on the hardware mockup, in tile widths (W): the image at most 0.9 W
   wide and 1.2 W tall, centered, 0.08 W off the tile's bottom; caption caps
   start 0.093 W under the tile at 0.077 W (14.7 px on a 191 px desktop tile,
   21 px at most), the next tile 0.266 W under the tile; its columns were 0.19 W
   apart (8.75% of a 2-wide grid, which phones keep). The mockup's tiles
   measure 0.69; Carl's "5x8" (0.625) is used on both pages. Each link is a
   size container, so cqw below is a hundredth of W, and percent padding on an
   item is a fraction of W too. */
.nz-cats {
	display: none;
}

html.nz-refresh.nz-landing-grid .nz-cats-src {
	display: none;
}

html.nz-refresh.nz-landing-grid .nz-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Clear space under a caption, before the next row. */
html.nz-refresh .nz-cats > .nz-cats-item {
	margin: 0;
	padding: 0 0 9.6%;
	list-style: none;
}

/* One link per tile and caption. The theme zeroes every outline (css/style.css
   "*, :after, :before"), so keyboard focus had no mark on these pages; the
   ring takes the caption's color, outside the tile, on white. */
html.nz-refresh .nz-cats-link {
	display: block;
	container-type: inline-size;
	text-decoration: none;
}

html.nz-refresh .nz-cats-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Grays by position: all four in turn like the catalog, so no neighbors match
   at 3, 2 or 1 across. Hardware's mocked pattern is for 2 across (phones,
   below): at 3 it would stack three gray 4s in the right column. */
html.nz-refresh .nz-cats > :nth-child(4n+1) { --nz-tile: var(--nz-gray-1); }
html.nz-refresh .nz-cats > :nth-child(4n+2) { --nz-tile: var(--nz-gray-2); }
html.nz-refresh .nz-cats > :nth-child(4n+3) { --nz-tile: var(--nz-gray-3); }
html.nz-refresh .nz-cats > :nth-child(4n+4) { --nz-tile: var(--nz-gray-4); }

html.nz-refresh .nz-cats-tile {
	position: relative;
	display: block;
	aspect-ratio: 5 / 8;
	background: var(--nz-tile, var(--nz-gray-1));
	isolation: isolate;
}

/* The images are on pure white (the engravings are line art; Plumbing's are
   product photos with no cut-outs yet), so multiply drops the white into the
   tile's gray. Bottom and height are fractions of the tile's height: 5% and
   75% are 0.08 W and 1.2 W on a 5:8 tile. */
html.nz-refresh .nz-cats-tile img {
	position: absolute;
	left: 5%;
	bottom: 5%;
	width: 90%;
	height: 75%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	object-position: 50% 100%;
	mix-blend-mode: multiply;
}

/* Goudy caps sized like the finish names under the swatches on /finishes/
   (.item h1 and .item a in style.css: 10 px, 1 px spacing, 15 px lines), at
   every width. Carl's 10/15 13:54 text ("I was wrong") undid the morning's
   Montserrat (47da6065) and the 21 px / 14.7 px sizes. In the page's link
   color: the warm text's (generated in css/refresh-warm-text.css) and, on
   /hardware/, its orange hover, both from the database's Custom CSS
   (#post-15321 a). */
html.nz-refresh .nz-cats-name {
	display: block;
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 1px;
	padding-top: 7.7%; /* the same W, for Safari 15 (no cqw) */
	padding-top: 7.7cqw;
	font-size: 10px;
	line-height: 15px;
	/* Flush with the tile's left edge (Carl, 10/15 15:47 text: "Justify left
	   with cell", "justify hardware and plumbing categories left"). */
	text-align: left;
	text-transform: uppercase;
}

/* Phones and small tablets: Plumbing goes 1 across (Carl, 10/14 call: "one
   wide on mobile instead of two"); Hardware stays 2 across as mocked, in its
   mocked grays (the pattern repeats every 14 tiles), and the Phone grid
   option's "1 across" takes it to 1. */
@media only screen and (max-width: 768px) {
	html.nz-refresh.nz-landing-grid .nz-cats-plumbing {
		grid-template-columns: minmax(0, 1fr);
	}

	html.nz-refresh.nz-landing-grid .nz-cats-hardware {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8.75%;
	}

	html.nz-refresh.nz-landing-grid.nz-phone-1 .nz-cats {
		grid-template-columns: minmax(0, 1fr);
	}

	html.nz-refresh .nz-cats-hardware > :is(:nth-child(14n+1), :nth-child(14n+10), :nth-child(14n+11)) { --nz-tile: var(--nz-gray-1); }
	html.nz-refresh .nz-cats-hardware > :is(:nth-child(14n+4), :nth-child(14n+8), :nth-child(14n+14)) { --nz-tile: var(--nz-gray-2); }
	html.nz-refresh .nz-cats-hardware > :is(:nth-child(14n+2), :nth-child(14n+5), :nth-child(14n+7), :nth-child(14n+12)) { --nz-tile: var(--nz-gray-3); }
	html.nz-refresh .nz-cats-hardware > :is(:nth-child(14n+3), :nth-child(14n+6), :nth-child(14n+9), :nth-child(14n+13)) { --nz-tile: var(--nz-gray-4); }
}

/* ---------- Plumbing tile captions ---------- */

/* A plumbing tile (NANZAQUATIC basin sets, tub fillers…) captioned with its
   code alone, set as the hardware tiles' codes are (Carl, 10/15 16:44 text:
   "skip everything but the code. And don't make it bold. When you click it
   all the info is on the next page anyway"). The theme stacks the
   collection, a short description and the code in 9 to 10 px Goudy, the code
   bold and in caps. Grids only: the product page keeps all three. Quick
   Ship keeps its own Montserrat code. Design options → Plumbing tile
   captions: Collection, name and code. */
html.nz-refresh.nz-pcap-code .product-grid .plumbing-item :is(.pi-cat, .pi-txt) {
	display: none;
}

/* The theme makes the link inline-block with 10 px under it, which set the
   code 7 px lower than a hardware code beside it; inline, as theirs is. */
html.nz-refresh.nz-pcap-code .product-grid .plumbing-item a {
	display: inline;
	margin-bottom: 0;
}

/* The hardware codes' values: .item h1 (10 px, 400, 0.67em under it), the
   Goudy stack and 1 px tracking from the link around it. */
html.nz-refresh.nz-pcap-code body:not(.nanz-shop-page) .product-grid .plumbing-item .entry-title {
	margin: 0 0 0.67em;
	font-family: inherit;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: inherit;
	line-height: 1.5;
	text-transform: none;
}

/* ---------- All-caps headlines ---------- */

/* Every all-caps Goudy headline at the theme's 19pt, DOORKNOBS's size (Carl,
   10/15 call: "just make them all the same as doorknobs"). Nine pages' content
   pins a smaller one inline on its div#headline, 16 to 18.84pt (Catalogue,
   Locations, Factory, Custom Work, Finishes, Order Management, Careers, Legal,
   Trim), sized to fit one line; only !important beats an inline style. The
   category pages' h2s (DOORKNOBS, LEVER HANDLES…) and the other headlines
   already take 19pt from css/style.css. */
html.nz-refresh div:is(#headline, #showrooms-headline)[style*="font-size"] {
	font-size: 19pt !important;
}

/* Then every headline at HAND-CHASED TEXTURES's size, 17 px (Carl, 10/17
   11:49 call: "all the same size, and it's chasing and texturing title";
   through June 10/16 18:10: "everything on the site to be the size of the
   hand-chased texture title"). That is the Chasing page's headline in its tall
   Text card at desktop; this sets the same 17 px on every page, in every copy
   card and layout, and on phones. The theme's 19pt rule's scope
   (div#headline, div#showrooms-headline, content h2s) plus the card headlines; Quick
   Ship keeps its own Montserrat headline. Design options → Headline size:
   19pt as before. */
html.nz-refresh.nz-heads-chasing body:not(.nanz-shop-page) :is(div#headline, div#showrooms-headline, .entry-content h2, h2.wp-block-heading, .nz-intro-head, .nz-colls-head, .nz-sgrid-head),
html.nz-refresh.nz-heads-chasing body:not(.nanz-shop-page) .nz-intro-on[data-intro] .nz-intro-copy > .nz-intro-head {
	font-size: 17px !important;
}

/* The product and finish page titles too (Carl's 10/17 13:50 text on Polished
   Gold: "Make title small like others. Also cat numbers."): the 36 px h1 on
   every single catalog page, finishes and Nº numbers alike. Plumbing's title is
   already 14 px under its category. The add-to-collection plus has an inline
   margin-top, so it is lifted with top to sit level with the smaller title. */
html.nz-refresh.nz-heads-chasing body.single-catalog:not(.nanz-shop-page) #main > article:not(.single-plumbing) .enprodnum h1.entry-title {
	font-size: 17px !important;
}
html.nz-refresh.nz-heads-chasing body.single-catalog:not(.nanz-shop-page) #main > article:not(.single-plumbing) .enprodnum ~ .enbutt {
	top: -5px;
}

/* Then the catalog numbers back to big (Carl's 10/17 14:22 text: "make the cat
   nombers back to big. Double the height of everything else."): 34 px, twice
   the 17 px headline, on every catalog page outside finishes (metals, woods and
   RAL plates all sit in product_cat finishes). Finish titles stay 17 px. The
   plus drops 5 px to centre on the bigger title. These four rules hold to the
   page's own article (#main > article): the collection grid's tiles under the
   line are articles too, and at 34 px on their 15 px line a two-line caption
   overlapped itself (Carl's 10/17 18:03 photo of Nº 1070). */
html.nz-refresh.nz-heads-chasing body.single-catalog:not(.nanz-shop-page) #main > article:not(.single-plumbing):not(.product_cat-finishes) .enprodnum h1.entry-title {
	font-size: 34px !important;
}
html.nz-refresh.nz-heads-chasing body.single-catalog:not(.nanz-shop-page) #main > article:not(.single-plumbing):not(.product_cat-finishes) .enprodnum ~ .enbutt {
	top: 5px;
}

/* ---------- Product page photo ---------- */

/* A gray box behind the hero, the photo's own size and place. With cut-outs on
   (the default, Carl 2026-10-12), js/refresh.js swaps in the photo's cut-out on
   gray 3; without one it multiplies like the tiles. "On white" shows today's hero.
   The theme's <img> has no width or height, so the head script
   (inc/site-refresh.php) copies the photo's size onto the header when it loads:
   --nz-hero-w (its natural width; it renders no wider than the column) and
   --nz-hero-ratio. Until then the box is a column-wide square, the shape of
   most product photos. 262 of 2,459 aren't square (finish swatches are
   landscape), and a fixed square ran under the title (Sarah, 10/13). */
html.nz-refresh.nz-hero-gray body.single-catalog #primary .entry-header {
	position: relative;
	isolation: isolate;
}

html.nz-refresh.nz-hero-gray body.single-catalog #primary .entry-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	width: min(100%, var(--nz-hero-w, 100%));
	margin: 0 auto;
	aspect-ratio: var(--nz-hero-ratio, 1);
	background: var(--nz-gray-3);
}

/* A block, centered as the theme's text-align centered it inline, so the space
   down to the title is exactly --nz-hero-title-space (inline, it was the line's
   descent, 7 px). The title and its Project button follow it. */
html.nz-refresh.nz-hero-gray body.single-catalog #primary .entry-header > img {
	display: block;
	margin: 0 auto var(--nz-hero-title-space);
	mix-blend-mode: multiply;
}

/* Lever and door-knob heroes (Carl through June, 10/15). The head prints the
   page's numbers (nanz_refresh_hero_frame, from inc/refresh-hero-frames.json):
   a lever's photo moves down --nz-hf-dy of its height, half the space under
   the lever, and that much is clipped off its bottom so it stays in its box; a
   door knob's photo scales to --nz-hf-s about the knob's base (--nz-hf-oy down
   the photo), so the space under it stays, and fades --nz-hf-fade at its edges,
   which now sit inside the box (some carry a shadow off the photo). Seamless
   because the cut-out's backdrop is the box's gray. Without numbers, nothing
   moves. */
html.nz-refresh.nz-heroplace-carl body.single-catalog #primary .entry-header > img {
	translate: 0 calc(var(--nz-hf-dy, 0) * 100%);
	clip-path: inset(0 0 calc(var(--nz-hf-dy, 0) * 100%) 0);
	scale: var(--nz-hf-s, 1);
	transform-origin: 50% calc(var(--nz-hf-oy, 1) * 100%);
	-webkit-mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-hf-fade, 0) * 100%), #000 calc(100% - var(--nz-hf-fade, 0) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-hf-fade, 0) * 100%), #000 calc(100% - var(--nz-hf-fade, 0) * 100%), transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-hf-fade, 0) * 100%), #000 calc(100% - var(--nz-hf-fade, 0) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-hf-fade, 0) * 100%), #000 calc(100% - var(--nz-hf-fade, 0) * 100%), transparent);
	mask-composite: intersect;
}

/* Reference framing (Carl and Nate's 10/16 call, the default): each knob, lever
   and door-hinge hero takes its group's reference product's place in the box
   (Nº 1018, Nº 2004, Nº 3573BF), measured by hero-frames.py into
   inc/refresh-hero-frames.json "r". The photo scales --nz-hr-s about the
   product's base centre (--nz-hr-ox/oy), moves by --nz-hr-tx/ty of its own
   size, is clipped to the box (insets in its own coordinates, so they move
   with it) and fades its edges, which may now sit inside the box. Seamless on
   the cut-out's gray; without numbers, nothing moves. */
html.nz-refresh.nz-heroplace-ref body.single-catalog #primary .entry-header > img {
	translate: calc(var(--nz-hr-tx, 0) * 100%) calc(var(--nz-hr-ty, 0) * 100%);
	scale: var(--nz-hr-s, 1);
	transform-origin: calc(var(--nz-hr-ox, 0.5) * 100%) calc(var(--nz-hr-oy, 1) * 100%);
	clip-path: inset(calc(var(--nz-hr-ct, 0) * 100%) calc(var(--nz-hr-cr, 0) * 100%) calc(var(--nz-hr-cb, 0) * 100%) calc(var(--nz-hr-cl, 0) * 100%));
	-webkit-mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-hr-fade, 0) * 100%), #000 calc(100% - var(--nz-hr-fade, 0) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-hr-fade, 0) * 100%), #000 calc(100% - var(--nz-hr-fade, 0) * 100%), transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, transparent, #000 calc(var(--nz-hr-fade, 0) * 100%), #000 calc(100% - var(--nz-hr-fade, 0) * 100%), transparent),
		linear-gradient(to right, transparent, #000 calc(var(--nz-hr-fade, 0) * 100%), #000 calc(100% - var(--nz-hr-fade, 0) * 100%), transparent);
	mask-composite: intersect;
}

/* The header pins on scroll with its white ending at the logo's foot, so the
   gray hero scrolled up under it met the logo (Sarah, 10/13). The 38 px the
   theme puts above the content moves inside the header: nothing shifts at the
   top of the page, and scrolled content now disappears 38 px below the logo.
   Phones are untouched: their header scrolls away rather than pinning. */
@media only screen and (min-width: 769px) {
	html.nz-refresh.nz-hero-gray body.single-catalog .site-header {
		padding-bottom: 38px;
	}

	html.nz-refresh.nz-hero-gray body.single-catalog .site-content {
		margin-top: 0;
	}
}

html.nz-refresh.nz-hero-gray body.single-catalog #primary .entry-header > img.nz-cut {
	mix-blend-mode: normal;
}

/* Quick Ship product pages (Carl, 10/13: their hero "should be in one of the
   warm, maybe the second warmest"): gray 2, the second warmest by red minus
   blue, where the theme has #F2F2EE (cabinet hardware) or white (door hardware
   sets). The box is the photo's own (.product-media hugs it), and the theme
   already multiplies the photo, whose backdrop is pure white, so it turns gray
   2 with no seam. Hero cut-outs exist on gray 3 only, so this stays multiply
   until gray-2 ones are made. Cabinet hardware has its photo directly in
   .product-media, door hardware sets one .pimage per function and finish; Bud
   Vases (.pimage too, but a styled shot on its own gray that Carl wants left
   as is) and Finish Samples (no photo) are neither. "On white" in Design
   options shows today's.
   Evening of 10/13 Carl asked for "paler gray": gray 1, paler than gray 2 and
   the warmest of the four. Design options > Quick Ship photo also offers the
   palest gray (4) and the earlier gray 2. */
html.nz-refresh.nz-hero-gray body.nanz-shop-page.product-page .product-content .product-media:has(> img) {
	background: var(--nz-qs-hero, var(--nz-gray-1));
}
/* Apart, so Safari before 15.4 (no :has()) keeps this one. */
html.nz-refresh.nz-hero-gray body.nanz-shop-page.hardware-product .product-content .product-media {
	background: var(--nz-qs-hero, var(--nz-gray-1));
}
html.nz-qshero-palest { --nz-qs-hero: var(--nz-gray-4); }

/* Quick Ship heroes of a knob in several sizes (8030, 8034, 8017), half the
   space under the knobs (Carl through June, 10/16 18:34; Design options →
   Quick Ship knob groups). inc/site-refresh.php prints --nz-qs-drop, half the
   photo's gap, on those pages only: the photo moves down that much and as
   much is clipped off its bottom (white backdrop), so the box keeps its size
   and the top it uncovers is the box's own gray, as the multiplied white is. */
html.nz-refresh.nz-qsgroup-lower body.nanz-shop-page.product-page .product-content .product-media > img {
	translate: 0 calc(var(--nz-qs-drop, 0) * 100%);
	clip-path: inset(0 0 calc(var(--nz-qs-drop, 0) * 100%) 0);
}
html.nz-qshero-gray2 { --nz-qs-hero: var(--nz-gray-2); }

/* ---------- Footer: Futura Medium throughout ---------- */

html.nz-refresh .site-footer .site-info,
html.nz-refresh .site-footer .site-info p {
	font-family: var(--nz-futura);
	font-weight: 500;
}

/* ---------- Phones ---------- */

@media only screen and (max-width: 768px) {
	/* Tile to tile as before 10/13: 10 px to the caption, its band, then this.
	   54 px at 601-768 px; phones below fold in the theme's footer margin. */
	:root {
		--nz-row-space: 22px;
		--nz-cap-space: 10px;
		--nz-hero-title-space: 10px;
	}

	html.nz-refresh .product-grid-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}

	html.nz-refresh .product-grid-items .item .enwrap {
		padding: var(--nz-cap-space) 0 var(--nz-row-space);
	}

	html.nz-refresh body.nanz-shop-page .product-grid-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4px;
	}

	/* Handle Sets and NANZAQUATIC's Quick Ship pages are 1 across whatever the
	   Phone grid option says (Carl, 10/14 call; inc/site-refresh.php). */
	html.nz-refresh.nz-phone-1 .product-grid-items,
	html.nz-refresh.nz-phone-1 body.nanz-shop-page .product-grid-items,
	html.nz-refresh body.nanz-shop-page.nz-phone-one-across .product-grid-items {
		grid-template-columns: minmax(0, 1fr);
	}

	html.nz-refresh body.nanz-shop-page .product-grid-items .item .enwrap {
		padding: 10px 10px 22px;
	}
}

/* The theme's 20 px footer margin applies up to 600 px only (css/style.css),
   so only there does the catalog's 22 px take it in (it is zeroed above):
   74 px tile to tile at 390 px, as before 10/13. */
@media only screen and (max-width: 600px) {
	:root {
		--nz-row-space: 42px;
	}
}

/* ---------- Row spacing: half the white space between rows ---------- */

/* Carl through June (10/16 13:55): "cutting the space in between the
   products, top to bottom, in half. Don't change the side-to-side spacing";
   "across the whole site". The caption stays; the white above and below its
   text is halved, measured from the tiles to the caption's ink on staging
   (catalog 17 + 42 px at 1440 became 9 + 21, tile to tile 66 to 37; Quick
   Ship 17 + 35 became 9 + 17, 92 to 66). Every product grid, the Hardware and
   Plumbing landing pages and /collections/. Columns untouched. Design options
   → Row spacing: As before drops the class. */
html.nz-refresh.nz-rows-half {
	--nz-cap-space: 6px;
	--nz-row-space: 9px;
}

html.nz-refresh.nz-rows-half body.nanz-shop-page .product-grid-items .item .enwrap {
	padding: 6px 16px 12px;
}

/* Landing pages: in tile widths, as above (the line's leading is 3 px above
   the caps and 4.5 px under them). */
html.nz-refresh.nz-rows-half .nz-cats-name {
	padding-top: calc(3.85% - 1.5px);
	padding-top: calc(3.85cqw - 1.5px);
}

html.nz-refresh.nz-rows-half .nz-cats > .nz-cats-item {
	padding-bottom: calc(4.8% - 2px);
}

/* /collections/: 10 px over the names and 24 under became 4 and 10; the
   opening card ends at the band (3 across) or a half-height gap. */
html.nz-refresh.nz-rows-half .nz-colls-name {
	padding-top: 4px;
}

html.nz-refresh.nz-rows-half .nz-colls > li {
	padding-bottom: 10px;
}

html.nz-refresh.nz-rows-half .nz-colls > .nz-colls-copy {
	margin-bottom: 29px;
}

html.nz-refresh.nz-rows-half.nz-collsacross-2 .nz-colls > .nz-colls-copy {
	margin-bottom: 12px;
}

@media only screen and (max-width: 768px) {
	html.nz-refresh.nz-rows-half {
		--nz-cap-space: 4px;
		--nz-row-space: 5px;
	}
	html.nz-refresh.nz-rows-half body.nanz-shop-page .product-grid-items .item .enwrap {
		padding: 4px 10px 9px;
	}
	html.nz-refresh.nz-rows-half .nz-colls > .nz-colls-copy {
		margin-bottom: 12px;
	}
}

/* Up to 600 px the theme's 20 px footer margin went into Quick Ship's space
   too: zero it here and count it in the padding. */
@media only screen and (max-width: 600px) {
	html.nz-refresh.nz-rows-half {
		--nz-row-space: 15px;
	}
	html.nz-refresh.nz-rows-half body.nanz-shop-page .product-grid-items .item .entry-footer {
		margin-top: 0 !important;
	}
	html.nz-refresh.nz-rows-half body.nanz-shop-page .product-grid-items .item .enwrap {
		padding-bottom: 19px;
	}
}

/* ---------- Design switcher (staging only, js/refresh.js) ---------- */

.nzr-switcher {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 100000;
	max-width: 260px;
	font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	color: #222;
}

/* Colors !important: the generated text colors (css/refresh-warm-text.css)
   outrank these plain rules, which left a pressed option's label warm gray on
   its near-black fill. */
.nzr-switcher button {
	font: inherit;
	color: #222 !important;
	cursor: pointer;
}

.nzr-toggle {
	align-self: flex-start;
	padding: 7px 12px;
	border: 1px solid #bbb;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.nzr-body {
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	max-height: 70vh;
	overflow: auto;
}

/* The panel opens upward from the toggle. */
.nzr-switcher {
	display: flex;
	flex-direction: column-reverse;
}

.nzr-body[hidden] {
	display: none;
}

.nzr-body fieldset {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}

.nzr-body legend {
	margin-bottom: 3px;
	padding: 0;
	font-weight: 600;
}

.nzr-body fieldset button {
	margin: 0 4px 4px 0;
	padding: 3px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f6f6f6;
}

.nzr-body fieldset button[aria-pressed="true"] {
	border-color: #222;
	background: #222;
	color: #fff !important;
}

.nzr-reset {
	padding: 3px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

.nzr-body p {
	margin: 8px 0 0;
	color: #666;
	font-size: 11px;
}

/* ---------- Quick Ship search icon in the text gray ---------- */

/* NH-3600/NH-3619 made Quick Ship's search icon a black PNG for visibility; with the
   text in warm gray it read as "a different black" beside the nav (Nate, 10/13). The
   same Material "search" glyph as an SVG in the text color (still 6.8:1 on white).
   Same selectors as css/style.css, so its :not(:focus) logic and sizing still apply. */
html.nz-refresh.nz-ink-95 body.nanz-shop-page .site-search form input[type="text"]:not(:focus),
html.nz-refresh.nz-ink-95 body.nanz-shop-page.product-page:not(.finish-samples-product) .site-search form input[type="text"]:hover:not(:focus) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235F5A55' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}
html.nz-refresh.nz-ink-warm body.nanz-shop-page .site-search form input[type="text"]:not(:focus),
html.nz-refresh.nz-ink-warm body.nanz-shop-page.product-page:not(.finish-samples-product) .site-search form input[type="text"]:hover:not(:focus) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233B3632' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

/* ---------- Finials all in polished nickel ---------- */

/* Carl through June, 10/16 18:20. nanz_refresh_finials puts each strip's nickel copy
   beside the page's photo with the same size and classes, so the letter codes under it
   keep their place. The photo shows unless the refresh's Finials option says nickel
   (the default), so the current look and a refresh-off site see the page as before. */
.nz-finial-nickel {
	display: none;
}
html.nz-refresh.nz-finials-nickel .nz-finial-photo {
	display: none;
}
html.nz-refresh.nz-finials-nickel .nz-finial-nickel {
	display: block;
}

/* ---------- Since 1891: copy in warm gray blocks ---------- */

/* Carl's 10/16 19:14 text: "all copy in blocks in 1891 ... pricing etc. should be in
   warm grey blocks under images" (Pricing, Green Initiative, Samples, The Orange Book
   and the rest of /company/). js/refresh.js copyBlocks wraps each run of text after a
   photo; gray 4, as the collection pages' copy cards (the text is 5.8:1 on it). The
   headline's .my-space top padding (40 px, !important) gives way to the block's own. */
html.nz-refresh.nz-co1891-blocks .nz-copy-block {
	margin: 0 0 12px;
	padding: 20px 24px 22px;
	background: var(--nz-gray-4);
}
html.nz-refresh.nz-co1891-blocks .nz-copy-block > :first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
html.nz-refresh.nz-co1891-blocks .nz-copy-block > :last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
html.nz-refresh.nz-co1891-blocks .nz-copy-block > .nz-copy-empty {
	display: none;
}

/* ---------- Manufactured in NY and Custom Work: slideshows as grids ---------- */

/* Carl, 10/17 11:49 call. inc/site-refresh.php nanz_refresh_slide_grid writes
   ul.nz-sgrid (the page's copy in a card, then a tile per slide) above the page,
   kept as .nz-sgrid-src. Three across like /collections/, the copy two by two at
   the top left on gray 4. The photos are 4:3 (610 x 475, 960 x 720) with a few
   squares, so the tiles are 4:3, full bleed. Warm black and white (grayscale,
   then a little sepia) that turns full colour under the pointer; phones and
   touch screens get colour, as Carl asked. */
.nz-sgrid {
	display: none;
}
html.nz-refresh:is(.nz-slidegrid-mosaic, .nz-slidegrid-grid) .nz-sgrid-src {
	display: none;
}
html.nz-refresh:is(.nz-slidegrid-mosaic, .nz-slidegrid-grid) .nz-sgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
html.nz-refresh .nz-sgrid > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
html.nz-refresh .nz-sgrid > .nz-sgrid-copy {
	grid-column: span 2;
	grid-row: span 2;
	padding: 16px 18px;
	background: var(--nz-gray-4);
}
html.nz-refresh .nz-sgrid > .nz-sgrid-close {
	grid-column: span var(--nz-span, 3);
	grid-row: auto;
	padding: 14px 18px;
}
html.nz-refresh .nz-sgrid-copy > .nz-sgrid-head {
	margin: 0 0 12px;
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	line-height: 1.15;
	text-transform: uppercase;
}
html.nz-refresh .nz-sgrid-copy > p {
	margin: 0 0 0.8em;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	hyphens: manual;
}
html.nz-refresh .nz-sgrid-copy > p:last-child {
	margin-bottom: 0;
}
html.nz-refresh .nz-sgrid-item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nz-gray-1);
}
html.nz-refresh .nz-sgrid-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
@media (hover: hover) and (min-width: 769px) {
	html.nz-refresh .nz-sgrid-item img {
		filter: grayscale(1) sepia(0.3);
		transition: filter 0.4s ease;
	}
	html.nz-refresh .nz-sgrid-item:hover img {
		filter: none;
	}
}
@media only screen and (max-width: 768px) {
	html.nz-refresh:is(.nz-slidegrid-mosaic, .nz-slidegrid-grid) .nz-sgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	html.nz-refresh .nz-sgrid > .nz-sgrid-copy {
		grid-column: 1 / -1 !important;
		grid-row: auto;
	}
}

/* Mixed sizes (Carl's 10/17 4:07 text: "more complex. Some bigger than
   others"), the default. Six columns, and a row unit an eighth of the width
   less the gaps, so a small tile (two by two) is the even grid's 4:3 tile, a
   mid (three by three) half the width and a big (four by four, the copy card's
   size) two thirds, each within 2% of the photos' 4:3: no more cropping than
   before. inc/site-refresh.php nanz_refresh_slide_grid_sizes deals the sizes
   in bands that fill the width; the wrapper is the container the row unit is
   measured against. Phones keep the even two across. */
html.nz-refresh .nz-sgrid-wrap {
	container-type: inline-size;
}
@media only screen and (min-width: 769px) {
	html.nz-refresh.nz-slidegrid-mosaic .nz-sgrid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: calc((100cqw - 72px) / 8);
	}
	html.nz-refresh.nz-slidegrid-mosaic .nz-sgrid > .nz-sgrid-item {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;
	}
	html.nz-refresh.nz-slidegrid-mosaic .nz-sgrid > .nz-sgrid-mid {
		grid-column: span 3;
		grid-row: span 3;
	}
	html.nz-refresh.nz-slidegrid-mosaic .nz-sgrid > :is(.nz-sgrid-big, .nz-sgrid-copy) {
		grid-column: span 4;
		grid-row: span 4;
	}
	/* Two row units leave room for the closing line at any width; the
	   card itself is only as tall as its text. */
	html.nz-refresh.nz-slidegrid-mosaic .nz-sgrid > .nz-sgrid-close {
		grid-column: 1 / -1;
		grid-row: span 2;
		align-self: start;
	}
}

/* ---------- Page width (option, 10/17) ----------
   Carl's 10/17 5:33 text: "How hard would it be to do full width like the
   quick ship for the whole site?" The theme sets every page in a 760 px
   column (header, content, 780 px footer); Quick Ship's pages
   (body.product-page) drop it for 80 px margins, 15 px up to 1024 px. Full
   width gives every other page the same. The content and nav columns and the
   grids inside are percentages, so they widen as they are and keep their
   counts; grid photos are 800 px, so they stay sharp. The logo keeps its
   760-column size (27.5% of the header there). A product page's hero would
   grow past the screen, so it stops at the screen's height less the header
   and sits at the left with the title, and its copy keeps a 760 px measure.
   Phones are untouched. The visitor picks with the icon under the search
   magnifier (Page width icon, below); condensed until they do. Quick Ship
   has the icon too, and condensed holds it to 1440 px (same section). */
@media only screen and (min-width: 769px) {
	html.nz-refresh.nz-width-full body:not(.product-page) :is(.site-header, .site-content, .site-footer) {
		max-width: none;
		padding-left: 80px;
		padding-right: 80px;
	}

	html.nz-refresh.nz-width-full body:not(.product-page) .site-header .site-branding {
		width: 209px;
	}

	/* MetaSlider caps its slideshows at their set width (the home page's at
	   936 px) and centres them in an inline style, hence !important; in the
	   column they always filled it. At the left they line up with the logo
	   and the grids. */
	html.nz-refresh.nz-width-full body:not(.product-page) .site-content .metaslider {
		margin-left: 0 !important;
	}

	/* style.css caps the catalog grids (.product-grid: Knobs, Levers, The
	   New, Finishes, every collection) at 68em, 1088 px, centred, so on
	   screens past about 1600 px they stopped short of the logo's line while
	   /hardware/ and /plumbing/ ran to it (Carl's 10/18 3:38 call: "Domus
	   doesn't go to the edge ... if you go to knobs, it doesn't"). */
	html.nz-refresh.nz-width-full body:not(.product-page) .product-grid {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	html.nz-refresh.nz-width-full.nz-hero-gray body.single-catalog #primary .entry-header::before {
		width: min(100%, var(--nz-hero-w, 100%), calc((100vh - 220px) * var(--nz-hero-ratio, 1)));
		margin-left: 0;
	}

	html.nz-refresh.nz-width-full.nz-hero-gray body.single-catalog #primary .entry-header > img {
		max-width: min(100%, calc((100vh - 220px) * var(--nz-hero-ratio, 1)));
		margin-left: 0;
	}

	html.nz-refresh.nz-width-full body.single-catalog #primary .entry-content {
		max-width: 760px;
	}

	/* The header's right-hand group (.headprt: My Order, search, account) is
	   pinned to the header's padding edge, and the search hangs 142 px in from
	   it, over the side nav's 19% column. In the column there is no padding
	   and the nav is 144 px wide; here the group comes in to the margin and
	   the search follows the nav's width, so the magnifier and the page width
	   icon stay over the nav. */
	html.nz-refresh.nz-width-full body:not(.product-page) .site-header .headprt {
		right: 80px;
	}
	html.nz-refresh.nz-width-full body:not(.product-page) .site-header .site-search {
		right: calc((100vw - 160px) * 0.1897 - 2px);
		left: auto;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	html.nz-refresh.nz-width-full body:not(.product-page) :is(.site-header, .site-content, .site-footer) {
		padding-left: 15px;
		padding-right: 15px;
	}
	html.nz-refresh.nz-width-full body:not(.product-page) .site-header .headprt {
		right: 15px;
	}
	html.nz-refresh.nz-width-full body:not(.product-page) .site-header .site-search {
		right: calc((100vw - 30px) * 0.1897 - 2px);
	}
}

/* ---------- Page width icon (10/17) ----------
   Carl's 10/17 6:24 and 6:25 texts: "LETS LET THE USER DECIDE ABOUT FULL
   SCREEN VS NOT", "AN ICON BELOW THE MAGNIFYING GLASS", drawn as two outline
   triangles, pointing out while condensed, pointing in while full width
   (nanz_refresh_width_toggle); his drawing's box round them went at his 6:31
   text ("Just the triangles").

   Carl through June, 10/17 6:48: the magnifier "redrawn as simply a circle
   and a line", both icons in "the stroke of the right-hand navigation", the
   magnifier "even with the top of the orange NANZ logo", the triangles "even
   with the bottom", both "left-aligned with the right-hand navigation".
   The nav is Montserrat 400 at 9 px, whose stems measure 0.071 em in Chrome:
   0.65 px. The logo's orange box runs from the header's 55 px to 115 px (the
   ® hangs below it); the nav's first letter starts 13.9 px right of
   .site-search's edge, in the column and at full width alike. The magnifier
   is the search box's background, drawn in CSS pixels: a 5 px circle whose
   left edge is 3.9 px into the 18 px image, whose top is the image's.

   Quick Ship (his 6:50 follow-up): the magnifier stays where it is, both in
   the stroke of Quick Ship's top nav (Montserrat 400 at 12 px: 0.85 px), the
   triangles' top on the green logo's top border (55 px since the logo took the
   orange one's size and place, 10/17 11:14 PM) and their centre under the magnifier's: both are 18 px
   wide on the header's right padding edge, the circle-and-line centred in its
   image. Condensed holds Quick Ship to 1440 px, the widest screen its top nav
   fits one line on as built (Filter results wraps under it below that), so
   the icon changes Quick Ship only on screens wider than that (its footer
   is in the 760 px column either way). Phones keep
   neither change.

   Carl through June, 10/18 10:22: "I don't want it tied to the logo anymore.
   I want it tied to itself", the triangles and the magnifier spaced "from the
   existing navigation rather than tied to the borders of the logo", on both.
   So the icons now sit at each nav's own gap between items, ink to ink. Main
   site: the side nav's caps are 52.1 px apart (baseline to next cap top), so
   the triangles' bottom is 52.1 px over BUY NOW's cap top (159.1 px) and the
   magnifier's bottom 52.1 px over the triangles' top: magnifier 32-45,
   triangles 97-107 (the home page's nav, and so both, 9.9 px lower). Quick
   Ship: the magnifier stays on the top nav's line; its items are 32 px apart,
   so the triangles sit 32 px over the magnifier, still centred on it.

   Carl through June, 10/18 12:53, main site only: "reduce the distance
   between the words Buy Now in the right navigation and the arrows by 5%, and
   ... the space between the arrows and the magnifying glass by 10%." So
   triangles to BUY NOW 52.1 -> 49.5 px (triangles 99.6-109.6) and magnifier
   to triangles 52.1 -> 46.9 px (magnifier 39.7-52.7).

   Carl through June, 10/18 13:34: "reduce the distance between Buy Now and
   the arrows by another 5% and the distance between the arrows and the
   magnifying glass ... also by another 5%." 5% of each current gap: triangles
   to BUY NOW 49.5 -> 47.0 px (triangles 102.1-112.1), magnifier to triangles
   46.9 -> 44.6 px (magnifier 44.5-57.5).

   Carl through June, 10/18 14:04: "let's make the magnifying glass 5% closer
   to the arrows", then 14:09: "yet another 5% closer". Two steps of 5% of the
   gap then: magnifier to triangles 44.6 -> 42.4 -> 40.25 px (magnifier
   48.85-61.85); the triangles and BUY NOW stay put.

   Carl through June, 10/18 14:46: "reduce the space between the arrows and
   the magnifying glass by 5% again", then 15:02: "drop 5% of the space
   between Buy Now and the arrows and 10% between the arrows and the
   magnifying glass". Read as on top of each other: triangles to BUY NOW
   47.0 -> 44.65 px (triangles 104.45-114.45), magnifier to triangles
   40.25 -> 38.24 -> 34.41 px (magnifier 57.04-70.04).

   Carl's 10/18 3:38 call with Nate: "switch the triangles with the search?
   Put the triangles at the top and search where the triangles are", as
   Quick Ship has them. Main site: the triangles' top takes the magnifier's
   (57.04), the magnifier's bottom the triangles' (114.45), and the two gaps
   keep their order from the top: triangles 57.04-67.04, 34.41 px, magnifier
   101.45-114.45, 44.65 px to BUY NOW. So .site-search moves down 44.41 px
   and the toggle, inside it, sits 29.91 px above it.

   Carl's 4:09 text the same afternoon, before that reached staging: "Keep
   search on top. Arrows below." Back to the 15:02 places: magnifier
   57.04-70.04, triangles 104.45-114.45. Quick Ship is unchanged.

   Carl, 10/19 (text 11:38, "Switch magnifying glass and double arrows on
   quickship/buy now sites", and to Nate by phone 12:32: the magnifier
   above the triangles, as on the main site). Quick Ship's two swap places:
   the magnifier's centre takes the triangles' (126 px at 1400, 43.5 px
   over the top nav's first line) and the triangles' centre the magnifier's
   (169.5 px, on that line). Buy Now is Quick Ship's Cabinetry Hardware, so
   it has the same header. */
.nz-width-toggle {
	display: none;
}
@media only screen and (min-width: 769px) {
	html.nz-refresh body:not(.product-page) .site-header .site-search {
		top: 12.64px;
	}
	html.nz-refresh body.home .site-header .site-search {
		top: 22.54px; /* the home page's nav sits 9.9 px lower */
	}
	/* My Order (shown once the cart has something) sat on the magnifier since
	   the magnifier came down to 57.04 px (Nate, 10/19: "it should go above").
	   It now heads the stack: its baseline the magnifier-to-triangles gap
	   (34.41 px) over the magnifier, so caps 16.2-22.5 px, in the column's left
	   edge as before; the home page's 9.9 px lower with its search. */
	html.nz-refresh body:not(.product-page) .site-header .top-my-order {
		top: -25.48px;
	}
	html.nz-refresh body.home .site-header .top-my-order {
		top: -15.58px;
	}
	html.nz-refresh body:not(.product-page) .site-search form input[type="text"]:not(:focus) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239A9A9A' stroke-width='.65'%3E%3Ccircle cx='9.22' cy='5.33' r='5'/%3E%3Cpath d='M12.76 8.87l3.89 3.89'/%3E%3C/svg%3E");
		background-size: 18px 18px;
		background-position: 0 0;
	}
	html.nz-refresh body:not(.product-page) .site-search form input[type="text"]:hover:not(:focus) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23E27114' stroke-width='.65'%3E%3Ccircle cx='9.22' cy='5.33' r='5'/%3E%3Cpath d='M12.76 8.87l3.89 3.89'/%3E%3C/svg%3E");
	}
	html.nz-refresh body:not(.product-page) .site-search .nz-width-toggle {
		display: block;
		position: absolute;
		top: 61.91px;
		left: 14px;
		color: #9a9a9a;
	}
	html.nz-refresh body:not(.product-page) .nz-width-toggle:hover,
	html.nz-refresh body:not(.product-page) .nz-width-toggle:focus-visible {
		color: #555;
	}

	html.nz-refresh:not(.nz-ink-warm) body.nanz-shop-page .site-search form input[type="text"]:not(:focus),
	html.nz-refresh:not(.nz-ink-warm) body.nanz-shop-page.product-page:not(.finish-samples-product) .site-search form input[type="text"]:hover:not(:focus) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%235F5A55' stroke-width='.85'%3E%3Ccircle cx='7.85' cy='7.85' r='5'/%3E%3Cpath d='M11.39 11.39l3.89 3.89'/%3E%3C/svg%3E");
		background-size: 18px 18px;
	}
	html.nz-refresh.nz-ink-warm body.nanz-shop-page .site-search form input[type="text"]:not(:focus),
	html.nz-refresh.nz-ink-warm body.nanz-shop-page.product-page:not(.finish-samples-product) .site-search form input[type="text"]:hover:not(:focus) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%233B3632' stroke-width='.85'%3E%3Ccircle cx='7.85' cy='7.85' r='5'/%3E%3Cpath d='M11.39 11.39l3.89 3.89'/%3E%3C/svg%3E");
		background-size: 18px 18px;
	}
	html.nz-refresh body.nanz-shop-page .site-header > .nz-width-toggle {
		display: block;
		position: absolute;
		top: 164.5px; /* on the top nav's first line, where the magnifier was */
		right: 80px;
		z-index: 3; /* over .headprt (z-index 2), which spans that line and took its clicks */
		color: #5f5a55;
	}
	html.nz-refresh.nz-ink-warm body.nanz-shop-page .site-header > .nz-width-toggle {
		color: #3b3632;
	}
	html.nz-refresh body.nanz-shop-page .site-header > .nz-width-toggle:hover,
	html.nz-refresh body.nanz-shop-page .site-header > .nz-width-toggle:focus-visible {
		color: #000;
	}
	html.nz-refresh body.nanz-shop-page .nz-width-toggle svg {
		stroke-width: .85px;
	}
	html.nz-refresh body.nanz-shop-page .site-header .headprt .site-search {
		top: -31.5px; /* 12 px less 43.5: above the triangles, where they were */
	}
	html.nz-refresh.nz-width-today body.nanz-shop-page :is(.site-header, .site-content) {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}

	html.nz-refresh .nz-width-toggle {
		width: 18px;
		height: 10px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		line-height: 0;
	}
	html.nz-refresh .nz-width-toggle svg {
		width: 18px;
		height: 10px;
		fill: none;
		stroke: currentColor;
		stroke-width: .65px;
		stroke-linejoin: miter;
		overflow: visible;
	}
	html.nz-refresh.nz-width-today .nz-width-toggle .nz-wt-condense,
	html.nz-refresh.nz-width-full .nz-width-toggle .nz-wt-expand {
		display: none;
	}
}
/* The header's right padding: 15 px up to 1024, 40 px to 1200 (the theme's). */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	html.nz-refresh body.nanz-shop-page .site-header > .nz-width-toggle {
		right: 15px;
	}
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
	html.nz-refresh body.nanz-shop-page .site-header > .nz-width-toggle {
		right: 40px;
	}
}

/* The side nav's Instagram logo in the nav's own stroke (Carl through June,
   10/18 13:35: "the stroke to be the same as the stroke in all of the
   right-hand navigation words ... it's gonna be thin"). style.css draws it
   (NH-3716) as a 24-unit mask at 1em, 15 px here, with a 2-unit stroke: 1.25 px
   on screen. The nav's Montserrat 400 at 9 px has 0.65 px stems (see the
   magnifier above), so the stroke is 0.65 x 24 / 15 = 1.04 units, and the
   lens dot shrinks with it. Side nav only; the phone menu keeps its own. */
html.nz-refresh .widget-area a.inst-link .fa-instagram {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.04'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.04'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* ---------- Monograms ---------- */

/* Carl through June, 10/18 14:07-14:08 (inc/site-refresh.php
   nanz_refresh_monograms). The knob photos on top, six across, where the big
   knob was; the headline and text in a gray-4 card as on /collections/; the
   six archive sheets three across in the catalog's 12 px grid on the tile
   grays. The sheets are white monograms on black: inverted they are black on
   white, and multiplied onto the gray like the engravings, the white drops
   out, so the monograms are the engravings' black on warm gray.

   Carl through June, 10/18 14:53-14:54: the knobs as engravings and
   vertical, the copy block narrower, the sheets two across and three down,
   all on the lightest warm gray. The knobs stand three across, six down, as
   one gray-4 panel (each engraving multiplied onto it, as one drawing), the
   copy card beside it at the panel's height, then the sheets two across,
   three down. (First tried with the sheets under the copy in its column: that
   side ran ~350 px past the knobs.)

   Carl through June, 10/18 15:20: "Keep the grid of engraved knobs as it is.
   Put the block of monograms and insignias and emblems below that, and then
   the two-by-three grid of examples of monograms below that. And then make
   everything wider rather than having some of them side by side." So all
   three stack at the column's full width, on every screen. */
.nz-mono {
	display: none;
}
html.nz-refresh .nz-mono {
	display: block;
}
html.nz-refresh .nz-mono-src {
	display: none;
}
html.nz-refresh .nz-mono-knobs,
html.nz-refresh .nz-mono-sheets {
	display: grid;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
html.nz-refresh .nz-mono-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0 0 12px;
}
html.nz-refresh .nz-mono-pair > .nz-mono-copy {
	margin: 0;
}
html.nz-refresh .nz-mono-knobs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 12px;
	background: var(--nz-gray-4);
}
html.nz-refresh .nz-mono-knob--engraved img {
	mix-blend-mode: multiply;
}
html.nz-refresh .nz-mono-sheets {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 24px;
}
html.nz-refresh :is(.nz-mono-knobs, .nz-mono-sheets) > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
html.nz-refresh .nz-mono img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
}
html.nz-refresh .nz-mono-copy {
	margin: 0 0 12px;
	padding: 16px 18px;
	background: var(--nz-gray-4);
}
html.nz-refresh .nz-mono-copy > .nz-mono-head {
	margin: 0 0 12px;
	font-family: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	line-height: 1.15;
	text-transform: uppercase;
}
html.nz-refresh .nz-mono-copy > p {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	hyphens: manual;
}
/* Carl's 10/18 5:25 text: the tearsheet line in a small card too, the
   sheets' width, under them. */
html.nz-refresh .nz-mono-tear {
	margin: 0 0 24px;
	padding: 12px 18px;
}
html.nz-refresh .nz-mono-sheets:has(+ .nz-mono-tear) {
	margin-bottom: 12px;
}
html.nz-refresh .nz-mono-knobs,
html.nz-refresh .nz-mono-sheet {
	isolation: isolate;
}
html.nz-refresh .nz-mono-sheet {
	background: var(--nz-gray-4);
}
html.nz-refresh .nz-mono-sheet img {
	filter: invert(1);
	mix-blend-mode: multiply;
}

/* The Library's flipbook close button (3D FlipBook's lightbox) as a drawn X:
   the plugin sets a bold Helvetica letter X, narrow and upright (Carl's 10/18
   3:38 call: "not look like the letter X and look like an X ... at a 45-degree
   rather than a condensed thing"). Two 1 px strokes at 45 degrees in a 20 px
   box, in the plugin's own colours (currentColor), hover included. */
html.nz-refresh .fb3d-modal .cmd-close,
html.nz-refresh .fb3d-modal .cmd-close:active {
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: 0;
	line-height: 0;
}
html.nz-refresh .fb3d-modal .cmd-close::before,
html.nz-refresh .fb3d-modal .cmd-close::after {
	content: '';
	position: absolute;
	left: -4px;
	top: 9.5px;
	width: 28px;
	height: 1px;
	background: currentColor;
	transform: rotate(45deg);
}
html.nz-refresh .fb3d-modal .cmd-close::after {
	transform: rotate(-45deg);
}

/* Contact forms' dropdowns (Inquiry Type, Location, Project Lead Time) drawn
   like the fields around them (Carl's 10/18 7:28 text: "have continuity to the
   rest of the site"). The browser drew its own control: Safari a rounded gray
   macOS button, Chrome a dark gray box with its arrow. Now the text fields'
   1 px #ccc square border, height, 16 px and orange hover/focus ring, and
   a small outline triangle pointing down, stroked like the header's page-width
   triangles (0.65 px, the body ink). The open list stays the system's own.
   Type: Montserrat 400, the order selects' face (Carl's 10/18 7:56 text: "Use
   Montserrat", over a photo of the open list beside the Goudy control). 16 px
   stays: smaller and iOS zooms the page on focus. iPhone draws the open list
   in its own system face whatever is set; desktop Chrome takes it for the
   options too. */
html.nz-refresh .contact-forms-section select,
html.nz-refresh .wpcf7-form select,
html.nz-refresh .contact-forms-section select option,
html.nz-refresh .wpcf7-form select option {
	/* !important: the generated refresh-no-roboto.css restates style.css's Goudy
	   for .contact-forms-section select one class stronger, and loads later. */
	font-family: var(--nz-qs-font) !important;
	font-weight: 400;
}
html.nz-refresh .contact-forms-section select,
html.nz-refresh .wpcf7-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 32px;
	padding: 0 30px 0 5px;
	border: 1px solid #ccc;
	border-radius: 0;
	/* !important: the root style.css sets select { background: #fff !important }. */
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M.45.45h9.1L5 7.55z' fill='none' stroke='%235F5A55' stroke-width='.65'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 8px !important;
	font-size: 16px;
	line-height: 30px;
	outline: 0;
	transition: box-shadow .15s ease-in-out;
}
/* All caps, tracked like the site's other caps (Carl's 10/18 9:50 text:
   "Smaller. All caps"). js/refresh.js puts the options' own text in caps,
   since iPhone's open list ignores text-transform. Smaller: 12 px where there's
   a mouse; phones and tablets keep 16 px, or iOS zooms the page on tap. */
html.nz-refresh .contact-forms-section select,
html.nz-refresh .wpcf7-form select {
	text-transform: uppercase;
	letter-spacing: 1px;
}
@media (hover: hover) and (pointer: fine) {
	html.nz-refresh .contact-forms-section select,
	html.nz-refresh .wpcf7-form select,
	html.nz-refresh .contact-forms-section select option,
	html.nz-refresh .wpcf7-form select option {
		font-size: 12px;
	}
}
html.nz-refresh .contact-forms-section select:hover,
html.nz-refresh .contact-forms-section select:focus,
html.nz-refresh .wpcf7-form select:hover,
html.nz-refresh .wpcf7-form select:focus {
	box-shadow: 0 0 0 2px rgba(225, 105, 38, .6);
}

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

/* Grid captions 12 px on phones, 10 everywhere else (Nate, 10/19 20:38, with a
   phone shot of The New: "We gotta increase these font sizes"; Carl, 21:04:
   "Make em as small as you'd begrudgingly accept"). Goudy's small x-height
   makes 12 the floor; the copy card's text went 13 to 15 with it (above).
   Quick Ship keeps its 13 px Montserrat. At the end of the file so it beats
   the landing grids' and plumbing codes' 10 px rules, which have no media
   query. The plus drops 3 px to stay centred on the taller caption. */
@media only screen and (max-width: 768px) {
	html.nz-refresh body:not(.nanz-shop-page) .item h1.entry-title,
	html.nz-refresh body:not(.nanz-shop-page) #main .nz-coll-grid .item .entry-title,
	html.nz-refresh.nz-pcap-code body:not(.nanz-shop-page) .product-grid .plumbing-item .entry-title,
	html.nz-refresh .nz-cats-name,
	html.nz-refresh .nz-colls-name {
		font-size: 12px;
		line-height: 18px;
	}
	html.nz-refresh body:not(.nanz-shop-page) .product-grid-items .item .enbutt {
		top: 3px;
	}
}