/*
 * Custom Puzzles site styles (Visual Design System v2, blue-led), 0.3.0.
 * Kadence owns the palette, fonts, buttons, header and footer through its own settings. This file lays out the page
 * sections and content components (bands, cards, steps, tables, specs, callouts, prose) with the tokens in tokens.css.
 * The creator, editor, forms and placeholders are styled by CustomPuzzle Core (same tokens). Everything is scoped to
 * cp- classes or to the pages that use them, so WooCommerce, checkout and admin screens are untouched.
 */

/* ================================================================ base */
body {
	color: var(--cp-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, .entry-title, .product_title, .page-title, .archive-title {
	font-family: var(--cp-font-display);
	letter-spacing: -0.015em;
	color: var(--cp-ink);
	text-wrap: balance;
}
h3, h4 {
	font-family: var(--cp-font-sans);
	color: var(--cp-ink);
	text-wrap: balance;
}
p, li { text-wrap: pretty; }
.cp-tnum, .price, .woocommerce-Price-amount, .cp-table td, .cp-table th { font-variant-numeric: tabular-nums; }
a { text-underline-offset: 0.15em; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cp-focus);
	outline-offset: 2px;
}
.site-footer :where(a, button):focus-visible { outline-color: var(--cp-focus-inverse); }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Buttons: Kadence sets the colours (palette 1 / 2); shape and weight follow the system. */
.button, button.button, .wp-block-button__link, .wp-element-button, .single_add_to_cart_button, .checkout-button {
	border-radius: var(--cp-radius-md);
	font-family: var(--cp-font-sans);
	font-weight: 600;
	min-height: var(--cp-tap-min);
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
/* Text link with an arrow: the secondary action in sections. */
.cp-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--cp-tap-min);
	color: var(--cp-brand);
	font-weight: 600;
	text-decoration: none;
}
.cp-arrow::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("icons/arrow-right.svg") center / contain no-repeat;
	mask: url("icons/arrow-right.svg") center / contain no-repeat;
	transition: transform 150ms ease-out;
}
.cp-arrow:hover { color: var(--cp-brand-strong); text-decoration: underline; }
.cp-arrow:hover::after { transform: translateX(3px); }
.cp-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cp-tap-min);
	padding: 10px 20px;
	border: 1px solid var(--cp-brand);
	border-radius: var(--cp-radius-md);
	color: var(--cp-brand);
	font-weight: 600;
	text-decoration: none;
	background: var(--cp-surface);
}
.cp-button-secondary:hover { background: var(--cp-brand-soft); color: var(--cp-brand-strong); }

/* ================================================================ header and announcement */
.site-branding .site-title { font-family: var(--cp-font-display); font-weight: 700; letter-spacing: -0.01em; }
.site-branding .custom-logo { max-height: 28px; width: auto; }
.site-top-header-wrap .header-html,
.site-top-header-wrap .header-html p { font-size: 14px; line-height: 20px; margin: 0; }
.header-navigation .menu > li > a { font-weight: 600; }

/* ================================================================ icon system: .cp-ico .cp-ico--name draws a leading icon */
.cp-ico { --cp-icon: url("icons/info.svg"); }
.cp-ico--truck { --cp-icon: url("icons/truck.svg"); }
.cp-ico--check, .cp-ico--circle-check { --cp-icon: url("icons/circle-check.svg"); }
.cp-ico--refresh { --cp-icon: url("icons/refresh-cw.svg"); }
.cp-ico--package, .cp-ico--tin, .cp-ico--premium-box, .cp-ico--picture-box, .cp-ico--kids-box { --cp-icon: url("icons/package.svg"); }
.cp-ico--puzzle { --cp-icon: url("icons/puzzle.svg"); }
.cp-ico--ruler { --cp-icon: url("icons/ruler.svg"); }
.cp-ico--frame { --cp-icon: url("icons/frame.svg"); }
.cp-ico--image { --cp-icon: url("icons/image.svg"); }
.cp-ico--images { --cp-icon: url("icons/images.svg"); }
.cp-ico--layers { --cp-icon: url("icons/layers.svg"); }
.cp-ico--sparkle { --cp-icon: url("icons/sparkles.svg"); }
.cp-ico--gift { --cp-icon: url("icons/gift.svg"); }
.cp-ico--info { --cp-icon: url("icons/info.svg"); }
.cp-ico--tag { --cp-icon: url("icons/tag.svg"); }
.cp-ico--calendar { --cp-icon: url("icons/calendar.svg"); }
.cp-ico--map-pin { --cp-icon: url("icons/map-pin.svg"); }
.cp-ico--pencil { --cp-icon: url("icons/pencil.svg"); }
.cp-ico--mail { --cp-icon: url("icons/mail.svg"); }
.cp-ico--help { --cp-icon: url("icons/help-circle.svg"); }
.cp-ico--building { --cp-icon: url("icons/building.svg"); }
.cp-ico--users { --cp-icon: url("icons/users.svg"); }
.cp-ico--heart { --cp-icon: url("icons/heart.svg"); }
.cp-ico--paw { --cp-icon: url("icons/paw-print.svg"); }
.cp-ico--clock { --cp-icon: url("icons/clock.svg"); }
.cp-ico--file { --cp-icon: url("icons/file-text.svg"); }
.cp-ico--lock { --cp-icon: url("icons/lock.svg"); }
.cp-ico--message { --cp-icon: url("icons/message-circle.svg"); }
.cp-ico--printer { --cp-icon: url("icons/printer.svg"); }
.cp-ico--type { --cp-icon: url("icons/type.svg"); }
.cp-ico--crop { --cp-icon: url("icons/crop.svg"); }
.cp-ico--upload { --cp-icon: url("icons/upload.svg"); }
.cp-ico--alert { --cp-icon: url("icons/triangle-alert.svg"); }
.cp-ico--grid { --cp-icon: url("icons/layout-grid.svg"); }
/* Inline lists of facts with a small icon. */
:is(.cp-format__facts, .cp-bandcard__facts, .cp-hero__facts, .cp-chipfacts) > .cp-ico::before,
.cp-format__pack.cp-ico::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--cp-brand);
	-webkit-mask: var(--cp-icon) center / contain no-repeat;
	mask: var(--cp-icon) center / contain no-repeat;
}

/* ================================================================ page bands and section heads */
.cp-band { padding: var(--cp-space-8) var(--cp-gutter); margin: 0; }
/* Kadence zeroes the side padding of .entry-content .alignfull; full-width bands keep the page gutter. */
body .cp-band.alignfull { padding-left: var(--cp-gutter); padding-right: var(--cp-gutter); }
.cp-band > *, .cp-band > .wp-block-group__inner-container > * { max-width: var(--cp-layout-max); margin-left: auto; margin-right: auto; }
.cp-band--sunken { background: var(--cp-surface-sunken); }
.cp-band--brand { background: linear-gradient(180deg, var(--cp-brand-soft) 0%, var(--cp-surface) 100%); }
.cp-band h2 {
	font-size: var(--cp-display-section-size);
	line-height: var(--cp-display-section-line);
	margin: 0 0 var(--cp-space-3);
}
.cp-band h3 { font-size: var(--cp-title-size); line-height: var(--cp-title-line); margin: 0 0 var(--cp-space-2); }
.cp-band p { max-width: var(--cp-layout-reading); margin: 0 0 var(--cp-space-4); }
.cp-lead { font-size: var(--cp-body-lg-size); line-height: var(--cp-body-lg-line); color: var(--cp-ink-muted); }
.cp-section-head { margin: 0 auto var(--cp-space-6) !important; }
.cp-section-head > :last-child { margin-bottom: 0; }
.cp-section-head--center { text-align: center; }
.cp-section-head--center p { margin-left: auto; margin-right: auto; }
.cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--cp-space-2) !important;
	color: var(--cp-brand);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
@media (min-width: 1025px) {
	.cp-band { padding: var(--cp-space-9) var(--cp-gutter-wide); }
	body .cp-band.alignfull { padding-left: var(--cp-gutter-wide); padding-right: var(--cp-gutter-wide); }
	.cp-band h2 { font-size: 34px; line-height: 40px; }
}

/* ================================================================ hero (A2) */
.cp-hero { padding-top: var(--cp-space-6); padding-bottom: var(--cp-space-7); background: linear-gradient(180deg, var(--cp-brand-soft) 0, var(--cp-surface) 420px); }
.cp-hero h1 {
	font-size: var(--cp-display-hero-size);
	line-height: var(--cp-display-hero-line);
	letter-spacing: -0.025em;
	margin: 0 0 var(--cp-space-3);
	max-width: 18ch;
}
.cp-hero .cp-lead { max-width: 60ch; margin: 0 0 var(--cp-space-4); }
.cp-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 var(--cp-space-5);
	padding: 0;
	list-style: none;
}
.cp-hero__facts > li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--cp-radius-pill);
	background: var(--cp-surface);
	box-shadow: inset 0 0 0 1px var(--cp-line);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}
@media (min-width: 1025px) {
	.cp-hero { padding-top: var(--cp-space-7); padding-bottom: var(--cp-space-8); }
	.cp-hero h1 { font-size: 56px; line-height: 60px; }
}

/* ================================================================ trust facts (A3, synced pattern) */
.cp-band:has(.cp-trust) { padding-top: var(--cp-space-5); padding-bottom: var(--cp-space-5); }
.cp-trust {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cp-space-4);
	max-width: var(--cp-layout-max) !important;
}
.cp-trust > li {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 12px;
	align-items: center;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
}
.cp-trust > li::before {
	content: "";
	grid-row: span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cp-surface);
	box-shadow: inset 0 0 0 1px var(--cp-line);
}
.cp-band--sunken .cp-trust > li::before { background: var(--cp-surface); }
.cp-trust > li { position: relative; }
.cp-trust > li::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--cp-brand);
	-webkit-mask: var(--cp-icon) center / contain no-repeat;
	mask: var(--cp-icon) center / contain no-repeat;
}
.cp-trust strong { display: block; font-size: 15px; font-weight: 700; color: var(--cp-ink); }
.cp-trust span { display: block; color: var(--cp-ink-muted); }
@media (min-width: 900px) {
	.cp-trust { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================ how it works (A6, synced pattern) */
.cp-steps {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	gap: var(--cp-space-4);
	counter-reset: cp-step;
	max-width: var(--cp-layout-max) !important;
}
.cp-step {
	position: relative;
	margin: 0;
	padding: var(--cp-space-5);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
}
.cp-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: var(--cp-space-3);
	border-radius: 50%;
	background: var(--cp-brand);
	color: var(--cp-on-brand);
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: 18px;
}
.cp-step h3 { margin: 0 0 var(--cp-space-2) !important; font-size: 19px; line-height: 25px; }
.cp-step p { margin: 0 !important; color: var(--cp-ink-muted); font-size: 15px; line-height: 23px; }
.cp-step__icon {
	position: absolute;
	top: var(--cp-space-5);
	right: var(--cp-space-5);
	width: 28px;
	height: 28px;
	background: var(--cp-line-strong);
	-webkit-mask: var(--cp-icon) center / contain no-repeat;
	mask: var(--cp-icon) center / contain no-repeat;
	opacity: 0.6;
}
@media (min-width: 768px) {
	.cp-steps { grid-template-columns: repeat(3, 1fr); gap: var(--cp-space-5); }
}

/* Kadence indents .single-content lists by 2em; component lists sit on the page grid instead. */
.single-content :is(.cp-trust, .cp-steps, .cp-formats, .cp-format__facts, .cp-collection-chips, .cp-tiles, .cp-numtiles, .cp-collection-facts, .cp-bandcards, .cp-bandcard__facts, .cp-quality, .cp-hero__facts, .cp-chipfacts, .cp-keyfacts, .cp-contactcards, .cp-occasions) {
	padding-left: 0;
}

/* ================================================================ puzzle cards (A4, [cp_formats]) */
.cp-formats {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cp-space-4);
	max-width: var(--cp-layout-max) !important;
}
@media (min-width: 600px) { .cp-formats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) {
	.cp-formats { grid-template-columns: repeat(4, 1fr); }
	.cp-formats:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.cp-format {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.cp-format:hover { border-color: var(--cp-line-strong); box-shadow: 0 10px 28px rgba(19, 27, 43, 0.08); }
.cp-format__media { display: block; background: var(--cp-stage); text-decoration: none; }
.cp-format__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cp-format__media .cp-ph { border-radius: 0; }
.cp-format__body { display: flex; flex-direction: column; flex: 1; gap: var(--cp-space-2); padding: var(--cp-space-4) var(--cp-space-4) var(--cp-space-5); }
.cp-format__pack { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; color: var(--cp-brand); font-size: 13px; line-height: 18px; font-weight: 700; }
.cp-format__name { font-size: 18px; line-height: 24px; margin: 0 !important; }
.cp-format__name a { color: var(--cp-ink); text-decoration: none; }
.cp-format__name a:hover { color: var(--cp-brand); }
.cp-format__facts { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: var(--cp-ink-muted); }
.cp-format__facts > li { display: flex; align-items: center; gap: 8px; margin: 0; }
.cp-format__foot { margin-top: auto; padding-top: var(--cp-space-3); display: grid; gap: var(--cp-space-3); }
.cp-format__price { margin: 0 !important; color: var(--cp-ink-muted); font-size: 14px; }
.cp-format__price strong { color: var(--cp-ink); font-size: var(--cp-price-size); line-height: var(--cp-price-line); }
.cp-format__cta { width: 100%; text-align: center; justify-content: center; }

/* ================================================================ collection discovery (A5): piece-count tiles and idea tiles */
.cp-numtiles {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--cp-space-6);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-space-3);
	max-width: var(--cp-layout-max) !important;
}
@media (min-width: 768px) { .cp-numtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cp-numtiles > li { margin: 0; }
.cp-numtile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--cp-space-4) var(--cp-space-5);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	color: var(--cp-ink);
	text-decoration: none;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.cp-numtile:hover { border-color: var(--cp-brand); background: var(--cp-brand-soft); color: var(--cp-ink); }
.cp-numtile__num { font-family: var(--cp-font-display); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--cp-brand); }
.cp-numtile__label { font-weight: 700; font-size: 15px; }
.cp-numtile__meta { margin-top: var(--cp-space-2); font-size: 13px; line-height: 18px; color: var(--cp-ink-muted); }
.cp-tiles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-space-3);
	max-width: var(--cp-layout-max) !important;
}
@media (min-width: 768px) { .cp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cp-space-4); } }
.cp-tiles > li { margin: 0; }
.cp-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	text-decoration: none;
	color: var(--cp-ink);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.cp-tile:hover { border-color: var(--cp-line-strong); box-shadow: 0 10px 28px rgba(19, 27, 43, 0.08); color: var(--cp-ink); }
.cp-tile__media { display: block; }
.cp-tile__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cp-tile__media .cp-ph { border-radius: 0; }
.cp-tile__body { display: flex; flex-direction: column; gap: 2px; padding: var(--cp-space-3) var(--cp-space-4) var(--cp-space-4); }
.cp-tile__name { font-weight: 700; font-size: 16px; line-height: 22px; }
.cp-tile__meta { color: var(--cp-ink-muted); font-size: 13px; line-height: 18px; }
.cp-collection-chips { list-style: none; padding: 0; margin: 0 0 var(--cp-space-4); display: flex; flex-wrap: wrap; gap: var(--cp-space-2); max-width: var(--cp-layout-max) !important; }
.cp-collection-chips > li { margin: 0; }
.cp-collection-chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--cp-tap-min);
	padding: 0 var(--cp-space-4);
	border: 1px solid var(--cp-line-strong);
	border-radius: var(--cp-radius-pill);
	color: var(--cp-ink);
	font-weight: 600;
	text-decoration: none;
	background: var(--cp-surface);
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.cp-collection-chip:hover { border-color: var(--cp-brand); color: var(--cp-brand); background: var(--cp-brand-soft); }

/* ================================================================ sizes (A7, [cp_size_bands]) */
.cp-sizeguide { display: grid; gap: var(--cp-space-6); align-items: start; }
@media (min-width: 1025px) { .cp-sizeguide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.cp-scale { margin: 0; padding: var(--cp-space-5); border-radius: var(--cp-radius-lg); background: var(--cp-surface); border: 1px solid var(--cp-line); }
.cp-scale svg { display: block; width: 100%; height: auto; }
.cp-scale__board { fill: rgba(31, 79, 180, 0.05); stroke: var(--cp-brand); stroke-width: 1.5; }
.cp-scale__label { font: 700 11px var(--cp-font-sans); fill: var(--cp-ink); }
.cp-scale__ref { fill: none; stroke: var(--cp-line-strong); stroke-width: 1.2; stroke-dasharray: 4 3; }
.cp-scale__reflabel { font: 600 9px var(--cp-font-sans); fill: var(--cp-ink-muted); }
.cp-scale figcaption { margin-top: var(--cp-space-3); font-size: 13px; line-height: 18px; color: var(--cp-ink-muted); }
.cp-bandcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-3); }
@media (min-width: 600px) { .cp-bandcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-bandcard { margin: 0; padding: var(--cp-space-4); border-radius: var(--cp-radius-md); background: var(--cp-surface); border: 1px solid var(--cp-line); }
.cp-bandcard p { margin: 0 !important; }
.cp-bandcard__pieces { font-size: 14px; color: var(--cp-ink-muted); }
.cp-bandcard__pieces strong { display: block; font-family: var(--cp-font-display); font-size: 24px; line-height: 28px; color: var(--cp-ink); letter-spacing: -0.01em; }
.cp-bandcard__size { margin-top: 2px !important; font-size: 14px; font-weight: 600; }
.cp-bandcard__facts { list-style: none; margin: var(--cp-space-3) 0 !important; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 18px; color: var(--cp-ink-muted); }
.cp-bandcard__facts > li { display: flex; align-items: center; gap: 6px; margin: 0; }
.cp-bandcard__puzzles { font-size: 13px; line-height: 18px; }

/* ================================================================ photo quality (A8) */
.cp-quality { list-style: none; margin: 0 0 var(--cp-space-5); padding: 0; display: grid; gap: var(--cp-space-3); max-width: var(--cp-layout-max) !important; }
@media (min-width: 768px) { .cp-quality { grid-template-columns: repeat(3, 1fr); gap: var(--cp-space-4); } }
.cp-quality > li { margin: 0; padding: var(--cp-space-5); border-radius: var(--cp-radius-lg); background: var(--cp-surface); border: 1px solid var(--cp-line); border-top: 4px solid var(--q, var(--cp-line-strong)); }
.cp-quality__great { --q: var(--cp-great); }
.cp-quality__fine { --q: var(--cp-fine); }
.cp-quality__low { --q: var(--cp-low); }
.cp-quality .cp-q { margin-bottom: var(--cp-space-3); }
.cp-quality .cp-quality__rule { margin: 0 0 var(--cp-space-2) !important; font-family: var(--cp-font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.cp-quality p { margin: 0 !important; color: var(--cp-ink-muted); font-size: 15px; line-height: 22px; }

/* Quality pills (word + colour, the same as the creator). */
.cp-q {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-1);
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--cp-radius-pill);
}
.cp-q--great { background: var(--cp-great); color: var(--cp-on-great); }
.cp-q--fine { background: var(--cp-fine-soft); color: var(--cp-fine); }
.cp-q--low { background: var(--cp-low-soft); color: var(--cp-low); box-shadow: inset 0 0 0 1px var(--cp-low); }

/* ================================================================ callouts and feature cards (A9, A10) */
.cp-callout {
	display: flex;
	gap: var(--cp-space-3);
	max-width: var(--cp-layout-max) !important;
	margin: 0 0 var(--cp-space-4) !important;
	padding: var(--cp-space-4) var(--cp-space-5);
	border-radius: var(--cp-radius-md);
	background: var(--cp-brand-soft);
	color: var(--cp-ink);
	font-size: 15px;
	line-height: 23px;
}
.cp-callout::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: var(--cp-brand);
	-webkit-mask: var(--cp-icon, url("icons/info.svg")) center / contain no-repeat;
	mask: var(--cp-icon, url("icons/info.svg")) center / contain no-repeat;
}
.cp-callout p { margin: 0 !important; }
.cp-callout--best { background: #fdf3dc; }
.cp-callout--best::before { background: #8a5a00; }
.cp-features { display: grid; gap: var(--cp-space-5); max-width: var(--cp-layout-max) !important; }
@media (min-width: 900px) { .cp-features { grid-template-columns: 1fr 1fr; } }
.cp-feature { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--cp-radius-lg); background: var(--cp-surface); border: 1px solid var(--cp-line); }
.cp-feature__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: var(--cp-space-5); background: var(--cp-stage); }
.cp-feature__media > .cp-ph { height: 100%; aspect-ratio: auto !important; background-color: transparent; }
.cp-feature__media .cp-layoutdemos { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--cp-space-4); }
.cp-feature__media .cp-ph { background-color: transparent; box-shadow: none; }
.cp-feature__media .cp-layoutdemos { margin: 0; }
.cp-feature__body { padding: var(--cp-space-5) var(--cp-space-5) var(--cp-space-6); }
.cp-feature__body h2 { font-size: 24px !important; line-height: 30px !important; }
.cp-feature__body p:last-child { margin-bottom: 0 !important; }
.cp-chipfacts, .cp-occasions { list-style: none; margin: 0 0 var(--cp-space-4) !important; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chipfacts > li, .cp-occasions > li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: var(--cp-radius-pill); background: var(--cp-surface-sunken); font-size: 13px; line-height: 18px; font-weight: 600; }

/* ================================================================ FAQ and expandable sections (WordPress Details block) */
.wp-block-details { margin: 0; padding: 0; border-bottom: 1px solid var(--cp-line); }
.wp-block-details:first-of-type { border-top: 1px solid var(--cp-line); }
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-3);
	min-height: 56px;
	padding: var(--cp-space-3) 0;
	font-weight: 600;
	font-size: 17px;
	line-height: 24px;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cp-surface-sunken) url("icons/chevron-down.svg") center / 16px no-repeat;
	transition: transform 200ms ease-out;
}
.wp-block-details > summary:hover { color: var(--cp-brand); }
.wp-block-details[open] > summary::after { transform: rotate(180deg); }
.wp-block-details > :not(summary) { max-width: var(--cp-layout-reading); margin-top: 0; margin-bottom: var(--cp-space-4); color: var(--cp-ink); }
.cp-faq { max-width: 880px !important; }

/* ================================================================ tables (sizes, comparison) */
.cp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--cp-space-4);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-md);
	max-width: var(--cp-layout-max) !important;
	background: var(--cp-surface);
}
.cp-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; line-height: 20px; border: 0; }
.cp-table th, .cp-table td { padding: 14px var(--cp-space-4); text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--cp-line); white-space: nowrap; }
.cp-table thead th { background: var(--cp-surface-sunken); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--cp-ink-muted); }
.cp-table tbody tr:last-child > * { border-bottom: 0; }
.cp-table tbody th { font-weight: 700; background: var(--cp-surface); }
.cp-table small, .cp-table__sub { color: var(--cp-ink-muted); font-weight: 400; font-size: 13px; }
.cp-table__price { font-weight: 700; }
.cp-table tr.is-current > * { background: var(--cp-brand-soft); }
.cp-table tr.is-current .cp-q--fine { box-shadow: inset 0 0 0 1px var(--cp-fine); }
.cp-compare th a { white-space: normal; font-weight: 700; }
/* Phones: each row becomes a card; the column name is shown beside each value (data-label). */
@media (max-width: 699px) {
	.cp-table-wrap--stack { overflow: visible; border: 0; background: none; }
	.cp-table-wrap--stack .cp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.cp-table-wrap--stack .cp-table, .cp-table-wrap--stack .cp-table tbody, .cp-table-wrap--stack .cp-table tr { display: block; }
	.cp-table-wrap--stack .cp-table tr { margin: 0 0 var(--cp-space-3); padding: 4px 0; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); background: var(--cp-surface); }
	.cp-table-wrap--stack .cp-table tr.is-current { border-color: var(--cp-brand); box-shadow: inset 0 0 0 1px var(--cp-brand); }
	.cp-table-wrap--stack .cp-table th, .cp-table-wrap--stack .cp-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--cp-space-3); padding: 8px var(--cp-space-4); white-space: normal; text-align: right; border-bottom: 1px solid var(--cp-line); }
	.cp-table-wrap--stack .cp-table tr > :last-child { border-bottom: 0; }
	.cp-table-wrap--stack .cp-table [data-label]::before { content: attr(data-label); flex: none; max-width: 50%; text-align: left; font-size: 13px; font-weight: 600; color: var(--cp-ink-muted); }
	.cp-table-wrap--stack .cp-table tbody th { font-size: 17px; background: none; }
	.cp-table-wrap--stack .cp-table tr.is-current > * { background: none; }
}

/* ================================================================ product page (B1-B10) */
.cp-product .summary > p.price { display: none; /* the selected size's price is shown above the size selector */ }
.cp-product .woocommerce-variation-description { display: none; /* the finished size is in the selection summary */ }
.cp-product .woocommerce-product-details__short-description { color: var(--cp-ink-muted); font-size: var(--cp-body-lg-size); line-height: var(--cp-body-lg-line); }
.cp-product .woocommerce-variation-price .price { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--cp-ink); }
/* !important: WooCommerce's variation script shows .quantity with an inline display:block. */
.cp-product form.cart:not(.cp-has-design) .woocommerce-variation-add-to-cart .quantity,
.cp-product form.cart:not(.cp-has-design) .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: none !important; }
.cp-product .content-area { margin-top: var(--cp-space-5); }
.cp-product .single_variation { margin-bottom: var(--cp-space-3); }
.cp-product .cp-ship-note { margin: 0 0 var(--cp-space-3); color: var(--cp-ink-muted); font-size: 14px; }
.cp-product .woocommerce-product-gallery { background: var(--cp-stage); border-radius: var(--cp-radius-lg); overflow: hidden; }
.cp-product .woocommerce-product-gallery img { border-radius: var(--cp-radius-photo); }
.cp-product .product_title { font-size: var(--cp-display-page-size); line-height: var(--cp-display-page-line); }
@media (min-width: 1025px) {
	.cp-product .product_title { font-size: 44px; line-height: 50px; }
	.cp-product div.product .summary { padding: var(--cp-space-2) 0 0; }
}
/* Sections (B3-B8): open on desktop, the first one open on phones (site.js); each reads as a section. */
.cp-sections { clear: both; max-width: var(--cp-layout-max); margin: var(--cp-space-7) auto 0; }
.cp-sections > .wp-block-group__inner-container > .wp-block-details,
.cp-sections > .wp-block-details { border: 0; border-top: 1px solid var(--cp-line); }
.cp-sections .wp-block-details > summary { min-height: 64px; padding: var(--cp-space-4) 0; font-family: var(--cp-font-display); font-size: var(--cp-display-section-size); line-height: var(--cp-display-section-line); font-weight: 700; }
.cp-sections .wp-block-details .wp-block-details > summary { font-family: var(--cp-font-sans); font-size: 17px; line-height: 24px; min-height: 56px; }
.cp-sections .wp-block-details > :not(summary) { max-width: none; margin-bottom: var(--cp-space-5); }
.cp-sections .wp-block-details > p, .cp-sections .cp-about > p { max-width: var(--cp-layout-reading); }
@media (min-width: 1025px) { .cp-sections .wp-block-details > summary { font-size: 30px; line-height: 36px; } }
.cp-sections h2 { font-size: var(--cp-display-section-size); line-height: var(--cp-display-section-line); margin: var(--cp-space-8) 0 var(--cp-space-4); }
.cp-sections .cp-about h3 { font-size: var(--cp-title-size); margin: var(--cp-space-5) 0 var(--cp-space-2); }
.cp-sections > .wp-block-group__inner-container > .cp-trust,
.cp-sections > .cp-trust { margin-bottom: var(--cp-space-6) !important; padding: var(--cp-space-4) !important; border-radius: var(--cp-radius-lg); background: var(--cp-surface-sunken); }
/* What you get: spec tiles with icons. */
.cp-specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 var(--cp-space-4); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); overflow: hidden; background: var(--cp-surface); }
@media (min-width: 700px) { .cp-specs { grid-template-columns: 1fr 1fr; } }
.cp-specs__item { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: start; padding: var(--cp-space-4); border-bottom: 1px solid var(--cp-line); }
@media (min-width: 700px) { .cp-specs__item:nth-child(odd) { border-right: 1px solid var(--cp-line); } }
.cp-specs__item::before {
	content: "";
	grid-row: span 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cp-brand-soft);
}
.cp-specs__item::after {
	content: "";
	position: absolute;
	top: calc(var(--cp-space-4) + 9px);
	left: calc(var(--cp-space-4) + 9px);
	width: 18px;
	height: 18px;
	background: var(--cp-brand);
	-webkit-mask: var(--cp-icon) center / contain no-repeat;
	mask: var(--cp-icon) center / contain no-repeat;
}
.cp-specs dt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cp-ink-muted); }
.cp-specs dd { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--cp-ink); }

/* Delivery and returns (synced pattern): key facts as cards. */
.cp-keyfacts { list-style: none; margin: 0 0 var(--cp-space-4) !important; padding: 0; display: grid; gap: var(--cp-space-3); max-width: var(--cp-layout-max) !important; }
@media (min-width: 700px) { .cp-keyfacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .cp-keyfacts--3 { grid-template-columns: repeat(3, 1fr); } }
.cp-keyfacts > li {
	position: relative;
	margin: 0;
	padding: var(--cp-space-4) var(--cp-space-4) var(--cp-space-4) 60px;
	border-radius: var(--cp-radius-md);
	background: var(--cp-surface);
	border: 1px solid var(--cp-line);
	font-size: 15px;
	line-height: 22px;
	color: var(--cp-ink-muted);
}
.cp-keyfacts > li::before {
	content: "";
	position: absolute;
	left: var(--cp-space-4);
	top: var(--cp-space-4);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cp-brand-soft);
}
.cp-keyfacts > li::after {
	content: "";
	position: absolute;
	left: calc(var(--cp-space-4) + 7px);
	top: calc(var(--cp-space-4) + 7px);
	width: 16px;
	height: 16px;
	background: var(--cp-brand);
	-webkit-mask: var(--cp-icon) center / contain no-repeat;
	mask: var(--cp-icon) center / contain no-repeat;
}
.cp-keyfacts strong { display: block; margin-bottom: 2px; color: var(--cp-ink); font-size: 16px; }

/* ================================================================ collection page (C1-C7) */
.cp-collection .archive-description, .cp-collection .term-description { font-size: var(--cp-body-lg-size); line-height: var(--cp-body-lg-line); color: var(--cp-ink-muted); max-width: var(--cp-layout-reading); margin-left: auto; margin-right: auto; }
.cp-collection .cp-creator-entry { margin-bottom: var(--cp-space-7); }
.cp-collection .content-area { margin-top: var(--cp-space-6); }
.cp-collection .product-archive-hero-section .entry-hero-container-inner { background: linear-gradient(180deg, var(--cp-brand-soft) 0%, var(--cp-surface-sunken) 100%); }
.cp-collection .product-archive-hero-section .entry-header { padding-top: var(--cp-space-7); padding-bottom: var(--cp-space-7); }
.cp-collection-facts { list-style: none; padding: 0; margin: 0 0 var(--cp-space-4); display: flex; flex-wrap: wrap; gap: var(--cp-space-2); }
.cp-collection-facts li { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; padding: 6px 12px; border-radius: var(--cp-radius-pill); background: var(--cp-surface); box-shadow: inset 0 0 0 1px var(--cp-line); color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cp-collection-more { margin-top: var(--cp-space-7); }
.cp-collection-more h2 { font-size: var(--cp-display-section-size); line-height: var(--cp-display-section-line); margin: var(--cp-space-8) 0 var(--cp-space-4); }
.cp-collection-more > p, .cp-collection-more .cp-guide p { max-width: var(--cp-layout-reading); }
.cp-guide { padding: var(--cp-space-5) var(--cp-space-6); border-radius: var(--cp-radius-lg); background: var(--cp-surface-sunken); }
.cp-guide h2 { margin-top: 0 !important; }
.cp-guide p:last-child { margin-bottom: 0; }
.cp-card-summary { color: var(--cp-ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product { border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); overflow: hidden; background: var(--cp-surface); }
.woocommerce ul.products li.product .product-details { padding: 0 var(--cp-space-4) var(--cp-space-4); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; line-height: 23px; }
.woocommerce ul.products li.product .button { text-transform: none; letter-spacing: normal; }
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img { background: var(--cp-stage); }
.cp-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-3); max-width: var(--cp-layout-max) !important; margin: 0 0 var(--cp-space-4); }
@media (min-width: 768px) { .cp-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================ help and policy pages (prose, key facts, contact) */
.cp-info-page .entry-content { font-size: 17px; line-height: 28px; }
.cp-prose { max-width: 760px !important; }
.cp-prose h2 { margin: var(--cp-space-7) 0 var(--cp-space-3); font-size: 26px; line-height: 32px; }
.cp-prose h3 { margin: var(--cp-space-5) 0 var(--cp-space-2); font-size: 19px; line-height: 26px; }
.cp-prose p, .cp-prose li { color: var(--cp-ink); }
.cp-prose ul, .cp-prose ol { padding-left: 1.3em; }
.cp-prose li { margin-bottom: 6px; }
.cp-page-hero { padding-bottom: var(--cp-space-6) !important; }
.cp-page-hero h1 { margin: 0 0 var(--cp-space-3); font-size: var(--cp-display-page-size); line-height: var(--cp-display-page-line); }
@media (min-width: 1025px) { .cp-page-hero h1 { font-size: 44px; line-height: 50px; } }
.cp-updated { margin: 0 !important; font-size: 14px; color: var(--cp-ink-muted); }
.cp-toc { max-width: 760px !important; margin: 0 0 var(--cp-space-6) !important; padding: var(--cp-space-4) var(--cp-space-5); border-radius: var(--cp-radius-md); background: var(--cp-surface-sunken); }
.cp-toc p { margin: 0 0 var(--cp-space-2) !important; font-weight: 700; }
.cp-toc ol { margin: 0; padding-left: 1.2em; columns: 2 220px; column-gap: var(--cp-space-6); }
.cp-toc li { margin-bottom: 4px; break-inside: avoid; }
.cp-contactcards { list-style: none; margin: 0 0 var(--cp-space-6) !important; padding: 0; display: grid; gap: var(--cp-space-3); max-width: var(--cp-layout-max) !important; }
@media (min-width: 768px) { .cp-contactcards { grid-template-columns: repeat(3, 1fr); } }
.cp-contactcards > li { position: relative; margin: 0; padding: var(--cp-space-5) var(--cp-space-5) var(--cp-space-5) 72px; border-radius: var(--cp-radius-lg); border: 1px solid var(--cp-line); background: var(--cp-surface); }
.cp-contactcards > li::before { content: ""; position: absolute; left: var(--cp-space-5); top: var(--cp-space-5); width: 36px; height: 36px; border-radius: 50%; background: var(--cp-brand-soft); }
.cp-contactcards > li::after { content: ""; position: absolute; left: calc(var(--cp-space-5) + 9px); top: calc(var(--cp-space-5) + 9px); width: 18px; height: 18px; background: var(--cp-brand); -webkit-mask: var(--cp-icon) center / contain no-repeat; mask: var(--cp-icon) center / contain no-repeat; }
.cp-contactcards strong { display: block; margin-bottom: 2px; font-size: 16px; }
.cp-contactcards p { margin: 0 !important; color: var(--cp-ink-muted); font-size: 15px; line-height: 22px; }
.cp-panel { max-width: var(--cp-layout-max) !important; padding: var(--cp-space-5); border-radius: var(--cp-radius-lg); border: 1px solid var(--cp-line); background: var(--cp-surface); }
@media (min-width: 1025px) { .cp-panel { padding: var(--cp-space-7); } }

/* ================================================================ cart edit link, footer */
.cp-edit-design { color: var(--cp-brand); font-weight: 600; }
.cp-footer-brand { font-family: var(--cp-font-display); font-weight: 700; font-size: 20px; display: inline-flex; align-items: center; gap: var(--cp-space-2); }
.cp-footer-brand img { width: 24px; height: 24px; }
.site-footer a { color: var(--cp-ink-inverse); }
.site-footer .footer-widget-area h2, .site-footer .widget-title { font-family: var(--cp-font-sans); font-size: 15px; font-weight: 600; color: var(--cp-ink-inverse-muted); text-transform: none; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 var(--cp-space-2); }
.cp-center { text-align: center; margin-top: var(--cp-space-6) !important; }

/* ================================================================ 0.3.1 review fixes */
@media (max-width: 479px) {
	.cp-trust { grid-template-columns: 1fr; gap: var(--cp-space-3); }
}
.cp-faq, .cp-prose, .cp-toc { margin-left: 0 !important; }
.cp-page-hero + .cp-band { padding-top: var(--cp-space-6); }
@media (min-width: 1025px) {
	.cp-info-page .cp-band { padding-top: var(--cp-space-7); padding-bottom: var(--cp-space-7); }
	.cp-info-page .cp-page-hero { padding-top: var(--cp-space-8); }
}
.cp-panel .cp-form { max-width: none; }
@media (min-width: 768px) { .cp-contactcards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
/* Footer: text in the brand column is light on the dark footer. */
.site-footer, .site-footer p, .site-footer .widget { color: var(--cp-ink-inverse-muted); }
.site-footer .cp-footer-brand { color: var(--cp-ink-inverse); }
/* Product gallery: compact on phones (blueprint B2: gallery, then the buy box). */
@media (max-width: 767px) {
	.cp-product .woocommerce-product-gallery__image img, .cp-product .woocommerce-product-gallery .wp-post-image { aspect-ratio: 4 / 3; object-fit: contain; }
}