/* ============================================================
   Product detail — "teal" B2B layout (ref: pack product page).
   Loaded only on singular products, after header.css.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
body.single-product .site-main { padding-top: 0; }
/* The archive hero is full-bleed, so it must start at the header edge. */
body.tax-catalog .site-main { padding-top: 0; }
.catalog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 14px 0;
	font-size: 13px;
	color: var(--muted);
}
.catalog-breadcrumb a { color: var(--muted); }
.catalog-breadcrumb a:hover { color: var(--link); }
.catalog-breadcrumb .sep { color: #D8D0C7; }
.catalog-breadcrumb .current {
	color: var(--nav);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60ch;
}

/* ---------- Detail shell ---------- */
/* Client palette for this page: warm-black titles on a cream wash, warm grey copy. */
.product-detail {
	--ps-heading: #1A1512;      /* titles, highlight values, list bullets */
	--ps-text: #4F463B;         /* body copy */
	--ps-label: #8C7F70;        /* small uppercase labels */
	--ps-wash: #F5E0C8;
	--ps-wash-line: #E7D8BE;

	/* Key specs table */
	--ps-line: #E7DFD5;
	--ps-label-bg: #F8F3EC;
	--ps-label-text: #4F463B;

	padding: 32px 24px 20px;
}
body.single-product { background: #FDFBF8; }
.product-detail .product-section-title,
.product-detail .widget-title { color: var(--ps-heading); }
.product-detail .latest-product-text,
.product-detail .product-title a,
.product-detail .product-content2 { color: var(--ps-text); }

/* Top: gallery + summary */
.product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.product-gallery { position: sticky; top: 96px; }
.gallery-main {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.product-thumb-placeholder {
	padding: 24px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
}
.gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.gallery-thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: var(--link); }
.gallery-thumb.active { border-color: var(--link); box-shadow: 0 0 0 2px rgba(201, 114, 34, .18); }

/* Summary */
.product-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 28px;
}
.product-detail-title {
	font-family: var(--font-title);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ps-heading);
	margin: 0 0 14px;
}
.product-short-desc {
	color: var(--ps-text);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 20px;
}

.product-highlights {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	background: var(--ps-wash);
	border: 1px solid var(--ps-wash-line);
	border-radius: 12px;
}
.highlight {
	padding: 14px 8px;
	text-align: center;
	border-left: 1px solid var(--ps-wash-line);
}
.highlight:first-child { border-left: 0; }
.highlight-value {
	display: block;
	font-family: var(--font-title);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ps-heading);
}
.highlight-label {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ps-label);
}

/* Trust strip — full-width card under gallery + summary */
.product-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 32px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 22px rgba(26, 21, 18, .05);
}
.trust-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	border-left: 1px solid #F5EFE6;
}
.trust-card:first-child { border-left: 0; }
.trust-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #F5E0C8;
	color: #1A1512;
}
.trust-icon svg { width: 20px; height: 20px; }
.trust-text { min-width: 0; }
.trust-title {
	display: block;
	font-family: var(--font-title);
	font-size: 14px;
	font-weight: 800;
	color: var(--ps-heading);
}
.trust-desc {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ps-text);
}

/* Quote form — sits on the summary card, like the reference */
.product-quote-form {
	margin-top: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.product-quote-title {
	margin: 0 0 16px;
	font-family: var(--font-title);
	font-size: 19px;
	font-weight: 800;
	color: var(--ps-heading);
}
.product-quote-form .forminator-custom-form,
.product-quote-form .forminator-response-message { width: 100%; }
/* The submit button's brown lives in main.css (shared with the footer CTA form). */
.product-quote-form .forminator-text-area input,
.product-quote-form .forminator-email input,
.product-quote-form .forminator-name input,
.product-quote-form .forminator-phone input,
.product-quote-form textarea,
.product-quote-form select {
	border-radius: 10px !important;
	border-color: var(--line) !important;
}
.product-quote-form .forminator-ui input:focus,
.product-quote-form .forminator-ui textarea:focus,
.product-quote-form .forminator-ui select:focus {
	border-color: var(--link) !important;
	box-shadow: 0 0 0 3px rgba(201, 114, 34, .14) !important;
}

/* ---------- Layout: main + sidebar ---------- */
.catalog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	margin-top: 48px;
}
.catalog-main { min-width: 0; }

.section-title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
}
.product-section-title {
	margin: 0;
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 800;
	color: var(--nav);
	white-space: nowrap;
}
.product-section-title span { position: relative; }
.section-title-line { flex: 1; height: 1px; background: var(--line); }

/* Key specs table — tinted label column on warm hairlines, per client reference */
.product-keyspecs { margin-bottom: 40px; }
.keyspecs-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ps-line);
}
.keyspecs-table th,
.keyspecs-table td {
	padding: 10px 16px;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px solid var(--ps-line);
}
.keyspecs-table tr:last-child th,
.keyspecs-table tr:last-child td { border-bottom: 0; }
.keyspecs-table th {
	width: 20%;
	background: var(--ps-label-bg);
	color: var(--ps-label-text);
	font-weight: 700;
	border-right: 1px solid var(--ps-line);
}
.keyspecs-table td { color: var(--ps-text); }

/* Description prose */
.product-description { margin-bottom: 40px; }
.product-content2 { color: var(--body); font-size: 15px; line-height: 1.8; }
.product-content2 h2, .product-content2 h3 { font-family: var(--font-title); color: var(--nav); margin: 24px 0 12px; }
.product-content2 h2 { font-size: 20px; }
.product-detail .product-content2 h2 { color: var(--ps-heading); }
.product-content2 h3 { font-size: 18px; }
.product-content2 p { margin: 0 0 16px; }
.product-content2 img { border-radius: 12px; margin: 8px auto; }
.product-content2 .text-center { text-align: center; }
.product-content2 table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.product-content2 th, .product-content2 td { padding: 10px 14px; border: 1px solid var(--line); font-size: 14px; text-align: left; }
.product-content2 th { background: var(--surface); color: var(--nav); }

/* Related grid */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
/* Related products: three across, unlike the four-column archive grid. */
.product-related .product-grid { grid-template-columns: repeat(3, 1fr); }

.product-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.product-thumb { display: block; aspect-ratio: 1 / 1; background: var(--surface); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-body { padding: 12px 14px 16px; }
.product-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.product-title a { color: var(--nav); }
.product-title a:hover { color: var(--link); }
.product-excerpt { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--body); }

/* ---------- Sidebar widgets ---------- */
.catalog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.widget {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px;
}
.widget-title {
	margin: 0 0 16px;
	font-family: var(--font-title);
	font-size: 16px;
	font-weight: 800;
	color: var(--nav);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
/* Spec cards — dark dot list on hairlines, per the client reference */
.widget-spec-card { box-shadow: 0 6px 22px rgba(26, 21, 18, .05); }
.widget-spec-card .widget-title {
	margin: 0 0 6px;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 15px;
	color: var(--ps-heading);
}
.spec-card-list { list-style: none; margin: 0; padding: 0; }
.spec-card-list li {
	position: relative;
	padding: 10px 0 10px 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ps-text);
	border-top: 1px solid #EFE8DC;
}
.spec-card-list li:first-child { border-top: 0; }
.spec-card-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ps-heading);
}

.latest-products-list li + li { margin-top: 12px; }
.latest-product-item { display: flex; align-items: center; gap: 12px; }
.latest-product-thumb {
	width: 56px; height: 56px; flex-shrink: 0;
	border-radius: 10px; overflow: hidden; background: var(--surface);
}
.latest-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-product-text {
	font-size: 13px; color: var(--nav); line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.latest-product-item:hover .latest-product-text { color: var(--link); }

/* ---------- Category archive ---------- */
/* Hero sampled from the client reference: cream-to-sand wash, warm-black
   display type, burnt-orange primary button, image collage on the right. */
.cat-hero {
	--ch-ink: #1A1512;
	--ch-orange: #C97222;
	--ch-text: #665A4D;
	--ch-muted: #8C7F70;
	background: linear-gradient(115deg, #FDFBF8 0%, #F8F3EC 55%, #EFE4D3 100%);
	padding: 54px 0 58px;
	margin-bottom: 44px;
}
.cat-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 56px;
	align-items: center;
}
.cat-hero-crumb { padding: 0 0 18px; color: var(--ch-muted); }
.cat-hero-crumb a { color: var(--ch-muted); }
.cat-hero-crumb a:hover { color: var(--ch-ink); }
.cat-hero-crumb .sep { color: #D8D0C7; }
.cat-hero-crumb .current { color: var(--ch-muted); }
.cat-hero-title {
	margin: 0;
	font-family: var(--font-title);
	font-size: clamp( 34px, 4.4vw, 56px );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.5px;
	color: var(--ch-ink);
}
.cat-hero-sub { margin: 20px 0 0; font-size: 16px; line-height: 1.75; color: var(--ch-text); max-width: 52ch; }
.cat-hero-sub p { margin: 0 0 10px; }
.cat-hero-sub p:last-child { margin-bottom: 0; }

.cat-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	font-family: var(--font-title);
	font-size: 15px;
	font-weight: 700;
	border-radius: 999px;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cat-btn-primary { background: var(--ch-orange); color: #fff; box-shadow: 0 6px 16px rgba(201, 114, 34, .3); }
.cat-btn-primary:hover { color: #fff; background: #AD5D19; transform: translateY(-1px); }
.cat-btn-ghost { background: transparent; color: var(--ch-ink); border: 1.5px solid rgba(26, 21, 18, .35); }
.cat-btn-ghost:hover { color: var(--ch-ink); border-color: var(--ch-ink); }

.cat-hero-stats {
	list-style: none;
	margin: 36px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(26, 21, 18, .14);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.cat-stat-value {
	display: block;
	font-family: var(--font-title);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--ch-ink);
}
.cat-stat-label {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ch-muted);
}
.cat-hero-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.cat-hero-points li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--ch-text); }
.cat-hero-points li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--ch-ink);
	border-width: 0 2.2px 2.2px 0;
	transform: rotate(45deg);
}

.cat-hero-media { display: grid; gap: 18px; }
.cat-media {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(26, 21, 18, .08);
	aspect-ratio: 2 / 1;
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cat-media-row .cat-media { aspect-ratio: 1 / 1; }

/* Notes band — the buying guide and the FAQ sit in the same column but each get
   their own card, so the advice reads as two separate steps rather than one
   long block. The container only supplies the stacking gap. */
.cat-notes {
	--cn-ink: #1A1512;
	max-width: 1200px;
	margin: 40px auto 0;
	display: grid;
	gap: 24px;
}
.cat-guide,
.cat-faq {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding: 42px 48px;
	background: var(--surface);
	border-radius: 16px;
}
.cat-notes-rule { display: block; width: 40px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--accent); }
.cat-guide-title,
.cat-faq-title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 800;
	letter-spacing: -.4px;
	color: var(--cn-ink);
}
.cat-faq-title { font-size: 34px; line-height: 1.1; }
.cat-guide-title { font-size: 22px; line-height: 1.25; }
.cat-faq-sub { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.cat-guide-sub { font-size: 15px; line-height: 1.75; color: var(--body); }
.cat-guide-sub p { margin: 0; }
.cat-guide-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
}
.cat-guide-point {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	padding: 13px 0;
	border-top: 1px solid #E7DFD5;
}
.cat-guide-num {
	font-family: var(--font-title);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--accent);
}
.cat-guide-point-txt { font-size: 14px; line-height: 1.65; color: var(--cn-ink); }
.cat-faq-list { display: grid; gap: 12px; }
.cat-faq-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
}
.cat-faq-item summary {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	padding-right: 26px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-title);
	font-size: 15px;
	font-weight: 700;
	color: var(--cn-ink);
}
.cat-faq-item summary::-webkit-details-marker { display: none; }
.cat-faq-item summary::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	width: 9px;
	height: 9px;
	border: solid var(--cn-ink);
	border-width: 0 2px 2px 0;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
}
.cat-faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.cat-faq-item p { margin: 12px 0 0; padding-right: 22px; font-size: 14px; line-height: 1.75; color: var(--body); }
.cat-empty { font-size: 15px; color: var(--body); }

/* ---------- Category notes layout + sidebar ---------- */
/* Guide and FAQ move to the left column; the cream cards from the client
   reference (relate.JPG) sit alongside them. */
.cat-notes-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
	margin-top: 40px;
}
.cat-notes-layout .cat-notes {
	max-width: none;
	margin-top: 0;
}
.cat-side {
	display: grid;
	gap: 24px;
}
.cat-side-card {
	--side-ink: #1A1512;
	--side-link: #AD5D19;
	padding: 26px 26px 28px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--bg);
}
.cat-side-title {
	margin: 0 0 16px;
	font-family: var(--font-title);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.2px;
	color: var(--side-ink);
}
.cat-side-links {
	display: grid;
	gap: 12px;
}
.cat-side-links a {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--side-link);
	text-decoration: none;
}
.cat-side-links a:hover { color: var(--side-ink); text-decoration: underline; }
.cat-side-arrow { flex: 0 0 auto; }
.cat-side-specs {
	display: grid;
	gap: 13px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--body);
}
.cat-spec-label {
	font-weight: 600;
	color: var(--side-ink);
}

/* ---------- Products index page (page-products.php) ---------- */
/* Reuses every block above, so only the page chrome needs rules: the hero band
   has to run edge to edge against .site-main's 20px top padding, the two grids
   need air between them, and the "Browse By Style" button jumps to an anchor
   that sits under the sticky header. */
.prod-page .cat-hero { margin-top: -20px; }
.prod-page .prod-section { margin-bottom: 46px; scroll-margin-top: 88px; }
.prod-page .product-grid { margin-top: 24px; }
.prod-page .product-excerpt { margin-top: 6px; }

/* Pager — the same pill row the blog list uses, kept here because this page
   does not load blog.css. */
.prod-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.prod-pager a,
.prod-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-family: var(--font-title);
	font-size: 14px;
	font-weight: 800;
	color: var(--nav);
	text-decoration: none;
}
.prod-pager a:hover { border-color: var(--link); color: var(--link); }
.prod-pager .current { background: var(--surface); border-color: rgba(26, 21, 18, .18); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.product-top { grid-template-columns: 1fr; gap: 28px; }
	.product-gallery { position: static; }
	.catalog-layout { grid-template-columns: 1fr; gap: 32px; }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
	.product-related .product-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-card { padding: 20px 16px; gap: 10px; }
	.cat-hero { padding: 44px 0 46px; }
	.cat-hero-inner { grid-template-columns: 1fr; gap: 40px; }
	.cat-hero-media { max-width: 560px; }
	.cat-notes { gap: 20px; }
	.cat-guide,
	.cat-faq { grid-template-columns: 1fr; gap: 18px; padding: 28px 20px; border-radius: 12px; }
	.cat-faq-title { font-size: 28px; }
	.cat-notes-layout { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
	.cat-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.product-detail { padding: 22px 16px 12px; }
	.product-detail-title { font-size: 24px; }
	.product-summary { padding: 20px; border-radius: 18px; }
	.product-highlights { grid-template-columns: repeat(2, 1fr); }
	.highlight:nth-child(odd) { border-left: 0; }
	.highlight:nth-child(n+3) { border-top: 1px solid var(--ps-wash-line); }
	.product-trust { grid-template-columns: 1fr; }
	.keyspecs-table th { width: 36%; }
	.keyspecs-table th,
	.keyspecs-table td { padding: 9px 12px; font-size: 13px; }
	.trust-card { border-left: 0; }
	.trust-card + .trust-card { border-top: 1px solid #F5EFE6; }
	.cat-hero { padding: 36px 0 40px; margin-bottom: 32px; }
	.cat-side { grid-template-columns: 1fr; }
	.cat-hero-inner { grid-template-columns: 1fr; gap: 32px; }
	.cat-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
	.cat-hero-points { grid-template-columns: 1fr; }
	.cat-btn { height: 44px; padding: 0 20px; font-size: 14px; }
}