/*
	Theme Name: w32026
	Theme URI: https://w3nerds.com
	Description: Theme designed for client
	Version: 1.1
	Author: w3 Global Solutions
	Author URI: https://w3nerds.com
	Tags: HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/
/*------------------------------------*\
    BASE — variables, reset, base typography
\*------------------------------------*/
*,
*:after,
*:before {
	box-sizing:border-box;
	text-rendering:optimizeLegibility;
	margin:0;
}
:root {
	--color-1:#000930;
	--color-2:#004182;
	--color-3:#2bace3;
	--color-4:#bc74a5;
	--greyZero:#f5f5f5;
	--greyOne:#e5e5e5;
	--greyTwo:#bfbfbf;
	--greyThree:#757575;
	--greyFour:#444444;
	--greyFive:#151515;
	--font-title: 'opensans-extrabold', Times, serif;
	--font-sm-title: 'opensans-regular', Times, serif;
	--font-text-strong: 'bold', 'opensans-bold', "Arial Black", sans-serif;
	--font-text-regular: 'opensans-regular', Arial, sans-serif;
	--font-text-italic: 'italic', 'opensans-italic', "Arial Italic", sans-serif;
	--font-nav: 'opensans-bold', Arial, serif;
	--font-cta: 'opensans-bold', Arial, serif;
	/* home palette (plowcraft 2026 redesign) */
	--ink: #211B14;
	--ink-2: #372E23;
	--paper: #FAF6EF;
	--paper-2: #F3EDE2;
	--linen: #EBE2D2;
	--clay: #9A4B33;
	--clay-deep: #7E3A26;
	--clay-soft: #B4664E;
	--brass: #B98A44;
	--moss: #5C6B51;
	--moss-deep: #414F39;
	--stone: #847A6B;
	--line: #E2D8C6;
	--white: #FFFDF9;
	--display: 'Fraunces',Georgia,serif;
	--sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--wrap: 1240px;
	--r-lg: 26px;
	--r-md: 16px;
	--r-sm: 10px;
	--sh-sm: 0 1px 3px rgba(33,27,20,.07),0 1px 2px rgba(33,27,20,.05);
	--sh-md: 0 10px 30px rgba(33,27,20,.10);
	--sh-lg: 0 28px 60px rgba(33,27,20,.18);
	--ease: cubic-bezier(.22,.61,.36,1);
}
.screen-reader-text {
	overflow: hidden;
	position:absolute;
	width:1px;
	height:1px;
	clip:rect(1px,1px,1px,1px);
}
.skip-to-content-link {
	background: #fff;
	color:#000;
	height: 30px;
	left: 50%;
	padding: 4px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
}
.skip-to-content-link:focus {
	transform: translateY(0%);
}
#loader {
	left: 50%;
	top: 50%;
	position: fixed;
	transform: translate(-50%, -50%);
	border: 12px solid #f3f3f3; /* Light grey */
	border-top: 12px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 90px;
	height: 90px;
	animation: spin 2s linear infinite;
	z-index:999;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
p#noscript {
	background-color:red;
	color:white;
	text-align:center;
	width:100%;
}
a#w3 {
	background-color:transparent;
	background: transparent url(img/w3nerds-logo-web.png) no-repeat;
	background-position: 10% 50%;
	color:#151515;
	display: inline-block;
	font-family: 'opensans-regular', sans-serif;
	font-size: 13px;
	line-height: 22px;
	margin: 10px;
	padding: 10px;
	padding-left: 90px;
	text-align: right;
	transition-duration: 0.8s;
	text-decoration: none;
	width: 180px;
	height: 90px;
}
a#w3:hover {
	background-color: #fff;
	box-shadow: 15px 15px 0px -10px #4285f4, -15px -15px 0px -10px #fcc934, 5px -5px #ff5252, -5px 5px #34a853;
	color:#151515;
}
.success {
	padding:12px 20px;
	text-align: left;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	background:green;
	position: relative;
	z-index: 9999;
}
.success a {
	color:#ccc;
}
.error, .form-error-container {
	padding:12px 20px;
	text-align: left;
	font-size: 16px;
	color:#fff;
	background:red;
	position: relative;
	z-index: 9999;
}
.error span,
 .error a {
	vertical-align: middle !important;
}
.inputError {
	background-color:rgb(249,213,212) !important;
}
html {
	font-size:14px;
	scroll-behavior: smooth;   /* smooth in-page anchor jumps (landing TOC, etc.) */
}
body {
	font-family: var(--font-text-regular), 'opensans-regular', serif;
	font-size:14px;
	line-height:22px;
	color: #555;
	background-color:#fff;
	text-align:center;
}
img {
	vertical-align:bottom;
	width: auto;
	height: auto;
	max-width: 100%;
}
a {
	color:var(--color-2);
	font-family: var(--font-text-strong), 'opensans-bold', serif;
	text-decoration:underline;
	cursor: pointer;
}
a:hover {
	color:#000;
}
a:focus {
	outline:#2f2f2f;
}
a:hover,
a:active {
	outline:0;
}
button {
	cursor: pointer;
}
input:focus {
	outline:0;
	border:1px solid var(--color-4);
}
textarea {
	outline-color:var(--color-4);
}
p {
	text-align: left;
	font-size: 18px;
	line-height: 26px;
	position: relative;
	font-family: var(--font-text-regular), 'opensans-regular', serif;
}
ul,ol {
	font-size:14px;
	line-height: 14px;
	padding: 20px 0 20px 20px;
}
ul li, ol ul li {								/*NEW*/
	text-align: left;
	list-style: none;
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: 5px 12px;
	font-size: 16px;
	line-height: 24px;
	padding: 5px 0 10px 30px;
}
ol li, ul ol li {								/*NEW*/
	list-style: auto;
	background-image: none;
	text-align: left;
	font-size: 16px;
	line-height: 24px;
	padding: 5px 0 15px 5px;
}
ol li::marker, ul ol li::marker {
	font-family: var(--font-text-strong), 'opensans-bold', serif;
}
ul li h4, ol li h4, ul ol li h4 {
	padding-bottom: 4px;
}
h1, h2.xlg-title, h3.xlg-title, h4.xlg-title, h5.xlg-title, .xlg-title {
	color: var(--greyFour);
	display: block;
	font-family: var(--font-title), 'opensans-bold', sans-serif;
	font-size:36px;
	font-weight: normal;
	line-height:46px;
	margin: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
}
h2, h1.lg-title, h3.lg-title, h4.lg-title, h5.lg-title, .lg-title {
	color: var(--greyFour);
	display: inline-block;
	font-family: var(--font-title), 'opensans-bold', sans-serif;
	font-size:28px;
	font-weight: normal;
	line-height:34px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}
h3, h1.med-title, h2.med-title, h4.med-title, h5.med-title, .med-title { 
	border-bottom: 2px solid var(--color-4);
	color: var(--greyFour);
	display: inline-block;
	font-family: var(--font-title), 'opensans-bold', sans-serif;
	font-size:20px;
	font-weight: normal;
	line-height:28px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}
h4, h1.sm-title, h2.sm-title, h3.sm-title, h5.sm-title, .sm-title  {
	color: var(--greyFour);
	display: inline-block;
	font-family: var(--font-sm-title), 'opensans-bold', sans-serif;
	font-size: 18px;
	font-variant: small-caps;
	font-weight: normal;
	line-height: 24px;
	padding-bottom: 10px;
	text-align: left;
	vertical-align: middle;
}
h5, h1.xsm-title, h2.xsm-title, h3.xsm-title, h4.xsm-title, .xsm-title {
	color: var(--greyFour);
	display: inline-block;
	font-family: var(--font-sm-title), 'opensans-bold', sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 22px;
	padding-bottom: 10px;
	text-align: left;
	vertical-align: middle;
}
strong, b, table th {
	font-weight: normal;
	font-family: var(--font-text-strong), 'opensans-bold', serif;
}
svg {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	fill:#000;
}
i {
	font-style: normal;
	font-family: var(--font-text-italic), 'opensans-italic', sans-serif;
}
blockquote {
	padding: 10px 20px;
	margin: 15px 0;
	font-size: 17.5px;
	border-left: 5px solid var(--color-4);
}
section {							/*contains a wrapper and std-padding*/
	background-position: center;
	background-size:cover;
	width:100%;
	padding: 75px 20px;
	position: relative;
}
section.no-padding {
	padding: 0;
}
section.large {
	max-width: 1920px;
	margin: 0 auto;
}
section.landing {				/*styling for landing sections*/
	background-position: center; 
	background-size: cover;
	background-repeat: no-repeat;
}
body.terms-of-service section:first-of-type,
 body.privacy-policy section:first-of-type {
	background-image: none;
 }
.wrapper {
	max-width:1400px;
	width:100%;
	margin:0 auto;
}
.wrapper.large {max-width: 1920px;}
.wrapper.small {max-width: 1000px;}
.wrapper.xsmall {max-width: 750px;}
.std-padding {padding: 75px 20px;}
.less-padding {padding: 40px 15px;}
.grey {background-color: var(--greyZero);}
.object-fit {width: 100%;height: 200px;object-fit: cover;}
.left {text-align: left;}
.center {text-align: center;}
.right{text-align: right;}
.align-left {
	float:left;
	padding:0;
	margin: 0 12px 2px 0;
}
.align-right {
	float:right;
	padding:0;
	margin:0 0 2px 12px;
}
@media only screen and (max-width:900px) {
	.stopFloatOnTablet {
		float: none;
		display: block;
		margin: 12px auto;
	}
}
@media only screen and (max-width:640px) {
	.stopFloatOnMobile {
		float: none;
		display: block;
		margin: 12px auto;
	}
}
@media only screen and (max-width:399px) {
	.align-left,
	 .align-right {
		float:none;
		display: block;
		margin: 12px auto;
	}
}
ul.list {
	overflow: hidden;
	list-style: none;
	text-align: left;
	padding: 15px 10px;
	margin: 0 0 0 40px;
}
ul.list li {
	float: left;
	display: inline;
	width:33%;
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 5px 50%;
	font-size: 18px;
	line-height: 24px;
	padding: 15px 10px 15px 50px;
}
ul.list.one-col li {
	width: 100%;
}
@media only screen and (max-width:900px) {
	ul.list {
		margin: 0;
		padding: 10px 5px;
	}
	ul.list li {
		width: 50%;
	}
}
@media only screen and (max-width:640px) {
	ul.list {
		padding: 10px 0px;
	}
	ul.list li {
		font-size: 16px;
		background-size: 20px;
		padding: 10px 10px 10px 30px;
	}
}
@media only screen and (max-width:390px) {
	ul.list li {
		width: 100%;
	}
}
iframe {
	display: block;
	width:100%;
	margin: 0 auto;
	border:0;
}
.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
}
/*------------------------------------*\
	STRUCTURE
\*------------------------------------*/
table, table tr.even, table tr.alt, table tr:nth-of-type(even) {background: none;border:0;}
div.table,div.table-noresponse{display:table;width:100%}div.table div.tableRow,div.table-noresponse div.tableRow-noresponse{display:table-row;width:100%}div.table div.tableRow div.tableCell,div.table-noresponse div.tableRow-noresponse div.tableCell-noresponse{display:table-cell;vertical-align:middle}
.small-1{width:8.33333%}.small-2{width:16.66667%}.small-3{width:25%}.small-4{width:33.33333%}.small-5{width:41.66667%}.small-6{width:50%}.small-7{width:58.33333%}.small-8{width:66.66667%}.small-9{width:75%}.small-10{width:83.33333%}.small-11{width:91.66667%}.small-12{width:100%}
@media only screen and (min-width: 640px){.medium-1{width:8.33333%}.medium-2{width:16.66667%}.medium-3{width:25%}.medium-4{width:33.33333%}.medium-5{width:41.66667%}.medium-6{width:50%}.medium-7{width:58.33333%}.medium-8{width:66.66667%}.medium-9{width:75%}.medium-10{width:83.33333%}.medium-11{width:91.66667%}.medium-12{width:100%}}
@media only screen and (min-width: 1024px){.large-1{width:8.33333%}.large-2{width:16.66667%}.large-3{width:25%}.large-4{width:33.33333%}.large-5{width:41.66667%}.large-6{width:50%}.large-7{width:58.33333%}.large-8{width:66.66667%}.large-9{width:75%}.large-10{width:83.33333%}.large-11{width:91.66667%}.large-12{width:100%}}
.flex-container{/*https://www.w3schools.com/css/css3_flexbox.asp*/display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.flex-container.centerItems{align-items:center}.flex-container.col{flex-direction:column}.flex-container .flex-block{display:block;width:25%;transition-duration:0.8s}.flex-container .flex-block.one-eighth{width:12.5%}.flex-container .flex-block.one-third{width:33.33%}.flex-container .flex-block.one-half{width:50%}.flex-container .flex-block.two-thirds{width:66.66%}.flex-container .flex-block.three-quarters{width:75%}.flex-container .flex-block.full{width:100%}.flex-container .flex-block.noResponse{width:25%!important}.flex-container .flex-block.one-eighth.noResponse{width:12.5%!important}.flex-container .flex-block.one-third.noResponse{width:33.33%!important}.flex-container .flex-block.one-half.noResponse{width:50%!important}.flex-container .flex-block.two-thirds.noResponse{width:66.66%!important}.flex-container .flex-block.three-quarters.noResponse{width:75%!important}.flex-container .flex-block.full.noResponse{width:100%!important}@media only screen and (max-width:900px){.flex-container.reverseOnTablet{flex-direction:column-reverse}.flex-container .flex-block.one-half,.flex-container .flex-block.two-thirds,.flex-container .flex-block.three-quarters,.flex-container .flex-block.fullOnTablet,.flex-container .flex-block.one-third.fullOnTablet{width:100%}.flex-container .flex-block,.flex-container .flex-block.one-third,.flex-container .flex-block.one-half.lateResponse{width:50%}.flex-container .flex-block.one-eighth{width:25%}}@media screen and (max-width:640px){.flex-container.reverseOnMobile{flex-direction:column-reverse}.flex-container .flex-block,.flex-container .flex-block.one-third,.flex-container .flex-block.two-thirds,.flex-container .flex-block.one-half.lateResponse{width:100%}.flex-container .flex-block.one-eighth,.flex-container .flex-block.lateResponse,.flex-container .flex-block.one-third.lateResponse{width:50%}.flex-container .flex-block.one-eighth.lateResponse{width:25%}}@media screen and (max-width:390px){.flex-container .flex-block.one-eighth,.flex-container .flex-block.lateResponse,.flex-container .flex-block.one-eighth.lateResponse,.flex-container .flex-block.one-third.lateResponse{width:100%}}

/*------------------------------------*\
    HEADER
\*------------------------------------*/
.annc {
	background: var(--clay);
	color: rgba(255, 253, 249, 0.85);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 9px 20px;
}
.annc p {
	text-align: center;
}
.annc b {
	color: var(--brass);
	font-weight: 600;
}
.annc a {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(250, 246, 239, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.3s;
}
.header.scrolled {
	box-shadow: var(--sh-md);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: 78px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 28px;
}
.nav {
	flex: 1;
}
.nav ul {
	display: flex;
	justify-content: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
header ul li {
	background-image: none;
}
.nav a {
	display: block;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ink);
	transition: background 0.2s, color 0.2s;
}
.nav a:hover {
	background: var(--linen);
	color: var(--clay-deep);
}
.nav a.current-page {
	color: var(--clay);
    background: var(--linen);
}
.tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.tools .phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.tools .phone:hover {
	border-color: var(--clay);
	color: var(--clay);
}
.tools .phone svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--clay);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.header .burger {
	display: none;
}
.subnav {
	border-top: 1px solid var(--line);
	background: rgba(250, 246, 239, 0.75);
}
.subnav-inner {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 46px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 28px;
	overflow-x: auto;
	scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar {
	display: none;
}
.subnav a {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding: 13px 16px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
}
.subnav a:hover {
	color: var(--clay);
	background: var(--linen);
}
.subnav li {
	display: flex;
	align-items: center;
}
.subnav li:not(:last-child)::after {
	content: '·';
	color: var(--line);
	margin-left: 4px;
}
.m-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
}
.m-scrim {
	position: absolute;
	inset: 0;
	background: rgba(33, 27, 20, 0.5);
	opacity: 0;
	transition: opacity 0.3s;
}
.m-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(340px, 86vw);
	background: var(--paper);
	padding: 30px;
	transform: translateX(-102%);
	transition: transform 0.35s var(--ease);
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: auto;
}
.m-nav.open {
	pointer-events: auto;
}
.m-nav.open .m-scrim {
	opacity: 1;
}
.m-nav.open .m-panel {
	transform: none;
}
.m-panel a {
	font-family: var(--display), serif;
	font-size: 22px;
	text-decoration: none;
	color: var(--ink);
	padding: 11px 6px;
	border-bottom: 1px solid var(--line);
}
.m-panel a.m-sub {
	font-family: var(--sans), sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding: 9px 6px;
	border-bottom: none;
}
.m-panel a:hover {
	color: var(--clay);
}
/* current page in the drawer: same linen + clay treatment the desktop sub-nav uses on hover,
   with a brass bar marking the active row */
.m-panel a.current-page {
	color: var(--clay-deep);
	background: var(--linen);
	border-radius: var(--r-sm);
	box-shadow: inset 3px 0 0 var(--brass);
	padding-left: 14px;
}
/* current category in the desktop sub-nav: matches its own hover state */
.subnav a.current-page {
	color: var(--clay);
	background: var(--linen);
}
.m-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brass);
	margin-top: 22px;
}
.m-close {
	align-self: flex-end;
	margin-bottom: 14px;
}
@media (max-width: 1400px) {
	.header-inner {
		flex-direction: column;	
		gap: 20px;
	}
	header .logo {
		padding: 20px 20px 0;
	}
	.nav,
	.tools .phone {
		display: none;
	}
	.tools {
		padding-bottom: 15px;
	}
	.header .burger {
		display: inline-flex;
		position: absolute;
        top: 10px;
        right: 10px;
	}
	.tools .login-btn span {
		display: none;
	}
	.tools .login-btn {
		width: 50px;
		height: 50px;
		padding: 0;
		justify-content: center;
		border-width: 1px;
		border-color: var(--line);
	}
	.subnav-inner {
		justify-content: flex-start;
		flex-wrap: wrap;
		row-gap: 0px;
		overflow-x: visible;
		padding: 10px 20px;
		gap: 0;
	}
	.subnav {
		display: none;
	}
}
@media (max-width: 500px) {
	header .logo img {
		width: auto;
		height: auto;
		padding: 0 20px;
	}
}
/*------------------------------------*\
    GLOBAL — patterns reused across 2+ pages (CTAs, cards, title separators, image frames, etc.)
\*------------------------------------*/
/* Reusable button/badge atoms -- promoted from HEADER (vocabulary-authoring pass, CSS-10):
   consumed by the header today; available to cart/account/product pages without reading HEADER.
   Header-specific responsive/layout overrides stay scoped in HEADER (.header .burger, .tools .login-btn). */
.tool-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--white);
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s;
}
.tool-btn:hover {
	border-color: var(--ink);
	transform: translateY(-1px);
}
.tool-btn svg {
	width: 19px;
	height: 19px;
	stroke: var(--ink);
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--clay);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--paper);
}
.login-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1.5px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.login-btn:hover {
	background: var(--ink);
	color: var(--white);
}
.login-btn:hover svg {
	stroke: var(--white);
}
.login-btn svg {
	width: 16px;
	height: 16px;
	stroke: var(--ink);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.2s;
}
/* account icon: the inline outline svg is replaced by the full-colour image icons.
   header.inc.php sets title="My account" once a person is logged in, "Login" otherwise */
.login-btn svg {
	display: none;
}
.login-btn::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: url('img/ecom/icon-user-logged-out.svg') no-repeat center / contain;
}
.login-btn[title="My account"]::before {
	background-image: url('img/ecom/icon-user-logged-in.svg');
}
/* logo -- shared header+footer chrome component (promoted from HEADER, CSS-10) */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}
.logo img {
	height: 35px;
	width: auto;
}
.logo span {
	font-family: var(--display), serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
div.content {
	background-color: #fff;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
}
.relative {
	position: relative;
}
.cta {
	display: inline-block;
	background-color: var(--color-5);
	background-image: url('uploads/icon-arrow-right-white.svg');
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 93% 50%;
	border: 1px solid transparent;
	border-bottom-left-radius: 20px;
	color: #fff;
	font-family: var(--font-cta), 'opensans-bold', serif;
	font-size: 16px;
	text-decoration: none;
	margin:12px 8px;
	padding: 12px 50px 12px 28px;
	transition-duration: 0.8s;
	vertical-align: middle;
}
.cta:hover {
	color: var(--color-1);
	background-color: #fff;
	border-color: var(--color-1);
	padding:12px 39px;
	background-position: 120% 50%;
	box-shadow: 0px 0px 5px var(--color-4);
}
.cta.large {
	background-position: 95% 50%;
}
.cta.large:hover {
	background-position: 130% 50%;
}
.cta.v2 {
	background-image: url('uploads/icon-arrow-right-color-1.svg');
	background-color: var(--color-4);
	color: var(--greyFive);
	border-color: transparent;
}
.cta.v2:hover {
	box-shadow: 0px 0px 5px var(--color-4);
}
.cta.transparent {
	background-image: url('uploads/icon-arrow-right-color-1.svg');
	background-color: transparent;
	color: var(--color-2);
	border-color: var(--color-2);
}
.cta.transparent:hover {
	background-color: var(--color-2);
	border-color: var(--color-2);
	color: #fff;
	box-shadow: 0px 0px 5px var(--color-2);
}
.cta.white {
	background-image: url('uploads/icon-arrow-right-white.svg');
	background-color: transparent;
	color: #ffffff;
	border-color: #ffffff;
}
.cta.white:hover {
	background-color: var(--color-2);
	box-shadow: 0px 0px 5px var(--color-2);
}
.cta.appt {
	background-image: url('uploads/icon-calendar.svg');
	background-position: 95% 50%;
}
.cta img {
	display:inline-block;
	vertical-align: middle;
	width:30px;
}
.cta span {
	display:inline-block;
	vertical-align: middle;
	padding:0 0 0 8px;
}
.frame {
	border-radius: 16px;
	border: 1px solid var(--line);
	transition-duration: 0.8s;
}
.frame:hover {
	box-shadow: 0px 0px 10px var(--color-4);
}
/* ---- plowcraft home vocabulary — promoted to GLOBAL (CSS-10, first-page pass) ---- */
h1 em,
h2 em,
h3 em {
	font-style: italic;
	color: var(--clay);
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--clay);
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 1.5px;
	background: var(--brass);
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s var(--ease);
}
.btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}
.btn:hover svg {
	transform: translateX(3px);
}
.btn-clay {
	background: var(--clay);
	color: var(--white);
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
.btn-clay:hover {
	background: var(--clay-deep);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
	color: #fff;
}
.btn-line {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid rgba(33, 27, 20, 0.25);
}
.btn-line:hover {
	border-color: var(--ink);
	background: rgba(33, 27, 20, 0.04);
}
.btn-ink {
	background: var(--ink);
	color: var(--white);
}
.btn-ink:hover {
	background: var(--clay);
}
/* ghost button for dark bands (moss .acard.dark, the clay .cta-card) — landing type, GLOBAL */
.btn-ghost-light {
	background: transparent;
	color: var(--paper);
	border: 1.5px solid rgba(250, 246, 239, 0.4);
}
.btn-ghost-light:hover {
	background: rgba(250, 246, 239, 0.1);
	border-color: var(--paper);
	color: var(--paper); 
}
.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--brass);
}
.stars svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 46px;
	flex-wrap: wrap;
}
.sec-head h2 {
	font-size: clamp(30px, 3.8vw, 44px);
	font-weight: 520;
	line-height: 1.12;
	letter-spacing: -0.015em;
	max-width: 560px;
	margin-top: 14px;
	color: var(--color-1) !important;
}
.sec-head p {
	max-width: 380px;
	color: var(--stone);
	font-size: 15.5px;
}
.rv {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv.in {
	opacity: 1;
	transform: none;
}

/* section band base — reusable band rhythm for any content page */
.section {
	padding: 96px 0;
}

/* featured product cards — reusable card treatment (products/category pages) */
.featured {
	background: var(--linen);
	border-bottom: 1px solid var(--line);
	padding: 88px 0;
}
.feat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.feat {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--sh-sm);
	transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.feat:hover {
	transform: translateY(-6px);
	box-shadow: var(--sh-md);
}
.feat-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
}
.feat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.feat:hover .feat-media img {
	transform: scale(1.06);
}
.feat-flag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
}
.feat-flag.gold {
	background: var(--brass);
	color: var(--ink);
}
.feat-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 20px 20px 22px;
}
.feat-body h3 {
	font-size: 19px;
	font-weight: 540;
	line-height: 1.25;
}
.feat-body h3 a {
	color: inherit;
}
.feat-why {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.5;
}
.feat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
}
.feat-price {
	font-family: var(--display), serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--clay);
}
.feat-add {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.feat-add:hover {
	background: var(--clay);
}
a.feat-add {
	line-height: normal;
	text-decoration: none;
}
.feat-add svg {
	width: 14px;
	height: 14px;
	stroke: var(--white);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

/* collection rows — reusable full-width category row (collections page) */
.col-rows {
	display: grid;
	gap: 26px;
}
.col-row {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--sh-sm);
	transition: box-shadow 0.3s;
}
.col-row:hover {
	box-shadow: var(--sh-md);
}
.col-row.flip .col-media {
	order: 2;
}
.col-media {
	position: relative;
	min-height: 340px;
	overflow: hidden;
}
.col-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}
.col-media img.fit-contain {
  object-fit: contain;
}
.col-row:hover .col-media img {
	transform: scale(1.05);
}
.col-num {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	background: rgba(255, 253, 249, 0.9);
	backdrop-filter: blur(4px);
	font-family: var(--display), serif;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	letter-spacing: 0.08em;
}
.col-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(28px, 3.6vw, 52px);
}
.col-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brass);
}
.col-copy h3 {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 530;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 10px 0 0;
}
.col-pitch {
	margin: 14px 0 4px;
	color: var(--stone);
	font-size: 15px;
	max-width: 480px;
}
.col-points {
	display: grid;
	gap: 9px;
	margin: 16px 0 4px;
}
.col-points li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.5;
}
.col-points svg {
	width: 17px;
	height: 17px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 3px;
}
.col-fit {
	margin-top: 12px;
	font-size: 13px;
	color: var(--stone);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 10px 16px;
}
.col-fit b {
	color: var(--ink-2);
	font-weight: 600;
}
.col-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 700;
	color: var(--clay);
	border-bottom: 2px solid var(--clay);
	padding-bottom: 3px;
	transition: gap 0.25s var(--ease);
}
.col-cta:hover {
	gap: 14px;
}
.col-cta svg {
	width: 15px;
	height: 15px;
	stroke: var(--clay);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.col-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 22px;
	max-width: 100%;
}
.col-ctas .col-cta {
	margin-top: 0;
}

/* product grid + cards — reusable ecom vocabulary (products/category pages) */
.shop {
	background: var(--white);
	border-block: 1px solid var(--line);
}
.filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.chip {
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	transition: all 0.2s;
}
.chip:hover {
	border-color: var(--ink);
}
.chip.on {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}
.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 22px;
	margin-top: 44px;
}
.card {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transition: opacity 0.35s, transform 0.35s;
}
.card.hide {
	display: none;
}
.card-media {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 1 / 1.06;
	background: #fff;
	border-radius: 16px 16px 0 0;
}
.card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.7s var(--ease);
}
.card:hover .card-media img {
	transform: scale(1.06);
}
.strip .card {
	background: #fff;
	border-radius: 16px;
    border: 1px solid var(--line);
}
.strip .card-body {
	padding: 16px 16px 0;
}
.flag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--sh-sm);
}
.flag.f-clay {
	background: var(--clay);
	color: var(--white);
}
.flag.f-moss {
	background: var(--moss);
	color: var(--white);
}
.flag.f-brass {
	background: var(--brass);
	color: var(--ink);
}
.quick {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	gap: 8px;
	opacity: 0;
	transform: translateY(12px);
	transition: all 0.3s var(--ease);
}
.card:hover .quick {
	opacity: 1;
	transform: none;
}
.quick button,
.quick a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	border: none;
	border-radius: 12px;
	background: rgba(33, 27, 20, 0.92);
	backdrop-filter: blur(6px);
	color: var(--white);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.2s;
}
.quick button:hover,
.quick a:hover {
	background: var(--clay);
}
.quick svg {
	width: 15px;
	height: 15px;
	stroke: var(--white);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}
.card-body {
	padding: 16px 4px 0;
}
.card-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
}
.card-name {
	font-family: var(--display), serif;
	font-size: 18.5px;
	font-weight: 540;
	line-height: 1.3;
	margin: 5px 0 7px;
}
.card-name a {
	color: inherit;
}
.card-name a:hover {
	color: var(--clay);
}
.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.card-body {
	padding: 16px 4px 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}
.card:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md);
}
.price {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--clay);
}
.rate {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--stone);
}
.shop-cta {
	text-align: center;
	margin-top: 52px;
}

/* review cards — reusable testimonial treatment (about/reviews pages) */
.reviews {
	background: var(--white);
	border-block: 1px solid var(--line);
}
.rev-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 20px;
}
.rev {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.rev:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md);
}
.rev blockquote {
	font-family: var(--display), serif;
	font-size: 18px;
	font-weight: 450;
	line-height: 1.55;
	font-style: italic;
	color: var(--ink-2);
	border: none;
	margin: 0;
	padding: 0;
}
.rev-who {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
.rev-av {
	width: 44px;
	height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--white);
	font-family: var(--display), serif;
	font-weight: 600;
	font-size: 16px;
}
.av-1 {
	background: linear-gradient(135deg, var(--clay-soft), var(--clay-deep));
}
.av-2 {
	background: linear-gradient(135deg, var(--moss), var(--moss-deep));
}
.av-3 {
	background: linear-gradient(135deg, var(--brass), var(--clay-deep));
}
.rev-who b {
	display: block;
	font-size: 14px;
}
.rev-who small {
	font-size: 12.5px;
	color: var(--stone);
}
.rev-check {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--moss);
}
.rev-check svg {
	width: 14px;
	height: 14px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* reusable-pattern responsive (kept with the GLOBAL patterns above) */
@media (max-width: 1020px) {
	.feat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 920px) {
	.section {
		padding: 72px 0;
	}
	.col-row.flip .col-media {
		order: 0;
	}
	.col-media {
		min-height: 350px;
	}
	.rev-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 760px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 14px;
	}
	.quick {
		opacity: 1;
		transform: none;
	}
	.col-row,
	.col-row.flip {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 520px) {
	.feat-grid {
		grid-template-columns: 1fr;
	}
	.grid {
		grid-template-columns: 1fr;
	}
}
/* breadcrumb (reusable on any deep page — introduced with the PDP) */
.crumb {
	padding: 20px 0 0;
}
.crumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--stone);
}
.crumb li {
	display: flex;
	align-items: center;
	gap: 9px;
}
.crumb li + li::before {
	content: "\203A";
	color: var(--line);
	font-size: 15px;
}
.crumb a:hover {
	color: var(--clay);
}
.crumb [aria-current] {
	color: var(--ink-2);
	font-weight: 600;
}

/* accordion + spec table (reused by the PDP buy-box details AND the FAQ; reusable site-wide).
   Header font base rule sets --display; on V3 baseline pages the baseline's
   .content button{font-family:inherit} outranks it, so a companion :is(...) rule in the V3
   BASELINE block keeps the header Fraunces. .buy .acc (buy-box spacing) stays page-scoped. */
.acc {
	border-top: 1px solid var(--line);
}
.acc-item {
	border-bottom: 1px solid var(--line);
}
.acc-item > button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 2px;
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--display), serif;
	font-size: 19px;
	font-weight: 540;
	color: var(--ink);
}
.acc-item > button svg {
	width: 18px;
	height: 18px;
	stroke: var(--stone);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	flex: none;
	transition: transform 0.28s var(--ease);
}
.acc-item.open > button svg {
	transform: rotate(45deg);
}
.acc-body {
	display: none;
	padding: 0 2px 26px;
}
.acc-item.open .acc-body {
	display: block;
}
.acc-body p {
	color: var(--ink-2);
	font-size: 15px;
	margin-bottom: 14px;
	max-width: 68ch;
}
.acc-body p:last-child {
	margin-bottom: 0;
}
.spec {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.spec th,
.spec td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.spec th {
	width: 40%;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--paper-2);
}
.spec tr:last-child th,
.spec tr:last-child td {
	border-bottom: none;
}
.spec .pending {
	color: var(--stone);
	font-style: italic;
}
/* the spec table's category/video links (products.php's PDP "Specifications" panel) use the
   bare .inline hook — .prose a.inline doesn't reach here since this table isn't inside .prose —
   so without this they fall back to the legacy theme's blue underlined link. Scoped to .spec,
   which is itself GLOBAL/reusable, so this benefits any page that reuses the .spec pattern. */
.spec a.inline {
	color: var(--clay);
	font-family: inherit, serif;
	text-decoration-color: rgba(154, 75, 51, 0.35);
}
.spec a.inline:hover {
	text-decoration-color: var(--clay);
}

/* ---- catalog stat row + trust badges + a11y util (GLOBAL — SRP masthead now; reusable on the
   All Products / category landing pages and about) ---- */
.cat-stats {
	display: flex;
	gap: 30px;
	padding: 22px 26px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-sm);
}
.cat-stats div {
	flex: 1;
}
.cat-stats b {
	display: block;
	font-family: var(--display), serif;
	font-size: 26px;
	font-weight: 560;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--greyFive);
}
.cat-stats small {
	font-size: 12px;
	color: var(--stone);
	letter-spacing: 0.04em;
}
.trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
.trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ink-2);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 16px;
}
.trust svg {
	width: 14px;
	height: 14px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* price-range suffix — extends the GLOBAL .price atom */
.price small {
	font-size: 12px;
	font-weight: 600;
	color: var(--stone);
}
/* screen-reader-only (GLOBAL a11y utility) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*------------------------------------*\
    LANDING / MARKETING — GLOBAL (shared by the 10 body.lp pages)
\*------------------------------------*/
/* Vocabulary authored on the birdhouses build (2026-08-18) and promoted to GLOBAL per CSS-10 so the
   9 sibling landings (6 category pages + handcrafted-outdoor-decor + about + contact) are near-pure
   markup. REUSES (no rule here): the phero stat block = GLOBAL .cat-stats; the FAQ = GLOBAL .acc; the
   testimonials = GLOBAL .reviews/.rev/.av-*; the product-strip cards = GLOBAL .card/.card-* (only the
   .strip grid + .card-add button are new); .eyebrow/.sec-head/.trust-row/.trust/.crumb/.btn* already
   GLOBAL. Some atoms here are authored but NOT exercised by birdhouses itself — they belong to the
   type and its siblings need them: .tbl td.num (5 sibling price tables), .prose ul.ticks (body-level
   lists), .prose ul.plain, base .note (about's plain callout), .source, .phero.dark (about's hero).
   Contact's form (.form-grid/.field/.cmethod) is page-scoped and authored on the contact build, not
   here (unexercised-selector discipline, CSS-9/7c). Container = the GLOBAL .wrapper (re-pointed to
   --wrap on body.lp by the V3 baseline). */

/* page hero */
.phero {
	padding: 28px 0 48px;
	border-bottom: 1px solid var(--line);
}
.phero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: end;
}
.phero h1 {
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: 500;
	line-height: 1.07;
	letter-spacing: -0.02em;
	margin: 16px 0 0;
	max-width: 18ch;
}
.phero h1 em {
	font-style: italic;
	color: var(--clay);
}
.phero .lede {
	margin-top: 20px;
	font-size: 17.5px;
	color: var(--stone);
	max-width: 60ch;
}
.phero-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}
/* the hero's 3-up stat block reuses the GLOBAL .cat-stats atom (identical treatment) */
.phero.dark {
	background: var(--moss-deep);
	color: var(--paper);
	border-bottom: none;
	position: relative;
	overflow: hidden;
	padding: 64px 0 72px;
}
.phero.dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.6;
	background: radial-gradient(700px 380px at 90% 4%, rgba(185, 138, 68, 0.25), transparent 62%),
		radial-gradient(520px 340px at 2% 100%, rgba(154, 75, 51, 0.28), transparent 60%);
}
.phero.dark .wrapper {
	position: relative;
}
.phero.dark .eyebrow {
	color: var(--brass);
}
.phero.dark .eyebrow::before {
	background: var(--brass);
}
.phero.dark h1 em {
	color: #d9b26f;
}
.phero.dark .lede {
	color: rgba(250, 246, 239, 0.78);
}
@media (max-width: 900px) {
	.phero-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		align-items: start;
	}
}

/* body layout: prose + sticky aside */
.body-wrap {
	padding: 70px 0 90px;
}
.body-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: start;
}
.aside {
	position: sticky;
	top: 150px;
	display: grid;
	gap: 18px;
}
/* .body-grid's 1fr prose column defaults to min-width:auto like any grid item, so a wide
   descendant (the .tbl price table's nowrap cells) was setting a min-content floor wider than
   narrow viewports -- that forced the whole prose column, including the .strip product cards
   nested inside it, past the edge of the screen instead of shrinking to fit. */
main.prose {
	min-width: 0;
}
@media (max-width: 1100px) {
	.body-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.aside {
		position: static;
	}
}

/* prose */
.prose h2 {
	font-size: clamp(25px, 2.9vw, 34px);
	font-weight: 520;
	line-height: 1.16;
	letter-spacing: -0.015em;
	margin: 52px 0 0;
	color: var(--color-1) !important;
}
.prose h2:first-child {
	margin-top: 0;
}
.prose h2 em {
	font-style: italic;
	color: var(--clay);
}
.prose h3 {
	font-size: 20.5px;
	font-weight: 560;
	margin: 32px 0 0;
}
.prose p {
	margin-top: 16px;
	color: var(--ink-2);
	font-size: 16.5px;
	max-width: 70ch;
}
.prose p.big {
	font-size: 18px;
	color: var(--stone);
}
.prose ul.ticks {
	margin-top: 18px;
	display: grid;
	gap: 11px;
}
.prose ul.ticks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	color: var(--ink-2);
	line-height: 1.55;
	max-width: 68ch;
}
.prose ul.ticks svg {
	width: 17px;
	height: 17px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 4px;
}
.prose ul.plain {
	margin-top: 16px;
	display: grid;
	gap: 9px;
}
.prose ul.plain li {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	color: var(--ink-2);
	max-width: 68ch;
}
.prose ul.plain li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brass);
}
.prose a.inline {
	color: var(--clay);
	border-bottom: 1.5px solid rgba(154, 75, 51, 0.35);
	transition: border-color 0.2s;
}
.prose a.inline:hover {
	border-color: var(--clay);
}
.prose strong,
.prose b {
	font-weight: 650;
	color: var(--ink);
}

/* callouts */
.note {
	margin-top: 26px;
	background: var(--linen);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 20px 24px;
}
.note b {
	display: block;
	font-family: var(--display), serif;
	font-size: 17px;
	font-weight: 560;
	margin-bottom: 6px;
}
.note p {
	margin-top: 0;
	font-size: 15px;
	color: var(--ink-2);
}
.note.warn {
	background: #f6ede6;
	border-color: #e4cdbe;
}
.note.warn b {
	color: var(--clay-deep);
}
.source {
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--brass);
	font-weight: 600;
}

/* data table */
.tbl {
	width: 100%;
	border-collapse: collapse;
	margin-top: 22px;
	font-size: 15px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.tbl caption {
	caption-side: bottom;
	text-align: left;
	font-size: 12.5px;
	color: var(--stone);
	padding-top: 10px;
}
.tbl th,
.tbl td {
	text-align: left;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
body.birdhouses main .tbl td {
	color: var(--greyFive);
}
.tbl thead th {
	background: var(--paper-2);
	font-family: var(--sans), serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td {
	border-bottom: none;
}
.tbl tbody th {
	font-weight: 600;
	color: var(--ink);
}
.tbl td.num {
	font-weight: 700;
	white-space: nowrap;
}
/* below 500px the 4-column spec table (Height/Price/Footprint/Weight) no longer fits without
   squeezing text -- let it scroll horizontally instead of wrapping cell text or shrinking
   columns until they're unreadable. Unlike .subnav-inner this scrollbar stays VISIBLE (styled,
   not hidden) so it's the cue that tells users there's more table off to the right. */
@media (max-width: 500px) {
	.tbl {
		display: block;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.tbl th,
	.tbl td {
		white-space: nowrap;
	}
	.tbl::-webkit-scrollbar {
		height: 8px;
	}
	.tbl::-webkit-scrollbar-track {
		background: var(--paper-2);
	}
	.tbl::-webkit-scrollbar-thumb {
		background: var(--line);
		border-radius: 999px;
	}
	.tbl::-webkit-scrollbar-thumb:hover {
		background: var(--stone);
	}
}

/* product strip — REUSES the GLOBAL .card/.card-media/.card-body/.card-cat/.card-name/.card-row/.price;
   only the compact 4-up grid and the inline add button are new (siblings' strips reuse both). */
.strip {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.card-add {
	border: none;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 15px;
	cursor: pointer;
	transition: background 0.2s;
}
.card-add:hover {
	background: var(--clay);
}
@media (max-width: 1000px) {
	.strip {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 460px) {
	.strip {
		grid-template-columns: 1fr;
	}
}

/* aside cards + table of contents */
.acard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 15px 20px;
	box-shadow: var(--sh-sm);
}
.acard h4,
.acard h3 {
	font-family: var(--sans), serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 0;
	padding-bottom: 0;
}
.acard ul {
	display: grid;
	gap: 0;
}
.acard li {
	display: flex;
	gap: 11px;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.5;
	padding: 5px 0 10px 0px;
}
.acard svg {
	width: 15px;
	height: 15px;
	stroke: var(--color-1);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 3px;
}
.acard p {
	font-size: 14px;
	color: var(--ink-2);
}
.acard .btn {
	width: 100%;
	margin-top: 2px;
	padding: 13px 20px;
	font-size: 14px;
}
.acard.dark {
	background: var(--moss-deep);
	border-color: var(--moss-deep);
	color: var(--paper);
}
.acard.dark h4 {
	color: var(--brass);
}
.acard.dark li,
.acard.dark p {
	color: rgba(250, 246, 239, 0.78);
}
.acard.dark svg {
	stroke: var(--brass);
}
/* button arrows follow the button text, not the .acard checkmark color (must sit after .acard.dark svg) */
.acard .btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	margin-top: 0;
}
.toc {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 15px 20px;
}
.toc h3 {
	font-family: var(--sans) !important, serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase !important;
	color: var(--ink-2);
	margin-bottom: 0;
}
.toc ol {
	list-style: none;
	counter-reset: t;
	display: grid;
	padding: 0;
}
.toc li {
	counter-increment: t;
	font-size: 14px;
	padding: 5px 0 5px 5px;
	list-style: none;
}
.toc a {
	display: flex;
	gap: 10px;
	color: var(--ink-2);
	transition: color 0.2s;
}
.toc a::before {
	content: counter(t, decimal-leading-zero);
	color: var(--brass);
	font-weight: 700;
	font-size: 12.5px;
	padding-top: 1px;
}
.toc a:hover {
	color: var(--clay);
}

/* CTA band — NOTE .cta-band, not .cta (the GLOBAL .cta at ~line 830 is the legacy button atom;
   reusing the name here would inherit button styling). Buttons inside are .btn-clay/.btn-ghost-light. */
.cta-band {
	padding: 0 28px;
}
.cta-card {
	max-width: var(--wrap);
	margin: 0 auto 90px;
	border-radius: var(--r-lg);
	background: linear-gradient(130deg, var(--clay) 0%, var(--clay-deep) 80%);
	color: #fff;
	padding: clamp(40px, 5.4vw, 66px);
	position: relative;
	overflow: hidden;
	text-align: center;
}
.cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.16;
	background: radial-gradient(560px 300px at 88% 0%, #fff, transparent 62%);
}
.cta-inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}
.cta-inner h2 {
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 520;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.cta-inner h2 em {
	font-style: italic;
	color: #f2ce97;
}
.cta-inner p {
	margin: 14px 0 28px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16.5px;
	text-align: center;
}
.cta-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.cta-card .btn-clay {
	background: var(--white);
	color: var(--clay-deep);
	box-shadow: none;
}
.cta-card .btn-clay:hover {
	background: var(--linen);
}

/* related-pages link band */
.links {
	background: var(--linen);
	border-top: 1px solid var(--line);
	padding: 76px 0;
}
.link-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 30px;
}
.lcard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.lcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-md);
}
.lcard b {
	font-family: var(--display), serif;
	font-size: 19px;
	font-weight: 560;
	color: var(--color-1);
}
.lcard small {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.5;
}
.lcard span {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--clay);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.lcard svg {
	width: 14px;
	height: 14px;
	stroke: var(--clay);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}
.lcard:hover svg {
	transform: translateX(3px);
}
@media (max-width: 1000px) {
	.link-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 460px) {
	.link-grid {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------*\
    HOME — body.home
\*------------------------------------*/
/* V3 BASELINE — neutralize the legacy theme base defaults every modern-design page overrides
   (see Nehemiah conventions CSS-11). Theme base carries: a{color-2 + underline + bold-serif},
   h1-3{font-title + uppercase + mauve border + greyFour + inline-block}, ul,ol{20px indent},
   body{text-align:center}, div.content{#fff}, section{padding:75px}. Shared across V3 page slugs
   via :is(): body.home, body.products (SRP/PDP), and body.lp — the shared class every landing/
   marketing page sets ($pageClass="lp" in preContent), so the whole 10-page landing type is
   covered by one hook rather than a slug per page. body.account and its sibling account-*
   slugs (account-register, account-verify, account-assistance), plus body.cart and
   body.checkout, were added the same way (2026 ecommerce restyle — see the ACCOUNT/CART/CHECKOUT
   sections near the end of this file for the page-specific rules built on top of this baseline).
   Add a genuinely new *slug* only for a page that is neither home, products, landing, nor one of
   the account/cart/checkout pages. Scoped to
   .content (#site-content) so the chrome keeps its own styling (esp. the footer's .f-col-title,
   deliberately Inter+uppercase+paper); color:inherit keeps headings light on dark bands. */
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) {
	background: var(--paper);
	/* V3 body text is Inter, not the theme's opensans. The theme's body/a/ul/strong/b/th/i rules
	   all resolve their font through these three tokens, so redefining the tokens on the V3 body
	   flips every one of them to Inter at once — without touching the theme rules or their
	   specificity, and without disturbing components that set --display directly (.hero-meta b,
	   .story-badge b, .rev blockquote stay Fraunces). Headings are already Fraunces via the baseline. */
	--font-text-regular: var(--sans), sans-serif;
	--font-text-strong: var(--sans), sans-serif;
	--font-text-italic: var(--sans), sans-serif;
}
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content {
	text-align: left;
	background: var(--paper);
}
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content h1,
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content h2,
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content h3 {
	font-family: var(--display), serif;
	color: inherit;
	text-transform: none;
	border: none;
	display: block;
	padding: 0;
	text-align: inherit;
}
@media (max-width: 450px) {
    .hero-copy {
        min-width: 0;
    }
    .hero-copy h1,
    .hero-copy > p {
        overflow-wrap: break-word;
    }
    .hero-meta {
        flex-wrap: wrap;
        row-gap: 20px;
    }
}
body.contact h1,
body.birdhouses h1,
body.bird-feeders h1,
body.lighthouses h1,
body.mailboxes h1,
body.wind-chimes h1,
body.whirligigs h1,
body.outdoor-accents h1,
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content h3 {
	color: var(--greyFive) !important;
}
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content a {
	text-decoration: none;
	font-family: inherit, serif;
}
.crumb ol li a {
	color: var(--stone);
	font-size: 14px;
}
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content ul {
	list-style: none;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content button,
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .content input {
	font-family: inherit, serif;
}
/* content column matches the chrome (--wrap 1240) not the theme .wrapper (1400) */
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .wrapper {
	max-width: var(--wrap);
	padding: 0 28px;
}

/* accordion header font: the V3 baseline's :is(...) .content button{font-family:inherit}
   (0,2,2) outranks the GLOBAL .acc-item>button base rule; this equal-specificity companion
   sits after the baseline in source order, so accordion headers stay Fraunces on V3 pages. */
:is(body.home, body.products, body.lp, body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout) .acc-item > button {
	font-family: var(--display), serif;
}

/* --- home-specific baseline exceptions (not shared) --- */
/* the ul reset above zeroes list padding; restore hero-meta's divider gap (the theme ul rule
   and the reset both clobber this component's own padding-top:30px). */
body.home .content .hero-meta {
	padding-top: 30px;
}
/* the theme's section{padding:75px 20px} pads the hero on top of the grid's own 70/84 (the
   standalone design has no section padding — its grid sits flush). Replace the theme's 75px with
   the small values that make the rendered top/bottom gaps match the design (measured: A=98, C=103;
   the build's copy column runs taller than the design's, so it needs less than the design's offset). */
body.home .hero {
	padding-top: 24px;
	padding-bottom: 19px;
}
/* reveal degrades gracefully: no-JS shows content rather than leaving it hidden */
body.home.no-js .rv {
	opacity: 1;
	transform: none;
}

/* hero + slider */
.hero {
	overflow: hidden;
	background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 64px;
	align-items: center;
	padding: 50px 0;
}
.hero-copy h1 {
	font-size: clamp(40px, 5.4vw, 66px);
	font-weight: 480;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 22px 0 0;
}
body.home h1 {
	color: var(--color-1) !important;
}
.hero-copy > p {
	margin: 24px 0 34px;
	font-size: 18px;
	color: var(--stone);
	max-width: 470px;
}
.hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.hero-meta {
	display: flex;
	gap: 40px;
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}
.hero-meta b {
	display: block;
	font-family: var(--display), serif;
	font-size: 28px;
	font-weight: 560;
	letter-spacing: -0.01em;
}
.hero-meta small {
	font-size: 12.5px;
	color: var(--stone);
	letter-spacing: 0.04em;
}
.hero-visual {
	position: relative;
}
.hero-arch {
	position: relative;
	border-radius: 300px 300px var(--r-lg) var(--r-lg);
	overflow: hidden;
	aspect-ratio: 4.4 / 5;
	box-shadow: var(--sh-lg);
	background: var(--linen);
}
.hero-arch .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s var(--ease);
}
.hero-arch .slide.on {
	opacity: 1;
}
.hero-arch .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slider-dots {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 5;
	display: flex;
	gap: 8px;
}
.slider-dots button {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 253, 249, 0.55);
	cursor: pointer;
	padding: 0;
	transition: all 0.3s var(--ease);
}
.slider-dots button.on {
	width: 26px;
	background: var(--white);
}
.hero-card {
	position: absolute;
	left: -26px;
	bottom: 36px;
	z-index: 6;
	background: var(--white);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 300px;
	max-width: 76vw;
	transition: opacity 0.35s, transform 0.35s;
}
.hero-card.swap {
	opacity: 0;
	transform: translateY(8px);
}
.hero-card img {
	width: 58px;
	height: 58px;
	border-radius: 12px;
	object-fit: cover;
	flex: none;
}
.hero-card b {
	display: block;
	font-size: 14px;
	line-height: 1.35;
}
.hero-card small {
	font-size: 12.5px;
	color: var(--stone);
}
.hero-card .hc-price {
	margin-left: auto;
	font-family: var(--display), serif;
	font-weight: 600;
	color: var(--clay);
	font-size: 17px;
}
.hero-stamp {
	position: absolute;
	top: 26px;
	right: -8px;
	z-index: 6;
	width: 104px;
	height: 104px;
	animation: spin 22s linear infinite;
}
.hero-stamp text {
	font-family: var(--sans), sans-serif; /* Inter; the theme's body font is wider and overruns the ring */
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.34em; /* 2-word ring "GUARANTEED · HANDMADE ·" fills ~93% of the circumference — no collision/clipping (design's 3-word text overflowed and collided) */
	text-transform: uppercase;
	fill: var(--ink);
}
.hero-stamp .stamp-c {
	fill: var(--brass);
}

/* marquee */
.marquee {
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	padding: 15px 0;
	white-space: nowrap;
}
.marquee-track {
	display: inline-flex;
	gap: 56px;
	animation: mq 30s linear infinite;
}
.marquee span {
	display: inline-flex;
	align-items: center;
	gap: 56px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.marquee i {
	font-style: normal;
	color: var(--brass);
}
@keyframes mq {
	to { transform: translateX(-50%); }
}

/* story */
.story {
	position: relative;
	overflow: hidden;
	background: var(--moss-deep);
	color: var(--paper);
}
.story::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.6;
	background:
		radial-gradient(760px 400px at 88% 6%, rgba(185, 138, 68, 0.25), transparent 62%),
		radial-gradient(560px 360px at 4% 100%, rgba(154, 75, 51, 0.28), transparent 60%);
}
.story-grid {
	position: relative;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 70px;
	align-items: center;
	padding: 104px 0;
}
.story-visual {
	position: relative;
}
.story-imgs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.story-imgs img {
	width: 100%;
	border-radius: var(--r-md);
	object-fit: cover;
	box-shadow: 0 20px 44px rgba(33, 27, 20, 0.3);
}
.story-imgs img:first-child {
	aspect-ratio: 3 / 4;
}
.story-imgs img:last-child {
	aspect-ratio: 3 / 4;
	margin-top: 44px;
}
.story-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 118px;
	height: 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--brass);
	color: var(--ink);
	border-radius: 50%;
	border: 5px solid var(--moss-deep);
	box-shadow: 0 16px 34px rgba(33, 27, 20, 0.35);
}
@media (max-width: 450px) {
	.story-badge {
		display: none;
	}
}
.story-badge b {
	font-family: var(--display), serif;
	font-size: 30px;
	line-height: 1;
}
.story-badge small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 3px;
}
.story-copy .eyebrow {
	color: var(--brass);
}
.story-copy .eyebrow::before {
	background: var(--brass);
}
.story-copy h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 18px 0 0;
}
.story-copy h2 em {
	color: #D9B26F; /* design-specified gold accent for the dark moss band (CORE-3; brighter than --brass, which reads muddy here) */
}
.story-copy > p {
	margin: 22px 0 6px;
	color: rgba(250, 246, 239, 0.78);
	font-size: 16.5px;
	max-width: 520px;
}
.story-list {
	display: grid;
	gap: 16px;
	margin-top: 28px;
}
.story-list li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.sp-ic {
	width: 44px;
	height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(250, 246, 239, 0.08);
	border: 1px solid rgba(250, 246, 239, 0.16);
}
.sp-ic svg {
	width: 20px;
	height: 20px;
	stroke: var(--brass);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.story-list b {
	display: block;
	font-size: 15.5px;
}
.story-list p {
	font-size: 14px;
	color: rgba(250, 246, 239, 0.64);
	line-height: 1.55;
}
.story-copy .btn {
	margin-top: 32px;
}

/* newsletter */
.news {
	padding: 0 28px;
}
.news-card {
	position: relative;
	overflow: hidden;
	max-width: var(--wrap);
	margin: 96px auto;
	padding: clamp(44px, 6vw, 76px);
	border-radius: var(--r-lg);
	background: linear-gradient(130deg, var(--clay) 0%, var(--clay-deep) 80%);
	color: var(--white);
	text-align: center;
}
@media (max-width: 450px) {
	.news-card {
        padding: 20px;
    }
}
.news-card::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.16;
	background: radial-gradient(560px 300px at 88% 0%, var(--white), transparent 62%);
}
.news-inner {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
.news-inner h2 {
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 520;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin-top: 14px;
}
.news-inner h2 em {
	color: #F2CE97; /* design-specified gold accent for the clay panel (CORE-3; brighter than --brass for heading contrast) */
}
.news-eyebrow {
	color: var(--brass);
}
.news-inner p {
	margin: 16px 0 30px;
	color: rgba(255, 253, 249, 0.85);
	font-size: 16.5px;
	text-align: center;
}
.news-form {
	display: flex;
	gap: 10px;
	padding: 8px;
	border-radius: 999px;
	background: rgba(255, 253, 249, 0.13);
	border: 1px solid rgba(255, 253, 249, 0.3);
}
.news-form input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	color: var(--white);
	padding: 10px 20px;
	font-size: 15px;
}
.news-form input::placeholder {
	color: rgba(255, 253, 249, 0.6);
}
.news-submit {
	background: var(--white);
	color: var(--clay-deep);
	padding: 13px 28px;
	box-shadow: none;
}
.news-submit:hover {
	background: var(--linen);
}
.news-note {
	margin-top: 16px;
	font-size: 12.5px;
	color: rgba(255, 253, 249, 0.6);
}
/* The CRM newsletter form (default theme widget: .form-container > form > .form-input) wears the same pill as .news-form */
.news-inner .form-container {
	max-width: none;
	margin: 0;
	padding: 0;
}
.news-inner .form-container form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px;
	border-radius: 28px;
	background: rgba(255, 253, 249, 0.13);
	border: 1px solid rgba(255, 253, 249, 0.3);
}
.news-inner .form-container .form-input {
	display: block;
	flex: 1 1 200px;
	width: auto;
	margin: 0;
	padding: 0;
}
.news-inner .form-container .form-input:has(button) {
	flex: 0 0 auto;
}
.news-inner .form-container label {
	display: block;
	margin: 0;
}
.news-inner .form-container label span {
	display: none;
}
.news-inner .form-container input {
	width: 100%;
	border: none;
	background: transparent;
	outline: none;
	box-shadow: none;
	color: var(--white);
	padding: 10px 20px;
	font-size: 15px;
	line-height: 1.4;
	cursor: text;
}
.news-inner .form-container input::placeholder {
	color: rgba(255, 253, 249, 0.6);
}
.news-inner .form-container input.inputError {
	background-color: rgba(255, 217, 201, 0.22) !important;
	border-radius: 999px;
	color: var(--white);
}
.news-inner .form-container button.cta {
	margin: 0;
	padding: 13px 28px;
	border: none;
	border-radius: 999px;
	background: var(--white);
	color: var(--clay-deep);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.25s var(--ease);
}
.news-inner .form-container button.cta:hover {
	background: var(--linen);
}
.news-inner .form-container .error,
.news-inner .form-container .form-error-container {
	flex: 1 1 100%;
	width: auto;
	margin: 0;
	padding: 0 12px 6px;
	background: none;
	color: #ffd9c9;
	font-size: 13px;
	font-weight: 600;
}
.news-msg {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

/* home-only responsive (hero/story/newsletter — the sections that stay page-scoped) */
@media (max-width: 1120px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 48px 0 60px;
	}
	.hero-arch {
		aspect-ratio: 16 / 11;
		border-radius: 180px 180px var(--r-lg) var(--r-lg);
		max-width: 500px;
        max-height: 500px;
	}
	.hero-card {
		left: 14px;
		bottom: 20px;
	}
	.hero-stamp {
		top: 14px;
		left: 400px;
	}
}
@media (max-width: 920px) {
	.story-grid {
		grid-template-columns: 1fr;
		gap: 52px;
		padding: 70px 0;
	}
}
@media (max-width: 575px) {
	.hero-stamp {
		left: 75%;
	}
	.hero-card {
		bottom: -41px;
	}
}
@media (max-width: 520px) {
	.news-form,
	.news-inner .form-container form {
		flex-direction: column;
		border-radius: 20px;
	}
	.news-inner .form-container .form-input {
		flex: 0 0 auto;
	}
	.news-submit,
	.news-inner .form-container button.cta {
		width: 100%;
	}
}
@media (max-width: 500px) {
	.hero-stamp,
	.hero-card {
		display: none;
	}
}
/*------------------------------------*\
    PRODUCT DETAIL — body.products
    (reuse pass: reuses GLOBAL .btn/.eyebrow/.sec-head/.stars/.flag + the home
     .featured/.feat card, .story moss band, and .reviews/.rev card shell.
     .crumb + .acc/.spec are GLOBAL-reusable but sit here, after the V3 baseline,
     so the accordion header font (.content .acc-item>button) beats the baseline's
     .content button{font-family:inherit}. .drawer/.d-.toast/.stickybar are
     /*PDP-scoped for now — PROMOTE to shared chrome when the cart goes live site-wide.)*/
/*\*------------------------------------*/

/* accordion buy-box spacing (the .acc / .crumb / .spec structure is GLOBAL; this is PDP context) */
.buy .acc {
	margin-top: 34px;
}

/* pdp layout */
.pdp {
	padding: 26px 0 84px;
}
.pdp-grid {
	display: grid;
	grid-template-columns: 1.06fr 0.94fr;
	gap: 60px;
	align-items: start;
}

/* gallery */
.gal {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 16px;
	position: sticky;
	top: 150px;
}
.thumbs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.thumbs button {
	border: 1.5px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--paper-2);
	cursor: pointer;
	padding: 0;
	aspect-ratio: 1 / 1;
	transition: all 0.2s;
}
.thumbs button.on {
	border-color: var(--ink);
}
.thumbs button:hover {
	border-color: var(--clay);
}
.thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.stage {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--paper-2);
	aspect-ratio: 1 / 1.04;
	box-shadow: var(--sh-sm);
}
.stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	inset: 0;
	transition: opacity 0.45s var(--ease);
}
.stage img.on {
	opacity: 1;
}
.stage video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.45s var(--ease);
}
.stage video.on {
	opacity: 1;
	pointer-events: auto;
}
.stage-flags {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.zoom-note {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 600;
	background: rgba(255, 253, 249, 0.92);
	backdrop-filter: blur(4px);
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--ink-2);
}
.zoom-note svg {
	width: 13px;
	height: 13px;
	stroke: var(--ink-2);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* buy box */
.buy .cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}
.buy h1 {
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 520;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 10px 0 0;
}
.rate-line {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.rate-line a {
	font-size: 13.5px;
	color: var(--stone);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rate-line a:hover {
	color: var(--clay);
}
.sku {
	font-size: 12.5px;
	color: var(--stone);
}
.price-block {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 22px 0 6px;
}
.price-now {
	font-family: var(--display), serif;
	font-size: 38px;
	font-weight: 600;
	color: var(--clay);
	letter-spacing: -0.01em;
}
.price-note {
	font-size: 13px;
	color: var(--stone);
}
.blurb {
	margin: 16px 0 0;
	color: var(--ink-2);
	font-size: 15.5px;
	max-width: 56ch;
}
.keypoints {
	margin: 22px 0 0;
	display: grid;
	gap: 10px;
}
.keypoints li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.5;
}
.keypoints svg {
	width: 17px;
	height: 17px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 3px;
}

/* options */
.opt {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.opt-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.opt-head b {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.opt-head span {
	font-size: 13.5px;
	color: var(--stone);
}
.swatches {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.sw {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--line);
	cursor: pointer;
	padding: 0;
	position: relative;
	transition: all 0.2s;
}
.sw:hover {
	transform: translateY(-2px);
}
.sw.on {
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink);
}
.sizes {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}
.size {
	padding: 12px 20px;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--line);
	background: var(--white);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
	line-height: 1.3;
}
.size small {
	display: block;
	font-weight: 500;
	color: var(--stone);
	font-size: 12px;
}
.size:hover {
	border-color: var(--ink);
}
.size.on {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}
.size.on small {
	color: rgba(255, 255, 255, 0.7);
}
.addon {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.2s;
	margin-top: 9px;
	background: var(--white);
}
.addon:hover {
	border-color: var(--ink);
}
.addon input {
	appearance: none;
	width: 19px;
	height: 19px;
	border: 1.5px solid var(--line);
	border-radius: 5px;
	background: var(--white);
	cursor: pointer;
	flex: none;
	position: relative;
	margin-top: 2px;
	transition: all 0.18s;
}
.addon input:checked {
	background: var(--ink);
	border-color: var(--ink);
}
.addon input:checked::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--white);
	border-width: 0 2.2px 2.2px 0;
	transform: rotate(42deg);
}
.addon b {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}
.addon small {
	font-size: 12.5px;
	color: var(--stone);
	line-height: 1.45;
}
.addon .ap {
	margin-left: auto;
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}

/* qty + actions */
.actions {
	display: flex;
	align-items: flex-end;   /* bottom-align so the button lines up with the qty select under its "Qty" label */
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
}
.qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	padding: 4px 6px;
}
.qty button {
	width: 38px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 19px;
	font-weight: 600;
	color: var(--ink);
	border-radius: 999px;
	transition: background 0.2s;
}
.qty button:hover {
	background: var(--linen);
}
.qty input {
	width: 44px;
	text-align: center;
	border: none;
	background: none;
	font-size: 15px;
	font-weight: 700;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.actions .btn-clay {
	flex: none;
	min-width: 180px;
	padding: 12px 28px;   /* sized to sit level with the qty select, not the whole qty label */
	margin: 0;            /* cancel the legacy bare button{margin:10px auto}, which centered it and lifted it 10px */
}
.buy-now {
	width: 100%;
	margin-top: 10px;
}
.assure {
	margin-top: 22px;
	display: grid;
	gap: 11px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.assure li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--ink-2);
	line-height: 1.5;
}
.assure svg {
	width: 16px;
	height: 16px;
	stroke: var(--brass);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 3px;
}
.assure b {
	font-weight: 600;
}
.ship-callout {
	margin-top: 20px;
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: var(--linen);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 18px;
}
.ship-callout svg {
	width: 19px;
	height: 19px;
	stroke: var(--clay);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 2px;
}
.ship-callout b {
	display: block;
	font-size: 14.5px;
}
.ship-callout p {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.55;
	margin-top: 3px;
}

/* maker band — reuses the home .story moss treatment; single photo in .story-visual */
.maker-photo {
	width: 100%;
	border-radius: var(--r-md);
	object-fit: cover;
	aspect-ratio: 4 / 3;
	box-shadow: 0 20px 44px rgba(33, 27, 20, 0.3);
}

/* reviews — reuses .reviews band + .rev card shell + .rev-av/.av-* + .rev-check;
   new: summary panel, the top-anchored header row, the per-item attribution + source note */
.rev-top {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 52px;
	align-items: start;
}
.rev-score {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 28px;
	text-align: center;
}
.rev-score b {
	display: block;
	font-family: var(--display), serif;
	font-size: 52px;
	font-weight: 600;
	line-height: 1;
}
.rev-score .stars {
	margin: 10px 0 6px;
}
.rev-score small {
	font-size: 13px;
	color: var(--stone);
}
.rev-bars {
	margin-top: 20px;
	display: grid;
	gap: 8px;
	text-align: left;
}
.rev-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--stone);
}
.rev-bar i {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.rev-bar i span {
	display: block;
	height: 100%;
	background: var(--brass);
	border-radius: 999px;
}
.rev-list {
	display: grid;
	gap: 18px;
}
.rev-hd {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.rev-hd b {
	font-size: 14.5px;
	display: block;
}
.rev-hd small {
	font-size: 12.5px;
	color: var(--stone);
}
.rev-item {
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--stone);
}
.rev-item a {
	color: var(--clay);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rev-src {
	margin-top: 26px;
	font-size: 12.5px;
	color: var(--stone);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 18px;
	line-height: 1.6;
}

/* faq */
.faq {
	padding: 82px 0;
}
.faq-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 56px;
	align-items: start;
}
.faq-title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 520;
	line-height: 1.15;
	margin-top: 14px;
}

/* related — reuses the home .featured band + .feat-grid + .feat; .rel flips the divider
   to a top border (last content band before the footer) */
.rel {
	border-top: 1px solid var(--line);
	border-bottom: none;
}

/* sticky buy bar (PDP-scoped) */
.stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 85;
	background: rgba(250, 246, 239, 0.96);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 30px rgba(33, 27, 20, 0.1);
	transform: translateY(110%);
	transition: transform 0.35s var(--ease);
}
.stickybar.on {
	transform: none;
}
.sb-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 28px;
	min-height: 74px;
}
.sb-inner img {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	object-fit: cover;
	flex: none;
}
.sb-txt b {
	display: block;
	font-family: var(--display), serif;
	font-size: 16px;
	font-weight: 560;
	line-height: 1.25;
}
.sb-txt small {
	font-size: 12.5px;
	color: var(--stone);
}
.sb-price {
	margin-left: auto;
	font-family: var(--display), serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--clay);
}
.sb-inner .btn {
	padding: 13px 26px;
}

/* cart drawer + toast (PDP-scoped now; PROMOTE to shared chrome when the cart goes live) */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
	pointer-events: none;
}
.drawer .scrim {
	position: absolute;
	inset: 0;
	background: rgba(33, 27, 20, 0.5);
	opacity: 0;
	transition: opacity 0.3s;
}
.drawer .panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 94vw);
	background: var(--paper);
	transform: translateX(102%);
	transition: transform 0.38s var(--ease);
	display: flex;
	flex-direction: column;
	box-shadow: var(--sh-lg);
}
.drawer.open {
	pointer-events: auto;
}
.drawer.open .scrim {
	opacity: 1;
}
.drawer.open .panel {
	transform: none;
}
.d-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 26px;
	border-bottom: 1px solid var(--line);
}
.d-head h3 {
	font-family: var(--display), serif;
	font-size: 22px;
	font-weight: 560;
}
.d-items {
	flex: 1;
	overflow: auto;
	padding: 10px 26px;
}
.d-empty {
	text-align: center;
	color: var(--stone);
	padding: 60px 20px;
	font-size: 15px;
}
.d-item {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}
.d-item img {
	width: 70px;
	height: 70px;
	border-radius: 12px;
	object-fit: cover;
	flex: none;
}
.d-item b {
	display: block;
	font-family: var(--display), serif;
	font-size: 15.5px;
	font-weight: 560;
	line-height: 1.3;
}
.d-item small {
	color: var(--stone);
	font-size: 12.5px;
}
.d-qty {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px 10px;
}
.d-qty button {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	width: 18px;
}
.d-qty span {
	font-size: 13.5px;
	font-weight: 600;
	min-width: 14px;
	text-align: center;
}
.d-line {
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
}
.d-line b {
	font-size: 14.5px;
	font-weight: 700;
}
.d-rm {
	margin-top: auto;
	border: none;
	background: none;
	color: var(--stone);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.d-rm:hover {
	color: var(--clay);
}
.d-foot {
	padding: 22px 26px 28px;
	border-top: 1px solid var(--line);
	background: var(--white);
}
.d-sub {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	margin-bottom: 6px;
}
.d-sub b {
	font-size: 18px;
}
.d-note {
	font-size: 12.5px;
	color: var(--stone);
	margin-bottom: 16px;
}
.d-foot .btn {
	width: 100%;
}
.toast {
	position: fixed;
	left: 50%;
	bottom: 100px;
	transform: translate(-50%, 80px);
	z-index: 400;
	background: var(--ink);
	color: var(--paper);
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--sh-lg);
	opacity: 0;
	transition: all 0.4s var(--ease);
	display: flex;
	align-items: center;
	gap: 10px;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
.toast svg {
	width: 16px;
	height: 16px;
	stroke: var(--moss);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* On a narrow screen the open cart drawer covers the middle of the page, so lift the toast above the drawer's footer (subtotal, shipping note, Checkout) instead of over it */
@media (max-width: 840px) {
	.drawer.open + .toast {
		bottom: 210px;
	}
}

/* pdp responsive */
@media (max-width: 1000px) {
	.pdp-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.gal {
		position: static;
		grid-template-columns: 1fr;
	}
	.thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.thumbs button {
		width: 76px;
		flex: none;
	}
}
@media (max-width: 900px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}
@media (max-width: 880px) {
	.rev-top {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}
@media (max-width: 640px) {
	.sb-txt,
	.sb-inner img {
		display: none;
	}
	.sb-price {
		margin-left: 0;
	}
	.sb-inner .btn {
		flex: 1;
	}
}
body.products section.cat-head {
	padding: 28px 0 48px;
}
body.products .card {
	background-color: #fff;
	border-radius: 16px;
	border: 1px solid var(--line);
}
body.products .card-body {
	padding: 16px;
}
body.products .stage {
	border-radius: 16px;
}
/* --- products.php REAL-FORM controls (detail-branch integration 2026-08-18) --------------------- *\
   The standalone product-detail.php used demo swatches/size-buttons; the real products.php buy box is a
   server POST form with select/checkbox/radio controls (name=prodSizeID/prodQty/prodAttrGroupAttrID[]/
   attributeID/subscriptionInterval). These are the V3 styling for those real controls. Page-scoped to
   body.products; .buy-select etc. deliberately out-rank the legacy bare input/select theme rules. */
body.products .buy-form {
	display: grid;
	gap: 18px;
	margin-top: 6px;
}
body.products .buy-select {
	appearance: none;
	width: 100%;
	border: 1.5px solid var(--line);
	/* appearance:none strips the native arrow, so draw a chevron (--ink) on the right */
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211B14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
	border-radius: var(--r-sm);
	padding: 12px 42px 12px 16px;
	font-size: 15px;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s;
}
body.products .buy-select:hover {
	border-color: var(--stone);
}
body.products .buy-select:focus {
	outline: none;
	border-color: var(--ink);
}
body.products .attribute-group-is-required {
	color: var(--clay);
	font-weight: 700;
}
body.products .opt-optional {
	font-size: 12px;
	color: var(--stone);
	letter-spacing: 0.02em;
}
body.products .othersizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.products .othersize {
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	transition: border-color 0.2s, color 0.2s;
}
body.products .othersize:hover {
	border-color: var(--ink);
}
body.products .othersize.on {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}
body.products .attr-list {
	display: grid;
	gap: 9px;
}
body.products .attr-opt {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14.5px;
	color: var(--ink-2);
	cursor: pointer;
}
body.products .attr-opt input {
	width: auto;   /* override the legacy theme's bare input{width:100%} so radio/checkbox sit inline */
	margin-top: 3px;
	flex: none;
	accent-color: var(--clay);
}
body.products .attribute-price {
	color: var(--stone);
	font-weight: 600;
}
body.products .qty-field {
	display: grid;
	gap: 7px;
}
body.products .qty-field .buy-select {
	width: auto;
	min-width: 96px;   /* room for the number plus the chevron */
}
body.products .oos {
	display: inline-block;
	padding: 12px 18px;
	border-radius: var(--r-sm);
	background: var(--paper-2);
	color: var(--clay-deep);
	font-weight: 600;
	margin-top: 6px;
}
body.products .pdp-questions {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 40px 0;
}
body.products .pdp-questions .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-block: 28px;
}
body.products .pdp-questions p {
	margin: 0;
	color: var(--ink-2);
}

/*------------------------------------*\
    PRODUCTS SRP — body.products (listing)
    (reuse pass: reuses GLOBAL .crumb/.btn/.eyebrow/.flag/.card/.card-.grid/.quick/.price/
     .cat-stats/.trust + the PDP cart .drawer/.d-.toast. Listing shell below stays page-scoped —
     nothing else lists products. The filter groups (.fgroup) follow the GLOBAL .acc accordion
     pattern; landing-page FAQs should reuse .acc rather than reinvent. .flag.f-brass is added to
     the GLOBAL .flag set. The SRP .grid overrides the GLOBAL 4-col to 3-col in this context.)
\*------------------------------------*/

/* Section A — masthead */
.cat-head {
	padding: 26px 0 42px;
	border-bottom: 1px solid var(--line);
}
.cat-head-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: end;
}
.cat-head h1 {
	font-size: clamp(32px, 4.2vw, 50px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 16px 0 0;
	max-width: 16ch;
}
.cat-intro {
	margin-top: 18px;
	font-size: 17px;
	color: var(--stone);
	max-width: 58ch;
}
.searchbar {
	margin-top: 26px;
	display: flex;
	gap: 10px;
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
	max-width: 560px;
	transition: border-color 0.2s;
}
.searchbar:focus-within {
	border-color: var(--ink);
}
.searchbar svg {
	width: 19px;
	height: 19px;
	stroke: var(--stone);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	align-self: center;
	flex: none;
}
.searchbar input {
	flex: 1;
	border: none;
	background: none;
	outline: none;
	font-size: 15px;
	padding: 10px 4px;
	min-width: 0;
}
.searchbar button {
	border: none;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 26px;
	cursor: pointer;
	transition: background 0.2s;
}
.searchbar button:hover {
	background: var(--clay);
}
.qsum {
	display: none;
	margin-top: 18px;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14.5px;
}
.qsum.on {
	display: flex;
}
.qsum b {
	font-family: var(--display), serif;
	font-size: 19px;
	font-weight: 560;
}
.qsum a {
	font-size: 13px;
	color: var(--clay);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Section B — toolbar */
.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 26px 0;
	position: sticky;
	top: 78px;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.tb-count {
	font-size: 14px;
	color: var(--stone);
}
.tb-count b {
	color: var(--ink);
	font-weight: 700;
}
.tb-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sortsel {
	appearance: none;
	border: 1px solid var(--line);
	background: var(--white);
	border-radius: 999px;
	padding: 11px 42px 11px 20px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211B14' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
}
.sortsel:focus {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}
.filter-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--white);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.filter-toggle svg {
	width: 15px;
	height: 15px;
	stroke: var(--ink);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* Section B — layout + rail */
.srp {
	padding: 34px 0 90px;
}
.srp-grid {
	display: grid;
	grid-template-columns: 262px 1fr;
	gap: 44px;
	align-items: start;
}
.rail {
	position: sticky;
	top: 150px;
}
.rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.rail-head h2 {
	font-family: var(--sans), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.clear-all {
	border: none;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--clay);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.clear-all:hover {
	color: var(--clay-deep);
}
.active-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 14px 0 4px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	background: var(--linen);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 8px 6px 13px;
	color: var(--ink-2);
}
.pill button {
	border: none;
	background: none;
	cursor: pointer;
	line-height: 0;
	color: var(--stone);
}
.pill svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.6;
	stroke-linecap: round;
}
.pill button:hover {
	color: var(--clay);
}
.fgroup {
	border-top: 1px solid var(--line);
	padding: 20px 0;
}
.fgroup:first-of-type {
	border-top: none;
}
.fgroup > button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	text-align: left;
}
.fgroup > button svg {
	width: 15px;
	height: 15px;
	stroke: var(--stone);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	transition: transform 0.25s var(--ease);
	flex: none;
}
.fgroup.closed > button svg {
	transform: rotate(-90deg);
}
.fbody {
	display: grid;
	gap: 11px;
	margin-top: 15px;
}
.fgroup.closed .fbody {
	display: none;
}
.chk {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	color: var(--ink-2);
	cursor: pointer;
	line-height: 1.4;
}
.chk input {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--line);
	border-radius: 5px;
	background: var(--white);
	cursor: pointer;
	flex: none;
	transition: all 0.18s;
	position: relative;
}
.chk input:checked {
	background: var(--ink);
	border-color: var(--ink);
}
.chk input:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 5px;
	height: 10px;
	border: solid var(--white);
	border-width: 0 2.2px 2.2px 0;
	transform: rotate(42deg);
}
.chk input:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}
.chk:hover {
	color: var(--ink);
}
.chk .n {
	margin-left: auto;
	font-size: 12px;
	color: var(--stone);
}
.price-in {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 4px;
}
.price-in input {
	width: 100%;
	border: 1px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 10px 12px;
	font-size: 13.5px;
}
.price-in input:focus {
	outline: none;
	border-color: var(--ink);
}
.price-in span {
	color: var(--stone);
	font-size: 13px;
}
.rail-help {
	margin-top: 22px;
	background: var(--linen);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 20px;
}
.rail-help b {
	display: block;
	font-family: var(--display), serif;
	font-size: 16.5px;
	font-weight: 560;
	margin-bottom: 6px;
}
.rail-help p {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.55;
}
.rail-help a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--clay);
	border-bottom: 2px solid var(--clay);
	padding-bottom: 2px;
}
.rail-close {
	display: none;
	position: absolute;
	top: 20px;
	right: 20px;
}

/* results grid — override the GLOBAL 4-col .card grid to the SRP's 3-col-beside-rail */
.srp .grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 24px;
	margin-top: 0;
}
/* card additions unique to the SRP */
.wish {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 253, 249, 0.92);
	backdrop-filter: blur(4px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sh-sm);
	transition: all 0.2s;
}
.wish svg {
	width: 16px;
	height: 16px;
	stroke: var(--ink);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: all 0.2s;
}
.wish:hover {
	transform: scale(1.08);
}
.wish.on svg {
	fill: var(--clay);
	stroke: var(--clay);
}
.card-meta {
	font-size: 12.5px;
	color: var(--stone);
	line-height: 1.5;
	margin-bottom: 11px;
}
.ship-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 9px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--moss);
}
.ship-tag.slow {
	color: var(--stone);
}
.ship-tag svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* results tail */
.empty {
	display: none;
	text-align: center;
	padding: 80px 20px;
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
}
.empty.on {
	display: block;
}
.empty h3 {
	font-size: 24px;
	font-weight: 540;
	margin-bottom: 10px;
}
.empty p {
	color: var(--stone);
	max-width: 46ch;
	margin: 0 auto 22px;
}
.more-wrap {
	text-align: center;
	margin-top: 58px;
}
.progress {
	max-width: 230px;
	margin: 0 auto 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.progress i {
	display: block;
	height: 100%;
	background: var(--clay);
	border-radius: 999px;
	transition: width 0.5s var(--ease);
}
.more-wrap p {
	font-size: 13px;
	color: var(--stone);
	margin-bottom: 18px;
}
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 40px;
	flex-wrap: wrap;
}
.pager a,
.pager span {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--line);
	background: var(--white);
	transition: all 0.2s;
}
.pager a:hover {
	border-color: var(--ink);
}
.pager .on {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}
.pager .dots {
	border: none;
	background: none;
	color: var(--stone);
}

/* mobile filter scrim + back-to-top */
.scrim-mob {
	position: fixed;
	inset: 0;
	background: rgba(33, 27, 20, 0.5);
	z-index: 205;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.scrim-mob.on {
	opacity: 1;
	pointer-events: auto;
}
.top-btn {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 80;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--ink);
	color: var(--white);
	cursor: pointer;
	box-shadow: var(--sh-md);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.top-btn.show {
	opacity: 1;
	pointer-events: auto;
}
.top-btn:hover {
	background: var(--clay);
	transform: translateY(-3px);
}
.top-btn svg {
	width: 18px;
	height: 18px;
	stroke: var(--white);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* SRP responsive */
@media (max-width: 1120px) {
	.srp-grid {
		grid-template-columns: 230px 1fr;
		gap: 30px;
	}
	.srp .grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 860px) {
	.srp-grid {
		grid-template-columns: 1fr;
	}
	.filter-toggle {
		display: inline-flex;
	}
	.rail {
		position: fixed;
		inset: 0;
		top: 0;
		z-index: 210;
		background: var(--paper);
		padding: 26px;
		overflow: auto;
		transform: translateX(-102%);
		transition: transform 0.35s var(--ease);
	}
	.rail.open {
		transform: none;
	}
	.rail-close {
		display: inline-flex !important;
	}
	.srp .quick {
		opacity: 1;
		transform: none;
	}
	.cat-head-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		align-items: start;
	}
}
@media (max-width: 430px) {
	.srp .grid {
		grid-template-columns: 1fr;
	}
}

/* --- products.php LISTING integration (real category nav, no client faceting) 2026-08-18 ------- *\
   The real listing branch is server-filtered category navigation, not the demo's client faceting. These
   are the V3 styling for the slimmed rail (real $categoryOptions nav) + the click-through product cards.
   Page-scoped to body.products; ships no JS (the category rail is NOT #rail, so the SRP demo IIFE skips). */
body.products .card-cat {
	color: var(--clay);
}
body.products .listing-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 34px 40px;
	align-items: start;
	margin-top: 8px;
}
body.products .catrail {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 20px;
}
body.products .catrail-title {
	font-family: var(--sans), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
body.products .cat-nav-list {
	display: grid;
	gap: 2px;
}
body.products .cat-nav {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	transition: background 0.15s, color 0.15s;
}
body.products .cat-nav:hover {
	background: var(--linen);
	color: var(--clay-deep);
}
body.products .cat-nav.on {
	background: var(--clay);
	color: var(--white);
	font-weight: 600;
}
body.products .rail-note {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 20px;
}
body.products .rail-note b {
	display: block;
	font-family: var(--display), serif;
	font-size: 15px;
	font-weight: 560;
	margin-bottom: 5px;
}
body.products .rail-note p {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.55;
}
body.products .rail-note a {
	color: var(--clay);
	font-weight: 600;
}
body.products .listing-results .grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 24px;
	margin-top: 0;
}
body.products .card.soldout {
	opacity: 0.72;
}
body.products .card-othersizes {
	margin-top: 12px;
}
body.products .othersize.soldout {
	opacity: 0.5;
	text-decoration: line-through;
}
body.products .card-view {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--clay);
}
body.products .card-view svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s var(--ease);
}
body.products .card-view:hover svg {
	transform: translateX(3px);
}
body.products .qclear {
	border: 1px solid var(--line);
	background: var(--white);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	transition: border-color 0.2s;
}
body.products .qclear:hover {
	border-color: var(--ink);
}
@media (max-width: 980px) {
	body.products .listing-grid {
		grid-template-columns: 1fr;
	}
	body.products .catrail {
		position: static;
	}
	body.products .listing-results .grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	body.products .listing-results .grid {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------*\
    ABOUT — body.about
\*------------------------------------*/
/*testimonial styling*/
#testimonials #google-reviews {
	display: flex;
	flex-wrap: wrap;
	margin: 0
}
#testimonials .review-item {
	margin: 8px;
	padding: 1.8em;
	color: #000;
	flex: 1 1 20%;
	background-color: var(--greyZero);
	border: 1px #bfbfbf solid;
	box-shadow: 0 0 15px 2px rgba(170, 170, 170, .2);
	transition-duration: .8s
}
#testimonials .review-item:hover {
	border: 1px solid var(--color-2)
}
.review-meta,
.review-stars {
	text-align: center;
	font-size: 115%
}
.review-author {
	text-transform: capitalize;
	font-size: 28px;
	line-height: 40px
}
.review-author img {
	max-width: 100px;
	vertical-align: middle
}
.review-date {
	opacity: .6;
	display: block;
	font-size: 22px;
	line-height: 22px
}
.review-text {
	line-height: 1.55;
	text-align: left;
	max-width: 32em;
	margin: auto
}
.review-stars ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0
}
.review-stars ul li {
	background-image: none;
	padding: 0;
	float: left;
	margin-right: 1px;
	line-height: 1
}
.review-stars ul li i {
	color: #fed03d;
	font-size: 48px;
	font-style: normal
}
.review-stars ul li i.inactive {
	color: #c6c6c6
}
.star:after {
	content: "\2605"
}
#map-plug {
	display: none
}
@media only screen and (max-width:900px) {
	#testimonials .review-item {
		flex: 1 1 48%
	}
}
@media only screen and (max-width:640px) {
	#testimonials .review-item {
		flex: 1 1 100%
	}
}
/*------------------------------------*\
    BLOG — body.blog
\*------------------------------------*/
body.blog section#blog-articles {
	background-color: #f5f5f5;
	max-width: 100%;
}
body.blog .post-container {
	border: 0;    
	background-color: #fff;
	box-shadow: 0 1px 6px rgba(60,64,67,0.3);
	padding: 5px;
	margin: 10px auto 20px;
	max-width: 1400px;
	transition-duration: 0.8s;
}
body.blog .post-container:hover {
	background-color: var(--color-3);
}
body.blog .post-container .table {
	background-color: #fff;
	padding: 5px;
}
body.blog .post-container .table .post-content {
	padding: 10px 20px;
}
body.blog .post-container .table .post-content .post-title {
	display: inline-block;
	text-align: center;
	font-family: var(--font-text-strong), 'opensans-bold', serif;
	text-transform: uppercase;
	font-size:20px;
	line-height:28px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--color-4);
	margin-bottom: 14px;
	text-align: left;
	vertical-align: middle;
}
body.blog .post-container .table .post-content .post-title a {
	text-decoration: none;
}
body.blog .post-container .table .post-content .post-author {
	color:var(--greyFour);
	text-align: center;
	font-size:14px;
	padding: 8px 0;
	margin: 12px 0 18px;
	border-top: 1px solid var(--greyOne);
	border-bottom: 1px solid var(--greyOne);
}
body.blog .blog-detail {
	border-top: 1px solid var(--greyOne);
	max-width: 1400px;
	margin: 0 auto;
	padding: 15px 0;
}
body.blog .blog-detail .side-item {
	padding: 0 15px;
}
body.blog .blog-detail .side-item .blog-section-title {
	font-weight: normal;
	display: inline-block;
	font-family: var(--font-text-strong), 'opensans-bold', serif;
	font-variant: small-caps;
	font-size: 18px;
	line-height: 24px;
	color: var(--greyFour);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-4);
	margin-bottom: 14px;
	text-align: left;
	vertical-align: middle;
}
body.blog .blog-detail .side-item ul {
	padding-top: 0;
}
body.blog .blog-detail .post-author {
	color:var(--greyFour);
	text-align: left;
	font-size:14px;
	padding: 8px 0;
	margin: 12px 0 18px;
	border-top: 1px solid var(--greyOne);
	border-bottom: 1px solid var(--greyOne);
}
div.social-sharing-buttons {
	margin: 0;
	padding:10px 0 20px 0;
	-webkit-font-smoothing: antialiased;
	font-size: 12px;
	text-align: left;
}
div.social-sharing-buttons div.social-sharing-title {
	text-align: left;
	color: var(--orangeOne);
	font-size: 16px;
	line-height: 20px;
	margin: 8px 0 0 0;
	font-weight: 700;
}
div.social-sharing-buttons a {
	padding: 2px 8px 4px 8px;
	margin:2px;
	color: #fff;
	font-size: 13px;
	border-radius: 2px;
	cursor: pointer;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
	display: inline-block;
	text-decoration: none;
}
div.social-sharing-buttons a:hover,div.social-sharing-buttons a:active {
	color: white;
}
div.social-sharing-buttons a.twitter {
	background-color: #1DA1F2;
	color:#14171A;
}
div.social-sharing-buttons a.twitter:hover,div.social-sharing-buttons a.twitter:active {
	background-color: #5bc1ff;
}
div.social-sharing-buttons a.facebook {
	background-color: #3B5997;
}
div.social-sharing-buttons a.facebook:hover,div.social-sharing-buttons a.facebook:active {
	background-color: #2d4372;
}
div.social-sharing-buttons a.pinterest {
	background-color: #bd081c;
}
div.social-sharing-buttons a.pinterest:hover,div.social-sharing-buttons a.pinterest:active {
	background-color: #9f0112;
}
div.social-sharing-buttons a.linkedin {
	background-color: #0074A1;
}
div.social-sharing-buttons a.linkedin:hover,div.social-sharing-buttons a.linkedin:active {
	background-color: #006288;
}
/*------------------------------------*\
    CONTACT LANDING — body.contact (V3 form + channel cards, PAGE-SCOPED)
\*------------------------------------*/
/* The V3 contact page's form + channel-card vocabulary. Genuinely PAGE-SCOPED under body.contact
   (CSS-10): exercised on exactly ONE page, so the selectors are prefixed body.contact rather than left
   as bare global-matching classes — these are generic names (.field/.form-grid/.cmethod) that would
   otherwise collide with any future form. Promote to the GLOBAL landing block only if a second V3 form
   appears. These are the ONLY new selectors the whole 10-page landing type required beyond the birdhouses
   vocabulary pass (the contact form was the flagged exception). The body.contact .field rules (0,2,1)
   out-rank the legacy bare input/textarea/button theme rules in the CONTACT section below (0,0,1), so the
   V3 form wins on the contact page without touching the legacy w3 form styling used by account/checkout/
   calendar forms. The markup keeps the w3 form field-name contract (name="w3form_fName/lName/email/topic/
   message") so it drops into the existing generic submitted() handler — see contact.php. */
body.contact .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
body.contact .field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
body.contact .field.full {
	grid-column: 1 / -1;
}
body.contact .field label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
body.contact .field label .req {
	color: var(--clay);
}
body.contact .field input,
body.contact .field select,
body.contact .field textarea {
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 15px;
	color: var(--ink);
	cursor: auto;
	transition: border-color 0.2s;
}
body.contact .field input:focus,
body.contact .field select:focus,
body.contact .field textarea:focus {
	outline: none;
	border-color: var(--ink);
}
body.contact .field textarea {
	min-height: 150px;
	resize: vertical;
}
body.contact .field select {
	cursor: pointer;
}
body.contact .field small {
	font-size: 12.5px;
	color: var(--stone);
}
/* the form's submit button clears the grid (design used an inline margin-top:22px) */
body.contact .form-grid + .btn {
	margin-top: 22px;
}
/* The CRM form (default theme widget: .form-container > form > .form-input) wears the same V3 look as
   .form-grid/.field: two columns for short text fields, full width for email, selects, text areas, reCAPTCHA and the button. */
body.contact .form-container {
	max-width: none;
	padding-top: 0;
	margin: 0;
}
body.contact .form-container form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
body.contact .form-container .form-input {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: auto;
	padding: 0;
}
body.contact .form-container .form-input:has(input[type=email]),
body.contact .form-container .form-input:has(select),
body.contact .form-container .form-input:has(textarea),
body.contact .form-container .form-input:has(.g-recaptcha),
body.contact .form-container .form-input:has(button),
body.contact .form-container .form-error-container {
	grid-column: 1 / -1;
}
body.contact .form-container label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
body.contact .form-container input,
body.contact .form-container select,
body.contact .form-container textarea {
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: var(--ink);
	cursor: auto;
	transition: border-color 0.2s;
}
body.contact .form-container input:focus,
body.contact .form-container select:focus,
body.contact .form-container textarea:focus {
	outline: none;
	border-color: var(--ink);
}
body.contact .form-container input.inputError,
body.contact .form-container select.inputError,
body.contact .form-container textarea.inputError {
	border-color: var(--clay);
}
body.contact .form-container input[type=checkbox],
body.contact .form-container input[type=radio] {
	width: auto;
}
body.contact .form-container textarea {
	height: auto;
	min-height: 150px;
	resize: vertical;
}
body.contact .form-container select {
	cursor: pointer;
}
body.contact .form-container button.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin: 6px 0 0;
	padding: 16px 32px;
	border: none;
	border-radius: 999px;
	background: var(--clay);
	color: var(--white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
	cursor: pointer;
	transition: all 0.25s var(--ease);
}
body.contact .form-container button.cta:hover {
	background: var(--clay-deep);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
}
body.contact .form-container .form-error-container {
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--clay);
	font-size: 13.5px;
	font-weight: 600;
}
body.contact .contact-methods {
	display: grid;
	gap: 14px;
	margin-top: 22px;
}
body.contact .cmethod {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 20px;
}
body.contact .cmethod svg {
	width: 20px;
	height: 20px;
	stroke: var(--clay);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	margin-top: 3px;
}
body.contact .cmethod b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
}
body.contact .cmethod p {
	font-size: 13.5px;
	color: var(--stone);
	margin-top: 3px;
	line-height: 1.5;
}
body.contact .cmethod a {
	color: var(--clay);
	font-weight: 600;
}
@media (max-width: 640px) {
	body.contact .form-grid,
	body.contact .form-container form {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------*\
    CONTACT — body.contact & Forms styling
\*------------------------------------*/
/*forms styling*/
section.contact p {
	max-width: 900px;
	margin: 0 auto
}
.form-container {
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 20px
}
div.form-input {
	display: inline-block;
	padding: 0 10px 10px 0;
	margin: 0;
	width: 50%
}
div.form-input:has(div.g-recaptcha),
div.form-input:has(textarea[name=w3form_name]),
div.form-input:has(textarea[name=w3form_websitesFormID]) {
	width: 100%
}
div.form-input:has(textarea[name=w3form_message]) {
	width: 100%;
}
label {
	display: block;
	text-align: left;
	color: #444;
	font-family: var(--font-text-strong), opensans-bold, serif
}
div.form-input div.g-recaptcha,
input,
textarea {
	display: inline-block;
	vertical-align: top
}
input,
textarea {
	font-family: var(--font-text-regular), opensans-regular, serif;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	font-size: 16px;
	line-height: 18px;
	cursor: pointer;
	color: #1f1f1f;
	border: 1px solid #ccc;
	box-shadow: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	border-radius: 4px;
	background-color: #fff;
	background-image: none
}
textarea {
	height: 144px
}
button {
	font-family: var(--font-text-strong), opensans-bold, serif;
	padding: 6px 12px;
	color: #fff;
	font-size: 18px;
	margin: 10px auto;
	background-color: #346fd4;
	border-radius: 3px;
	border: 0;
	cursor: pointer;
	transition: .25s
}
@media only screen and (max-width:640px) {
	div.form-input {
		width: 100%
	}
}
#fourZeroFour {
	background: rgba(250, 246, 239, 0.9);
}
#fourZeroFour h1 {
	font-family: var(--display), serif;
	color: var(--ink);
}
/*------------------------------------*\
    Legal - Terms of Use & Privacy Policy
\*------------------------------------*/
section#privacy-policy,section#terms-of-service{padding:50px 15px;background: rgba(250, 246, 239, 0.9);margin:auto}section#privacy-policy h1,section#terms-of-service h1{padding:10px;text-transform:uppercase;font-family: var(--display), serif;color: var(--ink);}section#privacy-policy h2,section#terms-of-service h2{font-family: var(--display), serif;color: var(--ink);}section#privacy-policy p,section#terms-of-service p{padding:10px}

/*------------------------------------*\
    FOOTER 
\*------------------------------------*/
.footer {
	background: var(--ink);
	color: rgba(250, 246, 239, 0.7);
	font-size: 14px;
	text-align: left;
}
.footer-main {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 65px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 76px 28px 56px;
}
.f-col-title {
	font-family: var(--sans), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 20px;
}
.footer a {
	text-decoration: none;
}
.f-brand .logo {
	gap: 10px;
}
.f-brand .logo img {
	height: 40px;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}
.f-brand .logo span {
	font-size: 18px;
	color: var(--paper);
}
.f-brand p {
	margin: 18px 0 22px;
	line-height: 1.7;
	max-width: 300px;
	color: rgba(250, 246, 239, 0.6);
}
.f-contact {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.f-contact a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: rgba(250, 246, 239, 0.85);
	transition: color 0.2s;
}
.f-contact a:hover {
	color: var(--white);
}
.f-contact svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--brass);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.f-col ul {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.f-col ul li {
	padding: 5px 0 10px 0px;
}
.f-col a {
	color: rgba(250, 246, 239, 0.62);
	transition: color 0.2s, padding-left 0.2s;
}
.f-col a:hover {
	color: var(--white);
	padding-left: 3px;
}
.f-hours {
	color: rgba(250, 246, 239, 0.62);
	line-height: 1.8;
}
.f-hours b {
	color: rgba(250, 246, 239, 0.9);
	font-weight: 600;
}
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 24px 28px;
	border-top: 1px solid rgba(250, 246, 239, 0.12);
}
.footer-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.footer-bottom p {
	font-size: 13px;
	color: rgba(250, 246, 239, 0.45);
	margin: 0;
}
.f-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}
.f-legal a {
	font-size: 13px;
	color: rgba(250, 246, 239, 0.55);
	transition: color 0.2s;
}
.f-legal a:hover {
	color: var(--white);
}
.pay {
	display: flex;
	gap: 8px;
}
.pay i {
	width: 48px;
	height: 30px;
	border-radius: 6px;
	background: rgba(250, 246, 239, 0.08);
	border: 1px solid rgba(250, 246, 239, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(250, 246, 239, 0.85);
}
.footer-bottom #w3 {
	color: rgba(250, 246, 239, 0.5);
}
@media (max-width: 920px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 38px;
	}
}
@media (max-width: 520px) {
	.footer-main {
		grid-template-columns: 1fr;
	}
	.footer-bottom {
		justify-content: center;
		text-align: center;
	}
	.footer-left {
		align-items: center;
	}
}
/* hours table styling below (preserved -- weekday-highlight JS target .hours-container) */
.hours-container table {
	text-align: left;
	margin:10px auto 10px 0;
	border-collapse:collapse;
}
footer .hours-container table {
	margin: 0 auto 0 0;
}
.hours-container td {
	padding: 4px;
}
.hours-container table tbody tr.selected {
	background-color: #fff;
	color: var(--ink);
	font-family: var(--font-text-regular), 'opensans-regular', serif;
}
.hours-container  table tbody tr td:nth-of-type(3n-2) {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 4px 8px;
}
.hours-container  table tbody tr td:nth-of-type(3n-1) {
	padding: 0 8px 0 0;
}
.hours-container  table tbody tr td:nth-of-type(3n) {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 0 8px 0 0;
}
/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
@font-face {
	font-family: 'opensans-italic';
	src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'opensans-regular';
	src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
		 url('fonts/opensans-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'opensans-bold';
	src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),
		 url('fonts/opensans-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'opensans-extrabold';
	src: url('fonts/opensans-extrabold-webfont.woff2') format('woff2'),
		 url('fonts/opensans-extrabold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/*------------------------------------*\
	RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:1400px) {

}
@media only screen and (max-width:1024px) {			/*foundation medium breakpoint*/
	h1 {font-size: 30px;line-height: 40px;}
	h2 {font-size: 26px;line-height: 30px;}
	section,
	 .std-padding {
		padding: 60px 20px;
	}
	.less-padding {
		padding: 30px 10px;
	}

}
@media only screen and (max-width:900px) {
	ul, ol {padding: 15px 0 15px 5px;}
	.f-brand .logo img {
		width: auto;
		height: auto;
	}
}
@media only screen and (max-width:640px) { 			/*foundation small breakpoint*/
	p {font-size: 16px;line-height: 24px;}
	h1 {font-size: 26px;line-height: 32px;}
	h2 {font-size: 22px;line-height: 26px;}
	h3 {font-size: 18px;line-height: 24px;}
	ul {padding: 15px 0 15px 0;}
	ol {padding: 15px 0 15px 20px;}
	section,
	 .std-padding {
		padding: 30px 10px;
	}
	.less-padding {
		padding: 10px 2.5px;
	}
	div.table,
	 div.table div.tableRow,
	 div.table div.tableRow div.tableHeader,
	 div.table div.tableRow div.tableCell {
		display:block;
		width:100%;
	}
	.cta {
		margin:6px 0;
	}
	footer {
		text-align:center;
	}
	footer table {
		margin:0 auto;
		text-align:center;
	}
}
@media only screen and (max-width:500px) {
	.footer-bottom p,
	 .f-brand p,
	 .f-col-title,
	 .f-col ul li  {
		text-align: center;
	}
	.f-col-title {
		display: block;
	}
	.f-brand p {
		max-width: fit-content;
	}
	.f-contact {
		align-items: center;
	}
	footer .hours-container table {
		margin: 0 auto;
	}
}
/*------------------------------------*\
	MISC
\*------------------------------------*/
::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
/*------------------------------------*\
	PRINT
\*------------------------------------*/
@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}

/* ============================================================
   SELF-HOSTED FONTS -- Fraunces (variable) + Inter, plowcraft 2026 redesign.
   Fetched from Google Fonts css2 and served same-origin (CSP font-src 'self').
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-i-300-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-i-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-r-300-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-r-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-r-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-r-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-r-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-r-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-r-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-r-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-r-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-r-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*------------------------------------*\
    ACCOUNT — body.account (2026 ecommerce restyle)
\*------------------------------------*/
/* account.php only, styled on top of the shared V3 baseline above (:is(...,body.account) —
   Fraunces headings, Inter body copy, paper background, left-aligned .content). This section
   only touches classes account.php actually renders: .account-page-container / .widget-* (My
   Orders + My Information accordion-style widgets), .account-container (login card + the
   post-checkout thank-you card, which borrows .checkout-content-container from the checkout
   page — scoped here to body.account so checkout.php is untouched), and the #w3form_login
   field/button styling. No PHP was edited; class names match the existing markup exactly.
   Sibling pages (account-register.php, account-verify.php, account-assistance.php) still use
   the legacy theme and were intentionally left alone this pass. */

body.account .content {
	padding: 56px 0 90px;
}

/* page title row: "My Account" + logout, or the "Log In" heading */
body.account .account-title-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 8px;
}
body.account .account-title-container h1 {
	font-size: 40px;
	line-height: 1.1;
	color: var(--ink);
}
body.account .account-title-container form {
	order: 2;
}
body.account .account-title-container button.logout {
	background: transparent;
	border: 1.5px solid #de350b; /* red outline: logout is a leave/danger action; same red as the site's error messages */
	border-radius: 999px;
	color: var(--ink-2);
	font-family: var(--sans), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 20px;
	margin: 0;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
body.account .account-title-container button.logout:hover {
	border-color: #de350b;
	color: #ad2102;
	background: #fdf2f2;
}

/* accordion-style widgets: My Orders / My Information, and each order within My Orders */
body.account .widget-container {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	margin: 0 0 24px;
	text-align: left;
	overflow: hidden;
	transition: box-shadow 0.25s var(--ease);
}
body.account .widget-container:hover {
	box-shadow: var(--sh-md);
}
body.account .widget-container .widget-title {
	display: table;
	width: 100%;
	cursor: pointer;
}
body.account .widget-container .widget-title .arrow-icon-container {
	display: table-cell;
	vertical-align: middle;
	width: 44px;
	text-align: center;
	padding: 6px 4px 6px 18px;
}
body.account .widget-container .widget-title .arrow-icon-container img {
	width: 14px;
	opacity: 0.55;
}
body.account .widget-container .widget-title .icon-container {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 10px 12px;
}
body.account .widget-container .widget-title .icon-container img {
	width: 26px !important;
	height: 26px !important;
}
body.account .widget-container .widget-title .title-container {
	display: table-cell;
	vertical-align: middle;
	padding: 18px 20px 18px 4px;
}
body.account .widget-container .widget-title .title-container h4 {
	display: inline-block;
	vertical-align: middle;
	font-family: var(--display), serif;
	font-size: 20px;
	font-variant: normal;
	font-weight: 560;
	line-height: 1.3;
	color: var(--ink);
	padding: 0;
	margin: 0;
	text-align: left;
}
body.account .widget-container .widget-title .price-container {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	padding: 0 24px 0 10px;
	white-space: nowrap;
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	color: var(--clay);
}
body.account .widget-container .widget-content {
	padding: 6px 24px 26px;
	border-top: 1px solid var(--line);
}
body.account .widget-container .widget-content p {
	color: var(--ink-2);
}

/* My Information: phone number row, its pencil button, and the inline edit form.
   The form stays hidden until the pencil is clicked (scripts-ecommerce.js toggles .active); jQuery's
   show() writes display:block inline, so .active uses !important to keep the flex row. */
body.account .widget-container .widget-content .phone-display-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
}
body.account .widget-container .widget-content .phone-edit-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	box-shadow: none;
	color: var(--clay);
	transition: border-color 0.2s, background 0.2s;
}
body.account .widget-container .widget-content .phone-edit-trigger:hover {
	border-color: var(--clay);
	background: var(--paper-2);
}
/* pencil: outline only — the theme's bare svg{fill:#000;width:25px} was filling it solid black */
body.account .widget-container .widget-content .phone-edit-trigger svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
}

/* saved-address remove button: same round icon button as the phone edit trigger.
   account.php inlines padding:3px on the button and width:auto on the img (which let the X render
   at its full native size), so those two need !important. */
body.account .widget-container .widget-content button[name="deactivatePersonsAddress"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	margin: 0 0 0 8px !important;
	vertical-align: middle;
	background: transparent;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
body.account .widget-container .widget-content button[name="deactivatePersonsAddress"]:hover {
	border-color: var(--clay);
	background: var(--paper-2);
}
body.account .widget-container .widget-content button[name="deactivatePersonsAddress"] img {
	width: 11px !important;
	height: 11px;
	display: block;
}
body.account .widget-container .widget-content .phone-edit-form {
	display: none;
	max-width: 420px;
	margin: 8px 0 0;
}
body.account .widget-container .widget-content .phone-edit-form.active {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
body.account .widget-container .widget-content .phone-edit-form input[type="tel"] {
	flex: 1 1 100%;
	box-sizing: border-box;
}
body.account .widget-container .widget-content .phone-edit-form .cta,
body.account .widget-container .widget-content .phone-edit-form .btn-cancel {
	margin: 0;
	padding: 12px 24px;
	border-radius: var(--r-sm);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	text-align: center;
}
body.account .widget-container .widget-content .phone-edit-form .cta {
	background: var(--clay);
	background-image: none;
	border: 1.5px solid var(--clay);
	color: var(--white);
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(154, 75, 51, 0.26);
}
body.account .widget-container .widget-content .phone-edit-form .cta:hover {
	background: var(--clay-deep);
	border-color: var(--clay-deep);
	color: var(--white);
	padding: 12px 24px;
	box-shadow: 0 10px 22px rgba(154, 75, 51, 0.32);
}
body.account .widget-container .widget-content .phone-edit-form .btn-cancel {
	background: transparent;
	border: 1.5px solid var(--line);
	color: var(--ink-2);
	font-weight: 600;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
body.account .widget-container .widget-content .phone-edit-form .btn-cancel:hover {
	border-color: var(--clay);
	color: var(--clay);
	background: var(--paper-2);
}

/* orders nested inside the "My Orders" widget */
body.account .widget-container .order-container.widget-container {
	background: var(--paper-2);
	border-color: var(--line);
	box-shadow: none;
	border-radius: var(--r-md);
	margin: 18px 0 0;
}
body.account .widget-container .order-container.widget-container:hover {
	box-shadow: none;
}
body.account .widget-container .order-container .widget-title .icon-container {
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
body.account .widget-container .order-container .widget-title .title-container {
	padding: 14px 20px 14px 4px;
}
body.account .widget-container .order-container .widget-content {
	background: var(--white);
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--r-md) var(--r-md);
	padding: 20px;
}

/* order line-item table */
body.account table.order {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans), sans-serif;
	font-size: 14px;
}
body.account table.order thead th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
	padding: 0 10px 10px 0;
	border-bottom: 1px solid var(--line);
}
body.account table.order tbody td {
	padding: 10px 10px 10px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	vertical-align: top;
}
body.account table.order tbody tr:last-child td {
	border-bottom: none;
}
body.account table.order tbody tr:nth-of-type(even) {
	background-color: transparent;
}
body.account table.order a {
	color: var(--ink);
	text-decoration-color: var(--line);
}
body.account table.order a:hover {
	color: var(--clay);
	text-decoration-color: var(--clay);
}
body.account .widget-content ul {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
}
body.account .widget-content ul li {
	background-image: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	color: var(--ink-2);
}
body.account .widget-content ul li:last-child {
	border-bottom: none;
}
body.account .widget-content h5 {
	font-family: var(--display), serif;
	font-variant: normal;
	font-size: 16px;
	color: var(--ink);
	padding-bottom: 4px;
}

/* login card + post-checkout thank-you card */
body.account .account-container {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
	padding: 20px;
	margin: 10px auto;
}
body.account .account-container p {
	color: var(--ink-2);
}
body.account .account-container.login {
	max-width: 440px;
	padding: 48px 36px;
	text-align: center;
}
body.account .account-container.login h1.decorated {
	margin-bottom: 28px;
}
body.account .account-container.login form {
	max-width: 320px;
	margin: 0 auto;
	text-align: left;
}
body.account .account-container.login .form-input {
	width: 100%;
	padding: 0 0 16px;
}
body.account .account-container.login .form-input label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	font-family: var(--sans), sans-serif;
	margin-bottom: 7px;
}
body.account .account-container.login .form-input input {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 15px;
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	cursor: auto;
	transition: border-color 0.2s;
}
body.account .account-container.login .form-input input:focus {
	outline: none;
	border-color: var(--ink);
}
body.account .account-container.login .form-input input.inputError {
	border-color: var(--clay);
}
body.account .account-container.login .form-input button.cta {
	width: 100%;
	display: block;
	background: var(--clay);
	background-image: none;
	border-radius: var(--r-sm);
	color: var(--white);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	padding: 14px 20px;
	margin: 6px 0 0;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
body.account .account-container.login .form-input button.cta:hover {
	background: var(--clay-deep);
	color: var(--white);
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
}
body.account .account-container.login .form-error-container {
	margin-top: 4px;
}
body.account .account-container.login .account-assistance-container {
	max-width: 320px;
	margin: 22px auto 0;
	padding: 0;
	font-size: 14px;
	color: var(--stone);
}
body.account .account-container.login .account-assistance-container p {
	color: var(--stone);
	padding: 4px 0;
}
body.account .account-container.login .account-assistance-container a {
	color: var(--ink);
	text-decoration-color: var(--line);
}
body.account .account-container.login .account-assistance-container a:hover {
	color: var(--clay);
	text-decoration-color: var(--clay);
}

/* thank-you card (borrows the checkout page's .checkout-content-container; scoped to body.account
   so checkout.php's own styling is untouched) */
body.account .account-container.thank-you {
	max-width: 900px;
	padding: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
}
/* the markup is h1 + a one-row table (content cell, logo cell); flatten the table so the heading and content stack in the
   left column and the logo panel spans the full height of the card on the right */
body.account .account-container.thank-you .table,
body.account .account-container.thank-you .tableRow {
	display: contents;
}
body.account .account-container.thank-you h1 {
	grid-column: 1;
	grid-row: 1;
	padding: 36px 32px 0;
	margin: 0;
	text-align: left;
}
body.account .account-container.thank-you .tableCell {
	grid-column: 1;
	grid-row: 2;
	display: block;
}
body.account .account-container.thank-you .checkout-content-container {
	padding: 24px 32px 44px;
	text-align: left;
}
body.account .account-container.thank-you .container-title {
	font-family: var(--display), serif;
	font-size: 22px;
	color: var(--ink);
	border-bottom: none;
	padding: 0 0 12px;
	margin: 0 0 6px;
}
body.account .account-container.thank-you .tableCell.logo {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--paper-2);
	padding: 24px;
}
body.account .account-container.thank-you .tableCell.logo img {
	max-width: 100%;
	height: auto;
}
@media only screen and (max-width: 640px) {
	body.account .account-container.thank-you {
		grid-template-columns: minmax(0, 1fr);
	}
	body.account .account-container.thank-you .tableCell.logo {
		grid-column: 1;
		grid-row: 3;
	}
}
body.account .account-container.thank-you .cta {
	background: var(--clay);
	padding: 12px 28px;/* the base .cta keeps 50px on the right for its arrow icon; this card removes the icon */
	border-color: transparent;
	border-radius: var(--r-sm);
	color: var(--white);
}
body.account .account-container.thank-you .cta:hover {
	background: var(--clay-deep);
	color: var(--white);
	border-color: transparent;
	box-shadow: 0 10px 22px rgba(154, 75, 51, 0.3);
}

@media only screen and (max-width: 640px) {
	body.account .account-title-container {
		flex-wrap: wrap;
	}
	body.account .account-title-container button.logout {
		order: 1;
	}
	body.account .account-title-container h1 {
		order: 0;
		font-size: 30px;
	}
	body.account .widget-container .widget-title .icon-container {
		display: none;
	}
	body.account .account-container.login {
		padding: 36px 22px;
	}
}

/*------------------------------------*\
    ACCOUNT — sibling pages: body.account-register / body.account-verify / body.account-assistance
\*------------------------------------*/
/* Styles account-register.php, account-verify.php, and account-assistance.php on top of the
   shared V3 baseline above (these three slugs were added to that :is() list alongside body.account).
   No PHP was edited; class/id names below match the existing markup on each page exactly. Where a
   pattern already exists from account.php's login card (bordered inputs, clay button, decorated
   heading underline) it's reused here via :is() rather than restated per page. */

/* shared alert banners: cookie warning + registration/verification success/error messages.
   Also picks up account.php's own .success/.error banners for consistency across the whole
   account-* family — the legacy .success/.error (green/red, hard corners) clashed with the new
   card language once account.php's own card styling shipped. Deliberately targets div.success/
   div.error/div.form-error-container (not the bare class) — checkout.php also uses
   <span class="error"> as a small INLINE badge next to an address (e.g. "(unverified)"), and
   turning that into a centered block card would break its layout; the div-tag restriction
   leaves those inline spans exactly as the legacy theme already renders them. */
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.success,
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.error,
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.form-error-container:not(:empty) {
	display: block;
	max-width: 1170px;
	margin: 0 auto 24px;
	padding: 16px 22px;
	border-radius: var(--r-md);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	/*background: var(--paper-2);*/
	/*border: 1px solid var(--line);*/
	color: #115e59;
	box-shadow: none;
	z-index: 10;
	background-color: #f0fdf4; /* Soft mint background */
  	border: 1px solid #bbf7d0; /* Light green border */
  	border-left: 4px solid #16a34a;
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.success {
	border-left: 4px solid var(--moss);
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.error,
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.form-error-container:not(:empty) {
	/*background: rgba(154, 75, 51, 0.07);*/
	border: 1px solid rgba(154, 75, 51, 0.28);
	/*border-left: 4px solid var(--clay);*/
	color: #ad2102;
	background-color: #fdf2f2;
    border: 1px solid #f5b0b0;
    border-left: 4px solid #de350b;
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.success a {
	color: #115e59;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #115e59;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.success a:hover {
	color: #16a34a;
	text-decoration-color: #16a34a;
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) div.error a {
	color: #9c1812;
	text-decoration: underline;
	text-decoration-color: #9c1812;
	font-weight: 700;
}

/* generic link color reset for these pages (theme base is var(--color-2) blue + bold-serif;
   the V3 baseline already flips the font, this flips the color to the earthy palette) */
:is(body.account-register, body.account-verify, body.account-assistance) .content a {
	color: var(--ink);
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) .content a.inline {
	color: var(--clay);
	text-decoration-color: rgba(154, 75, 51, 0.35);
}
:is(body.account, body.account-register, body.account-verify, body.account-assistance, body.cart, body.checkout, body.products) .content a.inline:hover {
	text-decoration-color: var(--clay);
}

body.account-register .content h1.decorated,
body.account-assistance .content h1.decorated {
	margin-bottom: 24px;
}
body.account-register .content h2.decorated {
	font-size: 20px;
	margin-bottom: 6px;
}

/* the plain "bare" .account-container used by account-register.php (inside its own .wrapper) and
   account-assistance.php (which has no .wrapper at all in its markup — the container supplies its
   own max-width/centering here so the page doesn't stretch edge-to-edge) */
body.account-register .account-container,
body.account-assistance .account-container {
	max-width: 860px;
	padding: 44px 40px;
}
body.account-assistance .content {
	padding: 60px 20px 90px;
}
body.account-assistance .account-container {
	margin: 0 auto;
}

/* account-verify.php: the whole page is just the banner above, so center it in the content area */
body.account-verify .content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46vh;
	padding: 60px 20px;
}
body.account-verify .success,
body.account-verify .error {
	margin: 0;
}

/* registration form */
body.account-register .register-container {
	padding-top: 4px;
}
body.account-register .register-container > p {
	color: var(--ink-2);
}
body.account-register .terms-container {
	background: var(--paper-2);
	border-radius: var(--r-md);
	padding: 22px 24px;
	margin: 0 0 20px;
	text-align: left;
}
body.account-register .terms-container p {
	color: var(--ink-2);
	padding: 0;
}
body.account-register .terms-container.password label {
	font-family: var(--display), serif;
	font-size: 17px;
	color: var(--ink);
}
body.account-register .terms-container.password p {
	margin-top: 6px;
}
body.account-register .content form > label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--sans), sans-serif;
	font-size: 14px;
	color: var(--ink-2);
	margin: 6px 0 20px;
	text-align: left;
}
:is(body.account-register, body.account-assistance) .content input[type="checkbox"] {
	accent-color: var(--clay);
	width: 17px;
	height: 17px;
	margin-top: 2px;
}

/* password-requirement style lists (register's password box + assistance's reset form), matching
   the small brass-dot bullet used by .prose ul.plain elsewhere on the site. Scoped to .content
   (not just the body slug) so this never touches the header/subnav <ul><li> markup, which lives
   outside .content but still inside the same <body> — a bare "body.account-register ul li" rule
   here was exactly the leak that put bullet dots in the main nav. */
:is(body.account-register, body.account-assistance) .content ul li {
	background-image: none;
	position: relative;
	padding: 4px 0 4px 18px;
	font-size: 14px;
	line-height: 20px;
	color: var(--stone);
}
:is(body.account-register, body.account-assistance) .content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brass);
}

/* form fields shared between the register grid (.form-input) and the assistance forms
   (.form-input on the email step, .fieldGroup on the password-reset step). The generic theme
   rule (div.form-input{width:50%}) is written for .form-input sitting directly in a form, but
   account-register.php nests each .form-input inside a .tableCell that is ALREADY 50% wide
   (small-12 medium-6) — without this override the two rules compound (50% of 50%) and the
   inputs render at roughly a quarter of the column's width. Forcing 100% here lets the
   .tableCell/.small-12/.medium-6 grid be the only thing controlling column width. */
:is(body.account-register, body.account-assistance) .content .form-input,
body.account-assistance .content .fieldGroup {
	width: 100%;
	padding: 0 12px 18px 0;
	text-align: left;
}
:is(body.account-register, body.account-assistance) .content .form-input label,
body.account-assistance .content .fieldGroup label {
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin-bottom: 7px;
}
:is(body.account-register, body.account-assistance) .content .form-input input,
body.account-assistance .content .fieldGroup input {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 15px;
	font-family: var(--sans), sans-serif;
	color: var(--ink);
	cursor: auto;
	transition: border-color 0.2s;
}
:is(body.account-register, body.account-assistance) .content .form-input input:focus,
body.account-assistance .content .fieldGroup input:focus {
	outline: none;
	border-color: var(--ink);
}
:is(body.account-register, body.account-assistance) .content .form-input input.inputError,
body.account-assistance .content .fieldGroup input.inputError {
	border-color: var(--clay);
}
body.account-assistance .content h5 {
	font-family: var(--display), serif;
	font-variant: normal;
	font-size: 19px;
	color: var(--ink);
	padding-bottom: 8px;
}
body.account-assistance .content .bold {
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	color: var(--ink);
}
body.account-assistance .content p {
	color: var(--ink-2);
}

/* buttons: reuse the login card's clay button treatment for the register/assistance CTAs
   (these sit directly in the form, not wrapped in .form-input like the login button) */
:is(body.account-register, body.account-assistance) .content .cta {
	display: inline-block;
	background: var(--clay);
	background-image: none;
	border-radius: var(--r-sm);
	color: var(--white);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	padding: 14px 30px;
	margin: 8px 0;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
:is(body.account-register, body.account-assistance) .content .cta:hover {
	background: var(--clay-deep);
	color: var(--white);
	border-color: transparent;
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
}
:is(body.account-register, body.account-assistance) .content .cta:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

@media only screen and (max-width: 640px) {
	body.account-register .account-container,
	body.account-assistance .account-container {
		padding: 30px 22px;
	}
	body.account-assistance .content {
		padding: 40px 16px 60px;
	}
	:is(body.account-register, body.account-assistance) .content h1 {
		font-size: 28px;
		line-height: 1.15;
	}
	:is(body.account-register, body.account-assistance) .content .form-input,
	body.account-assistance .content .fieldGroup {
		padding: 0 0 16px;
	}
	body.account-register .terms-container {
		padding: 18px;
	}
	:is(body.account-register, body.account-assistance) .content .cta {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/*------------------------------------*\
    CART — body.cart
\*------------------------------------*/
/* Styles cart.php on top of the shared V3 baseline above (body.cart is now in that :is() list).
   No PHP was edited; class names below match the existing markup exactly. Everything is scoped
   under .cart-container / .prodQuestions-container (never bare "body.cart <tag>") so nothing can
   reach the header/footer chrome that also lives inside <body>. */

body.cart .content {
	padding: 56px 0 20px;
}
body.cart .cart-container {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	padding: 40px;
}
body.cart .cart-container h1 {
	font-size: 36px;
	color: var(--ink);
	margin-bottom: 8px;
	text-align: center;
}

/* one line item */
body.cart .cart-container .cart-product-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}
body.cart .cart-container .cart-product-container:first-of-type {
	border-top: 1px solid var(--line);
	margin-top: 24px;
}
body.cart .cart-container .cart-product-block.img {
	width: 88px;
	flex: none;
}
body.cart .cart-container .cart-product-block.img img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: var(--paper-2);
	border: 1px solid var(--line);
}
body.cart .cart-container .cart-product-block.item-info {
	flex: 1 1 220px;
	text-align: left;
}
body.cart .cart-container .prodName-container a {
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-decoration-color: var(--line);
}
body.cart .cart-container .prodName-container a:hover {
	color: var(--clay);
	text-decoration-color: var(--clay);
}
body.cart .cart-container .prodName-container ul {
	padding: 4px 0 0;
	margin: 0;
}
body.cart .cart-container .prodName-container ul li {
	background-image: none;
	display: inline-block;
	padding: 0 10px 0 0;
	font-size: 13px;
	color: var(--stone);
}
body.cart .cart-container .prodName-container ul li:not(:last-child)::after {
	content: "•";
	padding-left: 10px;
	color: var(--line);
}
body.cart .cart-container button.removeProductFromCart {
	background: transparent;
	border: none;
	color: var(--stone);
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	text-decoration: underline;
	text-decoration-color: transparent;
	padding: 6px 0 0;
	margin: 0;
	box-shadow: none;
}
body.cart .cart-container button.removeProductFromCart:hover {
	color: var(--clay);
	text-decoration-color: var(--clay);
}
body.cart .cart-container .cart-product-block.qty {
	flex: none;
	text-align: center;
	/* this block carries the class "qty", so cancel the PDP stepper pill (.qty: border/radius/padding) */
	display: block;
	border: none;
	border-radius: 0;
	background: none;
	padding: 0;
}
body.cart .cart-container .cart-product-block.qty form {
	display: flex;
	align-items: center;
	gap: 0;
}
body.cart .cart-container .qty-action-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 36px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 16px;
	cursor: pointer;
	user-select: none;
}
/* cart.php puts inline margin-right/left:-4px + margin-bottom:-4px on the -/+ spans, which overlap
   the input and drop them ~2px off-row. Only !important can beat inline styles from the stylesheet. */
body.cart .cart-container .qty-action-container.minus,
body.cart .cart-container .qty-action-container.plus {
	margin: 0 !important;
}
body.cart .cart-container .qty-action-container.minus {
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}
body.cart .cart-container .qty-action-container.plus {
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
body.cart .cart-container .cart-product-block.qty label {
	display: flex;      /* flex (not inline-block) so no line-box/baseline space nudges the input off-row */
	margin: 0;
}
body.cart .cart-container .qty-action-container,
body.cart .cart-container .cart-product-block.qty input[type="text"] {
	box-sizing: border-box;
	height: 36px;
	line-height: 34px;
}
body.cart .cart-container .cart-product-block.qty input[type="text"] {
	width: 44px;
	height: 36px;
	border: 1px solid var(--line);
	border-left: none;
	border-right: none;
	border-radius: 0;
	text-align: center;
	display: block;
	padding: 0 4px;
	margin: 0;
	box-shadow: none;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	font-weight: 600;
}
body.cart .cart-container .cart-product-block.qty button[name="updateCartProductQty"] {
	margin-left: 10px;
	background: transparent;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink-2);
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	width: auto;          /* cancel the PDP .qty button 38x44 circle */
	height: 36px;         /* match the stepper height */
	padding: 0 16px;
	margin-top: 0;
	margin-bottom: 0;
	box-shadow: none;
}
body.cart .cart-container .cart-product-block.qty button[name="updateCartProductQty"]:hover {
	background: transparent;
	border-color: var(--clay);
	color: var(--clay);
}
body.cart .cart-container .cart-product-block.price {
	flex: none;
	margin-left: auto;
	text-align: right;
}
body.cart .cart-container .prodPrice-container {
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--ink);
}

/* subtotal + checkout button */
body.cart .cart-container .cart-subtotal-container {
	margin-top: 10px;
	padding-top: 24px;
}
body.cart .cart-container .cart-subtotal-container > .table > .tableRow > .tableCell:first-child p {
	color: var(--stone);
	font-size: 14px;
	margin: 0;
	text-align: left;
}
body.cart .cart-container .cart-subtotal-container > .table > .tableRow > .tableCell:first-child {
	text-align: left;
}
body.cart .cart-container .subtotal-container {
	text-align: right;
}
body.cart .cart-container .sub-total {
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	color: var(--ink-2);
}
body.cart .cart-container .sub-total-total-amount {
	font-family: var(--display), serif;
	font-size: 26px;
	color: var(--ink);
	margin-left: 6px;
}
body.cart .cart-container #checkout-button {
	display: inline-block;
	margin-top: 16px;
	background: var(--clay);
	color: var(--white);
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: var(--r-sm);
	padding: 14px 30px;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
body.cart .cart-container #checkout-button:hover {
	background: var(--clay-deep);
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
}

/* empty-cart state */
body.cart .cart-container p.center {
	padding: 30px 10px;
	color: var(--ink-2);
	font-size: 16px;
}

/* "questions about your order" band */
body.cart .prodQuestions-container {
	max-width: var(--wrap);
	margin: 40px auto 0;
	padding: 0 0 60px;
	text-align: center;
}
body.cart .prodQuestions-container .med-title {
	display: block;
	border-bottom: none;
	text-transform: none;
	font-family: var(--display), serif;
	font-size: 24px;
	color: var(--ink);
	margin: 0 0 8px;
	padding: 0;
	text-align: center;
}
body.cart .prodQuestions-container .answer {
	color: var(--ink-2);
	font-size: 16px;
}
body.cart .prodQuestions-container .cta {
	margin-top: 8px;
}

@media only screen and (max-width: 640px) {
	body.cart .cart-container {
		padding: 26px 18px;
	}
	body.cart .cart-container .cart-product-container {
		position: relative;
		padding-right: 0;
	}
	body.cart .cart-container .cart-product-block.price {
		margin-left: 0;
		width: 100%;
		text-align: left;
		order: 4;
	}
	body.cart .cart-container .cart-product-block.qty {
		order: 3;
	}
}

/*------------------------------------*\
    CHECKOUT — body.checkout
\*------------------------------------*/
/* Styles checkout.php on top of the shared V3 baseline (body.checkout is in that :is() list).
   No PHP was edited. checkout.php has its own inline <style> block (legacy blue/grey card
   styling for div.card/.card-heading/.card-content/.hr-container and a couple of body.checkout
   rules) sitting mid-document — since that can't be removed without editing PHP, every rule below
   is deliberately written as ".checkout-container ..." (at minimum) so it is MORE specific than
   the inline block's bare "div.card"/"body.checkout .foo .bar" selectors and wins the cascade
   regardless of source order. Everything is also scoped under .checkout-container so nothing
   reaches the header/footer chrome. */

body.checkout .content {
	padding: 56px 0 20px;
}
body.checkout .checkout-container {
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}
body.checkout .checkout-container h1 {
	font-size: 36px;
	color: var(--ink);
	margin-bottom: 28px;
}

/* each numbered step ("1. Get Started", "2. Coupon Code", etc.) */
body.checkout .checkout-container .checkout-content-container {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	padding: 30px 32px;
	margin: 0 0 22px;
}
/* a finished step (class added in checkout.php) gets a green border and is toned down so the open step stands out */
body.checkout .checkout-container .checkout-content-container.card-complete {
	border: 2px solid #03ab03;
	box-shadow: none;
	opacity: 0.8;
}
body.checkout .checkout-container .checkout-content-container img.card-icon {
	position: absolute;
	top: 30px;
	right: 32px;
	width: 34px !important;
	height: 34px !important;
	opacity: 0.55;
}
body.checkout .checkout-container .container-title {
	font-family: var(--display), serif;
	font-size: 20px;
	font-weight: 560;
	color: var(--ink);
	border-bottom: none;
	padding: 0 60px 0 0;
	margin: 0 0 16px;
	text-transform: none;
	display: block;
}
body.checkout .checkout-container .container-title .required {
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--clay);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- override the inline <style> block's legacy div.card/.card-heading/.card-content/
   .hr-container (see note above on why every selector here starts with .checkout-container) --- */
body.checkout .checkout-container div.card {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-align: left;
	margin: 14px 0;
}
body.checkout .checkout-container div.card div.card-heading {
	background: transparent;
	color: var(--ink);
	font-family: var(--display), serif;
	font-size: 17px;
	text-align: left;
	padding: 16px 18px 0;
}
body.checkout .checkout-container div.card div.card-content {
	background: transparent;
	padding: 14px 18px 18px;
}
body.checkout .checkout-container .login-or-guest-card div.card div.card-content {
	text-align: left;
}
body.checkout .checkout-container div.hr-container {
	height: 34px;
	margin: 6px auto;
}
body.checkout .checkout-container div.hr-container hr {
	top: 17px;
	border: none;
	border-top: 1px solid var(--line);
}
body.checkout .checkout-container div.hr-container span {
	top: 7px;
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--stone);
	font-family: var(--sans), sans-serif;
	font-size: 13px;
	font-weight: 700;
}

/* form fields reused across the guest/address/card forms (same visual language as the account
   pages' .form-input, plus the address form's own .form-input-container variant) */
body.checkout .checkout-container .form-input,
body.checkout .checkout-container .form-input-container {
	width: 100%;
	padding: 0 0 16px;
	text-align: left;
}
body.checkout .checkout-container .form-input label,
body.checkout .checkout-container .form-input-container label {
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2);
}
body.checkout .checkout-container .form-input input,
body.checkout .checkout-container .form-input-container input,
body.checkout .checkout-container .form-input-container select,
body.checkout .checkout-container #tokenizerForm-container input {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	font-size: 15px;
	font-family: var(--sans), sans-serif;
	color: var(--ink);
	cursor: auto;
	margin-top: 6px;
	transition: border-color 0.2s;
}
body.checkout .checkout-container .form-input input:focus,
body.checkout .checkout-container .form-input-container input:focus,
body.checkout .checkout-container .form-input-container select:focus {
	outline: none;
	border-color: var(--ink);
}
body.checkout .checkout-container input[type="checkbox"] {
	accent-color: var(--clay);
}

/* coupon */
body.checkout .checkout-container .coupon-text {
	color: var(--ink-2);
	font-size: 14.5px;
}
body.checkout .checkout-container #coupon-code {
	margin-left: 8px;
}

/* remove/x buttons (coupon remove, address remove, shipping remove, guest remove) */
body.checkout .checkout-container button.remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink-2);
	font-family: var(--sans), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	box-shadow: none;
}
body.checkout .checkout-container button.remove:hover {
	border-color: var(--clay);
	color: var(--clay);
}
body.checkout .checkout-container .remove-icon {
	width: 14px !important;
	height: 14px !important;
}

/* shipping address chooser */
body.checkout .checkout-container #chooseAddressContainer .address-container {
	display: inline-block;
	margin: 4px 6px 4px 0;
}
/* saved-address buttons: match the Local Pickup / "+ Add a new address" buttons beside them.
   checkout.php sets inline padding:6px 10px; margin:2px 0 on these, so padding needs !important. */
body.checkout .checkout-container #chooseAddressContainer button[name="shippingAddress"] {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 18px !important;
	margin: 0 !important;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
body.checkout .checkout-container #chooseAddressContainer button[name="shippingAddress"]:hover {
	border-color: var(--ink);
	color: var(--ink);
}
body.checkout .checkout-container #chooseAddressContainer button[name="shippingAddress"] strong {
	font-weight: 600;
	color: var(--stone);
}
body.checkout .checkout-container #addNewAddressButton.button {
	display: inline-block;
	margin: 10px 0;
	padding: 10px 18px;
	border: 1.5px dashed var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-family: var(--sans), sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
body.checkout .checkout-container #addNewAddressButton.button:hover {
	border-color: var(--clay);
	color: var(--clay);
}
body.checkout .checkout-container #address-input-container {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.checkout .checkout-container #address-input-container.open {
	max-height: 1000px;
	opacity: 1;
	visibility: visible;
	transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0s;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
/* City / State / Zip row: the State cell has no label text, so the default middle-aligned table
   cells floated its select up between the labelled fields. Bottom-align the cells and give the
   inputs and selects one height so the three boxes share a baseline. */
body.checkout .checkout-container #address-input-container .tableCell {
	vertical-align: bottom;
}
body.checkout .checkout-container #address-input-container .form-input-container input:not([type="checkbox"]),
body.checkout .checkout-container #address-input-container .form-input-container select {
	box-sizing: border-box;
	height: 46px;
}
body.checkout .checkout-container #address-input-container h5 {
	font-family: var(--display), serif;
	font-variant: normal;
	font-size: 18px;
	color: var(--ink);
	padding-bottom: 10px;
}
body.checkout .checkout-container #checkCustomerShippingAddress {
	background: var(--clay);
	color: var(--white);
	border: none;
	border-radius: var(--r-sm);
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	padding: 12px 26px;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
body.checkout .checkout-container #checkCustomerShippingAddress:hover {
	background: var(--clay-deep);
}
body.checkout .checkout-container .selected-address-container,
body.checkout .checkout-container .selected-shippingMethod-container {
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--paper-2);
	border-radius: var(--r-sm);
	font-size: 14.5px;
	color: var(--ink-2);
}
body.checkout .checkout-container .selected-address-container strong,
body.checkout .checkout-container .selected-shippingMethod-container strong {
	color: var(--ink);
}

/* shipping method buttons (local pickup / carrier options); the estimated carrier rates the customer picks from look the same, the one being charged gets a heavier border */
body.checkout .checkout-container button[name="shippingMethod"],
body.checkout .checkout-container button[name="shippingRateToken"] {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	box-shadow: none;
	margin: 4px 8px 4px 0;
}
body.checkout .checkout-container button[name="shippingMethod"]:hover,
body.checkout .checkout-container button[name="shippingRateToken"]:hover,
body.checkout .checkout-container button[name="shippingRateToken"].selected {
	border-color: var(--ink);
}
body.checkout .checkout-container button[name="shippingRateToken"].selected {
	border-width: 2px;
}

/* payment method */
body.checkout .checkout-container #paymentMethod-container label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 20px 10px 0;
	font-family: var(--sans), sans-serif;
	font-size: 15px;
	color: var(--ink-2);
}
body.checkout .checkout-container #personsPaymentMethods-container {
	border-left: 3px solid var(--line);
	padding-left: 16px;
	margin-top: 14px;
}
body.checkout .checkout-container #personsPaymentMethods-container h5 {
	font-family: var(--display), serif;
	font-variant: normal;
	font-size: 17px;
	color: var(--ink);
	padding-bottom: 10px;
}
body.checkout .checkout-container #personsPaymentMethods-container label {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	padding: 8px 0;
	font-family: var(--sans), sans-serif;
	text-align: left;
	color: var(--ink-2);
	cursor: pointer;
}
/* the generic checkout input rule stretches the radios full-width, which shoved the card icon
   and "Ending in" text to the far right and wrapped them; keep each radio at its natural size */
body.checkout .checkout-container #personsPaymentMethods-container input[type="radio"] {
	flex: none;
	width: auto;
	height: auto;
	margin: 0;
	accent-color: var(--clay);
}
body.checkout .checkout-container #personsPaymentMethods-container img {
	flex: none;
	max-width: 46px;
}
body.checkout .checkout-container #personsPaymentMethods-container span {
	white-space: nowrap;
}
body.checkout .checkout-container .register-creditCard-form .tableCell:first-child > img {
	width: 32px;
	vertical-align: middle;
}
body.checkout .checkout-container .register-creditCard-form h4 {
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	color: var(--ink);
	padding: 0 0 0 8px;
}
body.checkout .checkout-container #tokenframe {
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
}

/* order summary — reuses the same product-row language as cart.php */
body.checkout .checkout-container .order-card .cart-product-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
body.checkout .checkout-container .order-card .cart-product-block.img img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: var(--paper-2);
	border: 1px solid var(--line);
}
body.checkout .checkout-container .order-card .cart-product-block.item-info {
	flex: 1 1 200px;
	color: var(--ink);
	font-family: var(--sans), sans-serif;
	font-weight: 600;
	font-size: 15px;
}
body.checkout .checkout-container .order-card .prodName-container ul {
	padding: 4px 0 0;
	margin: 0;
}
body.checkout .checkout-container .order-card .prodName-container ul li {
	background-image: none;
	display: inline-block;
	padding: 0 10px 0 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--stone);
}
/* read-only quantity tag. The block carries the class "qty", so this also replaces the PDP stepper
   pill (.qty: white bg, border, 999px radius, padding) it would otherwise inherit. checkout.php only
   prints the bare number, so the "Qty" label is added with ::before. */
body.checkout .checkout-container .order-card .cart-product-block.qty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 5px 12px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: var(--sans), sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
}
body.checkout .checkout-container .order-card .cart-product-block.qty::before {
	content: "Qty";
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}
body.checkout .checkout-container .order-card .prodPrice-container {
	margin-left: auto;
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	color: var(--ink);
}

/* totals */
body.checkout .checkout-container .totals-container {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
body.checkout .checkout-container .total-container {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-family: var(--sans), sans-serif;
	color: var(--ink-2);
}
body.checkout .checkout-container .total-container .description {
	font-weight: 500;
}
body.checkout .checkout-container .total-container .number {
	font-weight: 600;
	color: var(--ink);
}
body.checkout .checkout-container .total-container.total {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 19px;
}
body.checkout .checkout-container .total-container.total .description,
body.checkout .checkout-container .total-container.total .number {
	font-family: var(--display), serif;
	font-weight: 600;
	color: var(--ink);
}

/* agree checkbox + notes + place order */
body.checkout .checkout-container #order-form-container label {
	font-size: 14.5px;
	color: var(--ink-2);
}
body.checkout .checkout-container .cart-notes-container {
	margin-top: 10px;
}
body.checkout .checkout-container .cart-notes-container textarea {
	width: 100%;
	min-height: 90px;
	border: 1.5px solid var(--line);
	background: var(--white);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	font-family: var(--sans), sans-serif;
	font-size: 14.5px;
	color: var(--ink);
	resize: vertical;
	margin-top: 6px;
}
body.checkout .checkout-container #placeOrderButton.cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 18px;
	padding: 16px 20px;
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* checkout notes list at the bottom of the page */
body.checkout .checkout-container > ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}
body.checkout .checkout-container > ul li {
	background-image: none;
	position: relative;
	padding: 6px 0 6px 18px;
	font-size: 14px;
	line-height: 21px;
	color: var(--ink-2);
}
body.checkout .checkout-container > ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brass);
}

@media only screen and (max-width: 640px) {
	body.checkout .checkout-container .checkout-content-container {
		padding: 24px 20px;
	}
	body.checkout .checkout-container .checkout-content-container img.card-icon {
		display: none;
	}
	body.checkout .checkout-container .container-title {
		padding-right: 0;
	}
}

/* shared clay "primary action" treatment for .cta on both the cart and checkout pages (mirrors
   the account pages' login button) */
:is(body.cart, body.checkout) .content .cta {
	background: var(--clay);
	background-image: none;
	border: none;
	border-radius: var(--r-sm);
	color: var(--white);
	font-family: var(--sans), sans-serif;
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(154, 75, 51, 0.3);
}
:is(body.cart, body.checkout) .content .cta:hover {
	background: var(--clay-deep);
	color: var(--white);
	border-color: transparent;
	box-shadow: 0 14px 30px rgba(154, 75, 51, 0.36);
}