/*
Theme Name: QCL Lab
Theme URI: https://qcl-lab.example/theme
Author: QCL / Beauty LLC
Author URI: https://qcl-lab.example
Description: A clinical, medical-tech WordPress theme for research-reagent brands. Cyan/teal design system, Certificate-of-Analysis visual language, customizable logo and brand colors, full built-in SEO (Open Graph, Twitter cards, JSON-LD), a blog module, and a product catalog (via the companion QCL Products plugin). Plugin-friendly and translation-ready.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qcl-lab
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, e-commerce
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
	--c-primary: #0C8B92;
	--c-accent:  #1FD3E0;
	--c-dark:    #073B3E;

	--c-ink:     #0A1A1C;
	--c-body:    #243B3D;
	--c-muted:   #5C7B7D;
	--c-surface: #F2FAFA;
	--c-glass:   #E2F4F4;
	--c-line:    #CFE6E7;
	--c-white:   #FFFFFF;
	--c-danger:  #C2410C;
	--c-amber:   #B45309;

	--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

	--step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--step-0:  clamp(0.97rem, 0.94rem + 0.15vw, 1.05rem);
	--step-1:  clamp(1.18rem, 1.10rem + 0.4vw, 1.35rem);
	--step-2:  clamp(1.45rem, 1.30rem + 0.7vw, 1.85rem);
	--step-3:  clamp(1.80rem, 1.55rem + 1.2vw, 2.55rem);
	--step-4:  clamp(2.25rem, 1.80rem + 2.2vw, 3.6rem);
	--step-5:  clamp(2.7rem, 2.0rem + 3.4vw, 4.6rem);

	--space-1: 0.5rem;
	--space-2: 0.875rem;
	--space-3: 1.25rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;
	--space-7: 7rem;

	--maxw: 1180px;
	--maxw-prose: 720px;

	--radius: 14px;
	--radius-sm: 8px;
	--radius-lg: 22px;

	--shadow-1: 0 1px 2px rgba(7, 59, 62, 0.06), 0 4px 16px rgba(7, 59, 62, 0.05);
	--shadow-2: 0 12px 40px rgba(7, 59, 62, 0.12);

	--ring: 0 0 0 3px rgba(31, 211, 224, 0.45);
}

/* =========================================================================
   2. Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	color: var(--c-body);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--c-ink);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--c-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.25em; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }
blockquote {
	margin: 1.5em 0;
	padding: 0.4em 0 0.4em 1.25em;
	border-left: 3px solid var(--c-accent);
	color: var(--c-ink);
	font-size: var(--step-1);
}
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-4) 0; }

::selection { background: var(--c-accent); color: var(--c-dark); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Accessibility helpers */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--c-dark); color: #fff; padding: 0.75em 1.25em; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================================================================
   3. Layout primitives
   ========================================================================= */
.qcl-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-3); }
.qcl-section { padding-block: var(--space-6); }
.qcl-section--tight { padding-block: var(--space-5); }
.qcl-prose { max-width: var(--maxw-prose); }

.qcl-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin: 0 0 var(--space-2);
	display: inline-flex; align-items: center; gap: 0.6em;
}
.qcl-eyebrow::before {
	content: ""; width: 26px; height: 2px; background: var(--c-accent); display: inline-block;
}

.qcl-section-head { max-width: 640px; margin-bottom: var(--space-4); }
.qcl-section-head.is-center { margin-inline: auto; text-align: center; }
.qcl-section-head.is-center .qcl-eyebrow { justify-content: center; }

/* =========================================================================
   4. Buttons
   ========================================================================= */
.qcl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
	font-family: var(--font-display); font-weight: 500; font-size: var(--step-0);
	line-height: 1; padding: 0.95em 1.6em; border-radius: 999px;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.qcl-btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-1); }
.qcl-btn--primary:hover { background: var(--c-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.qcl-btn--ghost { background: transparent; color: var(--c-dark); border-color: var(--c-line); }
.qcl-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-white); }
.qcl-btn--light { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.32); }
.qcl-btn--light:hover { background: #fff; color: var(--c-dark); }
.qcl-btn .qcl-arrow { transition: transform .18s ease; }
.qcl-btn:hover .qcl-arrow { transform: translateX(3px); }

/* =========================================================================
   5. Pills, badges, status
   ========================================================================= */
.qcl-pill {
	display: inline-flex; align-items: center; gap: 0.45em;
	font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em;
	padding: 0.35em 0.7em; border-radius: 999px; background: var(--c-glass); color: var(--c-dark);
	border: 1px solid var(--c-line);
}
.qcl-pill--purity { background: rgba(31,211,224,0.16); border-color: rgba(12,139,146,0.35); color: var(--c-dark); font-weight: 500; }
.qcl-pill--purity::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }

.qcl-status { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--step--1); font-weight: 600; }
.qcl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.qcl-status--in-stock { color: #0F766E; }
.qcl-status--in-stock::before { background: #10B981; }
.qcl-status--pre-order { color: var(--c-amber); }
.qcl-status--pre-order::before { background: #F59E0B; }
.qcl-status--out-of-stock { color: var(--c-muted); }
.qcl-status--out-of-stock::before { background: #94A3B8; }

.qcl-tested-mark {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-primary);
	letter-spacing: 0.04em;
}
.qcl-tested-mark svg { width: 16px; height: 16px; flex: none; }

/* =========================================================================
   6. Announcement bar
   ========================================================================= */
.qcl-topbar {
	background: var(--c-dark); color: rgba(255,255,255,0.92);
	font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em;
	text-align: center; padding: 0.6em var(--space-3);
}
.qcl-topbar a { color: #fff; }

/* =========================================================================
   7. Site header / nav
   ========================================================================= */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(242,250,250,0.82);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
	display: flex; align-items: center; gap: var(--space-3);
	min-height: 74px; padding-block: 0.7rem;
}
.site-branding { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; }
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 46px; width: auto; }
.site-title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.site-title a { color: var(--c-ink); text-decoration: none; }
.site-title a:hover { color: var(--c-primary); }
.site-description { margin: 0; font-size: var(--step--1); color: var(--c-muted); }

.main-navigation { display: flex; align-items: center; }
.main-navigation ul { list-style: none; display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; }
.main-navigation li { position: relative; }
.main-navigation a {
	font-family: var(--font-display); font-weight: 500; font-size: var(--step-0);
	color: var(--c-ink); text-decoration: none; padding: 0.5em 0; display: inline-block;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--c-primary); }
.main-navigation .current-menu-item > a { position: relative; }
.main-navigation .current-menu-item > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--c-accent);
}
/* submenus */
.main-navigation ul ul {
	position: absolute; top: 100%; left: 0; flex-direction: column; gap: 0;
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	box-shadow: var(--shadow-2); padding: 0.4rem; min-width: 210px;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s ease; z-index: 60;
}
.main-navigation li:hover > ul, .main-navigation li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.main-navigation ul ul a { padding: 0.5em 0.7em; border-radius: 6px; width: 100%; }
.main-navigation ul ul a:hover { background: var(--c-glass); }

.header-cta { margin-left: var(--space-1); }

.menu-toggle {
	display: none; background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	padding: 0.55em 0.7em; cursor: pointer; color: var(--c-ink); align-items: center; gap: 0.5em;
	font-family: var(--font-display); font-weight: 500;
}
.menu-toggle .bars { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menu-toggle .bars::before { top: -6px; } .menu-toggle .bars::after { top: 6px; }

/* =========================================================================
   8. Hero
   ========================================================================= */
.qcl-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(120% 120% at 85% -10%, rgba(31,211,224,0.18), transparent 55%),
		linear-gradient(180deg, var(--c-surface), var(--c-white));
	border-bottom: 1px solid var(--c-line);
}
.qcl-hero__lattice { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
.qcl-hero__inner {
	position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5);
	align-items: center; padding-block: var(--space-7);
}
.qcl-hero__title { font-size: var(--step-5); margin-bottom: var(--space-3); }
.qcl-hero__subtitle { font-size: var(--step-1); color: var(--c-body); max-width: 36ch; margin-bottom: var(--space-4); }
.qcl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.qcl-hero__stats { display: flex; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }
.qcl-stat { display: flex; flex-direction: column; gap: 0.2em; }
.qcl-stat__value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--c-dark); letter-spacing: -0.02em; }
.qcl-stat__label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); letter-spacing: 0.04em; line-height: 1.3; }

/* CoA card — the hero signature */
.qcl-coa-card {
	background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2); overflow: hidden;
}
.qcl-coa-card__head {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--c-dark); color: #fff; padding: var(--space-2) var(--space-3);
	font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em;
}
.qcl-coa-card__seal {
	width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-accent);
	display: grid; place-items: center; color: var(--c-accent); font-size: 13px;
}
.qcl-coa-card__rows { padding: var(--space-2) var(--space-3); }
.qcl-coa-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55em 0; border-bottom: 1px dashed var(--c-line); font-family: var(--font-mono); font-size: var(--step--1); }
.qcl-coa-row:last-child { border-bottom: 0; }
.qcl-coa-row span:first-child { color: var(--c-muted); letter-spacing: 0.04em; }
.qcl-coa-row span:last-child { color: var(--c-ink); font-weight: 500; }
.qcl-coa-card__foot {
	display: flex; align-items: center; gap: 0.6em; padding: var(--space-2) var(--space-3);
	background: var(--c-glass); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-dark);
	border-top: 1px solid var(--c-line);
}

/* =========================================================================
   9. Trust band
   ========================================================================= */
.qcl-trust { background: var(--c-dark); color: rgba(255,255,255,0.92); }
.qcl-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.qcl-trust__item { display: flex; flex-direction: column; gap: 0.4em; }
.qcl-trust__icon { width: 30px; height: 30px; color: var(--c-accent); }
.qcl-trust__item h3 { color: #fff; font-size: var(--step-1); margin: 0; }
.qcl-trust__item p { color: rgba(255,255,255,0.72); font-size: var(--step--1); margin: 0; }

/* =========================================================================
   10. Product grid & cards
   ========================================================================= */
.qcl-product-grid {
	display: grid; gap: var(--space-3);
	grid-template-columns: repeat(var(--qcl-cols, 3), 1fr);
}
.qcl-product-card {
	display: flex; flex-direction: column; background: var(--c-white);
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
	text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qcl-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(12,139,146,0.4); }
.qcl-product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--c-glass); overflow: hidden; }
.qcl-product-card__media img, .qcl-product-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.qcl-product-card__cat {
	position: absolute; top: 0.7rem; left: 0.7rem;
	font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
	background: rgba(7,59,62,0.85); color: #fff; padding: 0.3em 0.6em; border-radius: 999px;
}
.qcl-product-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.qcl-product-card__title { font-size: var(--step-1); margin: 0; color: var(--c-ink); }
.qcl-product-card__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); display: flex; flex-direction: column; gap: 0.2em; }
.qcl-product-card__meta b { color: var(--c-body); font-weight: 500; }
.qcl-product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.6rem; border-top: 1px solid var(--c-line); }

/* =========================================================================
   11. Blog post cards
   ========================================================================= */
.qcl-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.qcl-card {
	display: flex; flex-direction: column; background: var(--c-white);
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.qcl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.qcl-card__media { aspect-ratio: 16 / 10; background: var(--c-glass); overflow: hidden; }
.qcl-card__media a { display: block; height: 100%; }
.qcl-card__media img, .qcl-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.qcl-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.qcl-card__title { font-size: var(--step-1); margin: 0; }
.qcl-card__title a { color: var(--c-ink); text-decoration: none; }
.qcl-card__title a:hover { color: var(--c-primary); }
.qcl-card__excerpt { color: var(--c-body); font-size: var(--step-0); margin: 0; }
.qcl-card__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); letter-spacing: 0.02em; display: flex; gap: 0.6em; flex-wrap: wrap; }
.qcl-card__meta a { color: var(--c-primary); text-decoration: none; }
.qcl-card .cat-links { display: inline-flex; gap: 0.4em; flex-wrap: wrap; }

/* =========================================================================
   12. Single post / page / product
   ========================================================================= */
.qcl-main { padding-block: var(--space-5); }
.qcl-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-5); align-items: start; }
.qcl-no-sidebar .qcl-layout, body.page .qcl-layout { grid-template-columns: minmax(0,1fr); }

.entry-header { margin-bottom: var(--space-4); }
.entry-title { font-size: var(--step-4); }
.entry-meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); display: flex; gap: 0.8em; flex-wrap: wrap; align-items: center; }
.entry-meta a { color: var(--c-primary); text-decoration: none; }
.entry-meta .sep { opacity: 0.5; }
.entry-featured { margin: var(--space-4) 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); }

.entry-content { font-size: var(--step-1); }
.entry-content > * { max-width: var(--maxw-prose); }
.entry-content > .alignwide { max-width: 1000px; }
.entry-content > .alignfull { max-width: none; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.3em; }
.entry-content ul li, .entry-content ol li { margin-bottom: 0.4em; }
.entry-content a { font-weight: 500; }

.entry-footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--c-line); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); }
.entry-footer .tags-links a { color: var(--c-primary); text-decoration: none; }

/* Product detail */
.qcl-product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: start; }
.qcl-product__media { border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-glass); position: sticky; top: 96px; }
.qcl-product__media img, .qcl-product__media svg { width: 100%; display: block; aspect-ratio: 1/1; object-fit: cover; }
.qcl-product__head { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: var(--space-3); }
.qcl-product__title { font-size: var(--step-4); margin: 0; }
.qcl-product__tags { display: flex; gap: 0.5em; flex-wrap: wrap; align-items: center; }
.qcl-product__summary { font-size: var(--step-1); color: var(--c-body); }

/* CoA-style spec table */
.qcl-spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin: var(--space-3) 0; }
.qcl-spec-table caption {
	caption-side: top; text-align: left; font-family: var(--font-mono); font-size: var(--step--1);
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary); padding: 0 0 0.6rem;
}
.qcl-spec-table th, .qcl-spec-table td { text-align: left; padding: 0.8em 1em; border-bottom: 1px solid var(--c-line); font-size: var(--step-0); }
.qcl-spec-table tr:last-child th, .qcl-spec-table tr:last-child td { border-bottom: 0; }
.qcl-spec-table th { width: 42%; font-family: var(--font-mono); font-weight: 500; color: var(--c-muted); letter-spacing: 0.02em; background: var(--c-surface); }
.qcl-spec-table td { font-family: var(--font-mono); color: var(--c-ink); }
.qcl-spec-table tr:nth-child(even) td { background: rgba(226,244,244,0.4); }

.qcl-coa-link {
	display: inline-flex; align-items: center; gap: 0.6em; margin: var(--space-2) 0 var(--space-3);
	font-family: var(--font-mono); font-size: var(--step-0); color: var(--c-dark);
	background: var(--c-glass); border: 1px solid var(--c-line); padding: 0.7em 1.1em; border-radius: var(--radius-sm);
	text-decoration: none;
}
.qcl-coa-link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.qcl-coa-link svg { width: 18px; height: 18px; }

.qcl-product__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }

.qcl-disclaimer {
	margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius);
	background: rgba(180,83,9,0.06); border: 1px solid rgba(180,83,9,0.2);
	font-size: var(--step--1); color: var(--c-amber); line-height: 1.5;
}
.qcl-disclaimer strong { color: var(--c-danger); }

/* related */
.qcl-related { margin-top: var(--space-6); }

/* =========================================================================
   13. Sidebar & widgets
   ========================================================================= */
.qcl-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-3); }
.widget { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-3); }
.widget-title { font-size: var(--step-1); margin: 0 0 var(--space-2); padding-bottom: 0.5rem; border-bottom: 2px solid var(--c-accent); display: inline-block; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 0.45em 0; border-bottom: 1px solid var(--c-line); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--c-body); text-decoration: none; }
.widget a:hover { color: var(--c-primary); }

.wp-block-search__inside-wrapper, .search-form { display: flex; gap: 0.5rem; }
.search-form label { flex: 1; }
.search-field, input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea {
	width: 100%; font-family: var(--font-body); font-size: var(--step-0);
	padding: 0.7em 0.9em; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-white); color: var(--c-ink);
}
.search-field:focus, input:focus, textarea:focus { border-color: var(--c-primary); }
.search-submit, button[type="submit"], input[type="submit"] {
	font-family: var(--font-display); font-weight: 500; background: var(--c-primary); color: #fff;
	border: 0; border-radius: var(--radius-sm); padding: 0.7em 1.2em; cursor: pointer;
}
.search-submit:hover, button[type="submit"]:hover { background: var(--c-dark); }

/* =========================================================================
   14. Pagination
   ========================================================================= */
.qcl-pagination { margin-top: var(--space-5); }
.qcl-pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.qcl-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.6rem;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-white);
	font-family: var(--font-mono); color: var(--c-ink); text-decoration: none;
}
.qcl-pagination .page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.qcl-pagination .page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.qcl-post-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--c-line); }
.qcl-post-nav a { text-decoration: none; }
.qcl-post-nav .nav-subtitle { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); display: block; }
.qcl-post-nav .nav-title { font-family: var(--font-display); color: var(--c-ink); }

/* =========================================================================
   15. Breadcrumbs
   ========================================================================= */
.qcl-breadcrumbs { margin-bottom: var(--space-3); }
.qcl-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0; font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); }
.qcl-breadcrumbs li { display: flex; align-items: center; gap: 0.5em; }
.qcl-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--c-line); }
.qcl-breadcrumbs a { color: var(--c-primary); text-decoration: none; }
.qcl-breadcrumbs li[aria-current] { color: var(--c-ink); }

/* =========================================================================
   16. Archive / page header
   ========================================================================= */
.qcl-page-header {
	background: linear-gradient(180deg, var(--c-glass), var(--c-surface));
	border-bottom: 1px solid var(--c-line); padding-block: var(--space-5);
}
.qcl-page-header .page-title { margin: 0 0 0.3em; }
.qcl-page-header .archive-description { color: var(--c-body); max-width: 60ch; margin: 0; }
.qcl-page-header .qcl-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); }

/* =========================================================================
   17. Footer
   ========================================================================= */
.site-footer { background: var(--c-dark); color: rgba(255,255,255,0.82); margin-top: var(--space-6); }
.site-footer a { color: rgba(255,255,255,0.92); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); padding-block: var(--space-6); }
.site-footer .widget { background: transparent; border: 0; padding: 0; }
.site-footer .widget-title { color: #fff; border-bottom-color: rgba(255,255,255,0.25); font-size: var(--step-0); letter-spacing: 0.04em; }
.site-footer .widget li { border-bottom-color: rgba(255,255,255,0.12); }
.site-footer .widget a { color: rgba(255,255,255,0.78); }

.footer-brand__logo { max-height: 44px; width: auto; margin-bottom: var(--space-2); }
.footer-brand__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: #fff; margin: 0 0 var(--space-2); }
.footer-brand p { color: rgba(255,255,255,0.72); font-size: var(--step-0); max-width: 34ch; }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-2); }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: grid; place-items: center; }
.footer-social a:hover { border-color: var(--c-accent); background: rgba(31,211,224,0.12); }
.footer-social svg { width: 18px; height: 18px; }

.site-footer__disclaimer { border-top: 1px solid rgba(255,255,255,0.14); padding-block: var(--space-3); font-size: var(--step--1); color: rgba(255,255,255,0.6); line-height: 1.6; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-block: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--step--1); color: rgba(255,255,255,0.6); }

/* =========================================================================
   18. Comments
   ========================================================================= */
.comments-area { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--c-line); max-width: var(--maxw-prose); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.comment-author { display: flex; align-items: center; gap: 0.6rem; }
.comment-author .avatar { border-radius: 50%; }
.comment-metadata { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-muted); }
.comment-respond { margin-top: var(--space-4); }
.comment-form { display: grid; gap: var(--space-2); }
.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { display: flex; flex-direction: column; gap: 0.3rem; }

/* =========================================================================
   19. 404 / no results
   ========================================================================= */
.qcl-404 { text-align: center; padding-block: var(--space-7); }
.qcl-404 .qcl-404__code { font-family: var(--font-mono); font-size: var(--step-5); color: var(--c-accent); letter-spacing: 0.1em; }
.qcl-404 .search-form { max-width: 420px; margin: var(--space-3) auto 0; }
.qcl-no-results { background: var(--c-white); border: 1px dashed var(--c-line); border-radius: var(--radius); padding: var(--space-4); text-align: center; }

/* =========================================================================
   20. WP core alignment / caption helpers
   ========================================================================= */
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: var(--step--1); color: var(--c-muted); text-align: center; margin-top: 0.4rem; }
.sticky .qcl-card__title::before { content: "★ "; color: var(--c-accent); }
.bypostauthor > .comment-body { border-left: 2px solid var(--c-accent); padding-left: var(--space-2); }
.wp-block-button__link { border-radius: 999px; }

/* =========================================================================
   21. Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.qcl-hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
	.qcl-product { grid-template-columns: 1fr; }
	.qcl-product__media { position: static; }
	.qcl-trust__grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.qcl-post-grid { grid-template-columns: repeat(2, 1fr); }
	.qcl-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
	.menu-toggle { display: inline-flex; }
	.main-navigation { position: fixed; inset: 74px 0 auto 0; background: var(--c-white); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-2); transform: translateY(-120%); transition: transform .25s ease; padding: var(--space-3); z-index: 40; }
	.main-navigation.is-open { transform: translateY(0); }
	.main-navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
	.main-navigation li { border-bottom: 1px solid var(--c-line); }
	.main-navigation a { padding: 0.85em 0; }
	.main-navigation ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: var(--space-3); }
	.header-cta { display: none; }
	.qcl-layout { grid-template-columns: 1fr; }
	.qcl-sidebar { position: static; }
}

@media (max-width: 560px) {
	.qcl-post-grid, .qcl-product-grid { grid-template-columns: 1fr !important; }
	.qcl-trust__grid { grid-template-columns: 1fr; }
	.site-footer__top { grid-template-columns: 1fr; }
	.qcl-hero__stats { gap: var(--space-3); }
	.qcl-post-nav { flex-direction: column; }
}

/* =========================================================================
   22. Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}