/* ==========================================================================
   EzeePC — Trust-first redesign layer
   Loaded LAST (after style.css, modern.css, pages.css/post.css). Overrides
   tokens + adds new components using additive `.ezpc-*` classes so nothing
   this pass didn't touch is at risk. Fonts are self-hosted (no external
   CDN call, no render-blocking third-party request).

   What this file does, in order:
   1. Self-hosted fonts (Archivo / IBM Plex Sans / IBM Plex Mono)
   2. New design tokens (ink / bench / signal / pcb) + neutralizing the old
      neon-cyan / neon-purple / gradient-clip-text "loud" theme that was
      specifically flagged as the vibrant/eye-fatigue problem
   3. New sticky mega-menu nav (replaces the old random-order icon slider)
   4. Hero + stats restyle
   5. Product card trust badges + type/color refresh (existing markup kept
      100% intact — popups, share menu, load-more all still work)
   6. Floating "Dave" tech-support chat widget
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. FONTS — self-hosted, replaces the Google Fonts CDN import           */
/* ---------------------------------------------------------------------- */
@font-face {
	font-family: 'Archivo';
	font-weight: 800 900;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/archivo.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/plexsans.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/plexmono400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/plexmono600.woff2') format('woff2');
}

/* ---------------------------------------------------------------------- */
/* 2. TOKENS                                                              */
/* ---------------------------------------------------------------------- */
:root {
	/* new palette */
	--ink: #12181A;
	--bench: #F5F6F2;
	--paper: #FFFFFF;
	--graphite: #4A544F;
	--muted: #7C8983;
	--line: #DEE3DD;
	--signal: #E2711D;
	--signal-deep: #B85A15;
	--signal-soft: #FBE6D5;
	--pcb: #2B6F52;
	--pcb-soft: #E4F0EA;
	--wa: #25D366;
	--wa-deep: #1DA851;

	/* typography: swap the CDN Sora/Inter pairing for the self-hosted set.
	   !important is required here - style.css redefines these exact custom
	   property names in its own later :root block (its "modern design
	   system" pass, pre-dating this one), and since redesign.css is linked
	   BEFORE style.css in head.php's actual output, style.css's plain
	   (non-!important) :root wins the custom-property cascade without this.
	   Discovered while fixing the header buttons: they were silently
	   rendering in Inter/Sora, not Archivo/Plex, this whole session. */
	--heading-font-family: 'Archivo', 'IBM Plex Sans', sans-serif !important;
	--subheading-font-family: 'Archivo', 'IBM Plex Sans', sans-serif !important;
	--body-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	--mono-font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	/* neutralize the neon homepage theme this pass is specifically fixing -
	   same collision: style.css's later :root redefines all five of these
	   with the original neon values, so it was never actually neutralized. */
	--neon-cyan: var(--signal) !important;
	--neon-purple: var(--pcb) !important;
	--border-glow: rgba(226, 113, 29, 0.16) !important;
	--gradient-color: none !important;
	--gradient-color-reverse: none !important;
}
.ezpc-mono { font-family: var(--mono-font-family); font-variant-numeric: tabular-nums; }
.ezpc-eyebrow {
	font-family: var(--mono-font-family);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--graphite);
}

/* ---------------------------------------------------------------------- */
/* 3. STICKY MEGA-MENU NAV — replaces the random-order icon slider        */
/* ---------------------------------------------------------------------- */
.ezpc-nav {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.homepage-dark .ezpc-nav,
.pages-dark .ezpc-nav {
	background: rgba(18, 24, 26, 0.86);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ezpc-nav__row {
	max-width: 128rem;
	margin: 0 auto;
	padding: 0 2.4rem;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	height: 6.4rem;
}
.ezpc-nav__groups {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ezpc-nav__group { position: relative; }
.ezpc-nav__group-btn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: none;
	color: var(--ink);
	font-family: var(--body-font-family);
	font-size: 1.4rem;
	font-weight: 600;
	padding: 0.9rem 1.1rem;
	border-radius: 0.4rem;
	cursor: pointer;
}
.homepage-dark .ezpc-nav__group-btn,
.pages-dark .ezpc-nav__group-btn { color: #EDF1EE; }
.ezpc-nav__group-btn:hover,
.ezpc-nav__group.is-open .ezpc-nav__group-btn {
	background: var(--pcb-soft);
	color: var(--pcb);
}
.ezpc-nav__group-btn svg { width: 1.2rem; height: 1.2rem; opacity: 0.7; transition: transform 0.15s ease; }
.ezpc-nav__group.is-open .ezpc-nav__group-btn svg { transform: rotate(180deg); }
.ezpc-nav__panel {
	position: absolute;
	top: calc(100% + 0.8rem);
	left: 0;
	min-width: 24rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0.8rem;
	box-shadow: 0 1.2rem 3.6rem rgba(18, 24, 26, 0.16);
	padding: 0.8rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.4rem);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
	z-index: 10;
}
.ezpc-nav__group.is-open .ezpc-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ezpc-nav__panel-label {
	font-family: var(--mono-font-family);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--muted);
	text-transform: uppercase;
	padding: 0.5rem 0.9rem 0.7rem;
}
.ezpc-nav__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 0.9rem;
	border-radius: 0.5rem;
	font-family: var(--body-font-family);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}
.ezpc-nav__item:hover { background: var(--bench); }
.ezpc-nav__item img { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
.ezpc-nav__item-count {
	margin-left: auto;
	font-family: var(--mono-font-family);
	font-size: 1.1rem;
	color: var(--muted);
}
.ezpc-nav__home-link { text-decoration: none; }
.ezpc-nav__right { display: flex; align-items: center; gap: 1rem; }
.ezpc-nav__wa {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	background: var(--wa);
	color: #fff;
	font-family: var(--body-font-family);
	font-size: 1.3rem;
	font-weight: 700;
	padding: 0.9rem 1.5rem;
	border-radius: 0.6rem;
	text-decoration: none;
	white-space: nowrap;
}
.ezpc-nav__wa:hover { background: var(--wa-deep); }
.ezpc-nav__wa svg { width: 1.5rem; height: 1.5rem; }

/* hamburger toggle — hidden on desktop, shown once the mega-menu groups hide */
.ezpc-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	flex-shrink: 0;
	border-radius: 0.6rem;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
	cursor: pointer;
}
.homepage-dark .ezpc-nav__toggle,
.pages-dark .ezpc-nav__toggle { color: #EDF1EE; border-color: rgba(255, 255, 255, 0.18); }
.ezpc-nav__toggle:hover { background: var(--pcb-soft); color: var(--pcb); border-color: var(--pcb); }
.ezpc-nav__toggle svg { width: 2.2rem; height: 2.2rem; }

@media (max-width: 900px) {
	.ezpc-nav__groups { display: none; }
	.ezpc-nav__toggle { display: flex; }
	/* .ezpc-nav__groups was the flex:1 spacer keeping the WhatsApp button
	   pinned right - hiding it collapses the row to flex-start, so the
	   toggle and WhatsApp button bunch up on the left without this. */
	.ezpc-nav__row { justify-content: space-between; }
}
@media (max-width: 420px) {
	/* "WhatsApp Us" label starts crowding the hamburger on very small
	   phones - drop to icon-only in the top bar (the drawer's full-width
	   WhatsApp button below keeps its label, there's room there). */
	.ezpc-nav__right .ezpc-nav__wa span { display: none; }
	.ezpc-nav__right .ezpc-nav__wa { padding: 0.9rem 1.1rem; }
}

/* off-canvas mobile drawer — reuses the same $navGroups data as the desktop
   mega-menu but renders it as a full accordion instead of hover panels,
   since 900px and below isn't enough room for the horizontal group bar */
.ezpc-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(18, 24, 26, 0.55);
	z-index: 950;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}
.ezpc-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.ezpc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(34rem, 86vw);
	background: var(--paper);
	z-index: 951;
	display: flex;
	flex-direction: column;
	box-shadow: -1.2rem 0 4rem rgba(0, 0, 0, 0.28);
	transform: translateX(100%);
	transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.ezpc-drawer.is-open { transform: translateX(0); }
.ezpc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.8rem 1.8rem 1.4rem;
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}
.ezpc-drawer__title { font-family: var(--heading-font-family); font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.ezpc-drawer__close {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	border: none;
	background: var(--bench);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
}
.ezpc-drawer__close svg { width: 1.8rem; height: 1.8rem; }
.ezpc-drawer__body { flex: 1; overflow-y: auto; padding: 0.6rem 1rem 1.4rem; -webkit-overflow-scrolling: touch; }
.ezpc-drawer__group { border-bottom: 1px solid var(--line); }
.ezpc-drawer__group:last-child { border-bottom: none; }
.ezpc-drawer__group-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: none;
	border: none;
	padding: 1.5rem 0.8rem;
	font-family: var(--heading-font-family);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}
.ezpc-drawer__group-btn svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; opacity: 0.5; transition: transform 0.18s ease; }
.ezpc-drawer__group.is-open .ezpc-drawer__group-btn svg { transform: rotate(180deg); }
.ezpc-drawer__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.22s ease;
}
.ezpc-drawer__group.is-open .ezpc-drawer__panel { max-height: 40rem; }
.ezpc-drawer__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0.8rem 1.1rem 1.6rem;
	font-family: var(--body-font-family);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--graphite);
	text-decoration: none;
}
.ezpc-drawer__item img,
.ezpc-drawer__item svg { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.ezpc-drawer__item-count { margin-left: auto; font-size: 1.1rem; color: var(--muted); }
.ezpc-drawer__home-item {
	font-family: var(--heading-font-family);
	font-weight: 800;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	margin-bottom: 0.4rem;
}
.ezpc-drawer__foot { padding: 1.4rem 1.8rem; border-top: 1px solid var(--line); flex-shrink: 0; }
.ezpc-drawer__foot .ezpc-nav__wa { width: 100%; justify-content: center; }
body.ezpc-scroll-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.ezpc-drawer, .ezpc-drawer-backdrop, .ezpc-drawer__panel { transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* 4. HERO + STATS                                                       */
/* ---------------------------------------------------------------------- */
.parallax-image-one__text-heading.heading-text {
	font-family: var(--heading-font-family);
	font-weight: 900;
	letter-spacing: -0.01em;
}
.ezpc-hero-em {
	color: var(--signal);
	text-decoration: underline;
	text-decoration-thickness: 0.3rem;
	text-underline-offset: 0.5rem;
	text-decoration-color: var(--signal-soft);
}
.trust-strip { gap: 1rem 1.6rem; }
.trust-strip li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.6rem;
	padding: 0.8rem 1.2rem;
	font-family: var(--body-font-family);
	opacity: 1;
}
.trust-strip li::before { content: none; }
.trust-strip li::after {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	order: -1;
	background: var(--pcb);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-cta .bttn--blue {
	background: var(--signal);
	border-color: var(--signal);
	font-family: var(--body-font-family);
	font-weight: 700;
}
.hero-cta .bttn--blue:hover { background: var(--signal-deep); border-color: var(--signal-deep); }

/* device-spotlight card shown beside the hero copy (added via parallax_one.php) */
.ezpc-spotlight { display: flex; justify-content: center; margin-top: var(--space-lg); }
.ezpc-spotlight__card {
	position: relative;
	width: min(38rem, 100%);
	background: var(--paper);
	border-radius: 1.4rem;
	padding: 2rem 2rem 1.8rem;
	box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35);
}
.ezpc-spotlight__img-wrap { border-radius: 0.8rem; overflow: hidden; background: var(--bench); }
.ezpc-spotlight__img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: contain; padding: 1.6rem; }
.ezpc-stamp {
	position: absolute;
	top: -1.4rem;
	right: -1.4rem;
	width: 8.4rem;
	height: 8.4rem;
	border-radius: 50%;
	background: var(--paper);
	border: 2px dashed var(--pcb);
	color: var(--pcb);
	display: grid;
	place-items: center;
	transform: rotate(-12deg);
	text-align: center;
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.14);
}
.ezpc-stamp span {
	font-family: var(--mono-font-family);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	display: block;
}
.ezpc-spotlight__tag {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px dashed var(--line);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.ezpc-spotlight__info { flex: 1; min-width: 0; }
.ezpc-spotlight__asset { font-family: var(--mono-font-family); font-size: 1.1rem; color: var(--muted); }
.ezpc-spotlight__name {
	font-family: var(--body-font-family);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--ink);
	margin-top: 0.2rem;
	overflow-wrap: break-word;
}
.ezpc-spotlight__price { text-align: right; flex-shrink: 0; }
.ezpc-spotlight__was { font-family: var(--mono-font-family); font-size: 1.2rem; color: var(--muted); text-decoration: line-through; }
.ezpc-spotlight__now { font-family: var(--mono-font-family); font-size: 2rem; font-weight: 600; color: var(--signal); }

/* stats band: solid mono ink instead of the purple/blue gradient clip-text */
.stats-band__num {
	/* !important required: style.css's own .stats-band__num (later in the
	   cascade) sets background-image: var(--gradient-color-reverse) +
	   background-clip: text + color: transparent - with the gradient
	   token now neutralized to "none" (see TOKENS section above), that
	   combination clips the numbers to a background image that no longer
	   exists, rendering them fully invisible. Confirmed live: the stats
	   band showed labels ("ACTIVE LISTINGS" etc.) with blank space where
	   the numbers ("11+", "12", "4", "1:1") should be. */
	font-family: var(--mono-font-family) !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	color: var(--text-heading-dark, var(--ink)) !important;
	font-weight: 600 !important;
}

/* how-we-grade process strip (added via a new include on the homepage) */
.ezpc-process { padding: var(--space-xl) 0; }
.ezpc-process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 0.8rem;
	overflow: hidden;
	margin-top: var(--space-lg);
}
.homepage-dark .ezpc-process__grid { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); }
.ezpc-process__step { background: var(--paper); padding: 2.6rem 2.4rem; }
.homepage-dark .ezpc-process__step { background: var(--surface-2, #131b32); }
.ezpc-process__num { font-family: var(--mono-font-family); font-size: 1.2rem; color: var(--pcb); font-weight: 600; margin-bottom: 1.2rem; }
.ezpc-process__title { font-family: var(--heading-font-family); font-weight: 800; font-size: 1.8rem; margin-bottom: 0.6rem; color: var(--ink); }
.homepage-dark .ezpc-process__title { color: var(--text-heading-dark, #f1f5f9); }
.ezpc-process__desc { font-family: var(--body-font-family); color: var(--graphite); font-size: 1.4rem; line-height: 1.5; }
.homepage-dark .ezpc-process__desc { color: var(--text-body-dark, #94a3b8); }
@media (max-width: 760px) { .ezpc-process__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* 5. PRODUCT CARD — trust badges layered onto the existing markup        */
/* ---------------------------------------------------------------------- */
.sale-tag { background: var(--signal) !important; }
.price-num,
.homepage-dark .price-num {
	color: var(--signal) !important;
	font-family: var(--mono-font-family);
}
.item-top-title h2 { font-family: var(--body-font-family); font-weight: 700; }
.ezpc-qc-badge {
	position: absolute;
	bottom: -1.6rem;
	right: 1.6rem;
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background: var(--paper);
	border: 2px dashed var(--pcb);
	color: var(--pcb);
	display: grid;
	place-items: center;
	transform: rotate(8deg);
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.16);
	z-index: 3;
}
.ezpc-qc-badge svg { width: 2rem; height: 2rem; }

/* ---------------------------------------------------------------------- */
/* 6. FLOATING CHAT WIDGET — "Dave", added sitewide via footer.php        */
/* ---------------------------------------------------------------------- */
.ezpc-chat-fab {
	position: fixed;
	bottom: 2.2rem;
	right: 2.2rem;
	z-index: 900;
	width: 5.8rem;
	height: 5.8rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bench);
	border: none;
	display: grid;
	place-items: center;
	box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.ezpc-chat-fab svg { width: 2.5rem; height: 2.5rem; }
.ezpc-chat-fab__dot {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--signal);
	border: 2px solid var(--bench);
	font-family: var(--mono-font-family);
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
	display: grid;
	place-items: center;
}
.ezpc-chat-panel {
	position: fixed;
	bottom: 2.2rem;
	right: 2.2rem;
	z-index: 901;
	width: 35.6rem;
	max-width: calc(100vw - 3.2rem);
	height: 48rem;
	max-height: calc(100vh - 10rem);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	box-shadow: 0 1.2rem 4.4rem rgba(0, 0, 0, 0.32);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(1.2rem) scale(0.98);
	transition: all 0.16s ease;
}
.ezpc-chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ezpc-chat-panel__head { display: flex; align-items: center; gap: 1rem; padding: 1.4rem; background: var(--ink); color: var(--bench); flex-shrink: 0; }
.ezpc-chat-panel__avatar {
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--pcb);
	display: grid;
	place-items: center;
	font-family: var(--mono-font-family);
	font-weight: 700;
	font-size: 1.3rem;
	color: #fff;
	flex-shrink: 0;
}
.ezpc-chat-panel__title { font-family: var(--body-font-family); font-size: 1.35rem; font-weight: 700; }
.ezpc-chat-panel__status { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono-font-family); font-size: 1.05rem; color: rgba(245, 246, 242, 0.7); }
.ezpc-chat-panel__status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--pcb); }
.ezpc-chat-panel__close { margin-left: auto; background: none; border: none; color: var(--bench); opacity: 0.7; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 0.4rem; cursor: pointer; }
.ezpc-chat-panel__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.ezpc-chat-panel__close svg { width: 1.5rem; height: 1.5rem; }
.ezpc-chat-panel__body { flex: 1; overflow-y: auto; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; background: var(--bench); }
.ezpc-msg { max-width: 84%; padding: 1rem 1.3rem; border-radius: 1.2rem; font-family: var(--body-font-family); font-size: 1.35rem; line-height: 1.45; }
.ezpc-msg--bot { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; align-self: flex-start; color: var(--ink); }
.ezpc-msg--user { background: var(--ink); color: var(--bench); border-bottom-right-radius: 0.3rem; align-self: flex-end; }
.ezpc-msg--typing { font-style: italic; color: var(--muted); }
.ezpc-msg--suggest { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 100%; }
.ezpc-msg__chip {
	font-family: var(--mono-font-family);
	font-size: 1.15rem;
	font-weight: 600;
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 0.7rem 1rem;
	border-radius: 2rem;
	cursor: pointer;
}
.ezpc-msg__chip:hover { border-color: var(--pcb); color: var(--pcb); }
.ezpc-chat-panel__foot { display: flex; gap: 0.8rem; padding: 1.2rem; border-top: 1px solid var(--line); background: var(--paper); flex-shrink: 0; }
.ezpc-chat-panel__input {
	flex: 1;
	border: 1px solid var(--line);
	background: var(--bench);
	border-radius: 2rem;
	padding: 1rem 1.5rem;
	font-family: var(--body-font-family);
	font-size: 1.35rem;
	color: var(--ink);
}
.ezpc-chat-panel__send {
	width: 3.8rem;
	height: 3.8rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bench);
	border: none;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	cursor: pointer;
}
.ezpc-chat-panel__send svg { width: 1.5rem; height: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
	.ezpc-nav__panel, .ezpc-chat-panel, .ezpc-nav__group-btn svg { transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* 7. SCROLL REVEAL — added only via JS (nav.php), so if JS never runs    */
/*    the target elements are never hidden in the first place             */
/* ---------------------------------------------------------------------- */
.ezpc-reveal {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ezpc-reveal.ezpc-reveal--in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.ezpc-reveal { opacity: 1; transform: none; transition: none; }
}

/* nav gains a firmer shadow once the page has scrolled, so it reads as
   "lifted" above content instead of blending into the hero on light pages */
.ezpc-nav.is-scrolled { box-shadow: 0 0.4rem 1.6rem rgba(18, 24, 26, 0.08); }
.homepage-dark .ezpc-nav.is-scrolled,
.pages-dark .ezpc-nav.is-scrolled { box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.3); }

/* ---------------------------------------------------------------------- */
/* 8. POPULAR BRANDS — replaces the old .offer banner (product.php), which */
/*    showed a random 2 of 4 brands with copy-pasted placeholder taglines  */
/* ---------------------------------------------------------------------- */
.ezpc-brands { padding: var(--space-xl) 0; }
.ezpc-brands__head { margin-bottom: var(--space-lg); }
.ezpc-brands__head .heading-text { margin-top: 0.6rem; }
.ezpc-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: 1.6rem;
}
.ezpc-brand-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 1.2rem);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease);
}
.homepage-dark .ezpc-brand-card { background: var(--surface-2, #131b32); border-color: rgba(255, 255, 255, 0.08); }
.ezpc-brand-card:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 1.6rem 3.2rem rgba(18, 24, 26, 0.14);
	border-color: var(--pcb);
}
.homepage-dark .ezpc-brand-card:hover { box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4); }
.ezpc-brand-card__img-wrap {
	aspect-ratio: 4 / 3;
	background: var(--ink);
	overflow: hidden;
}
.ezpc-brand-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ezpc-brand-card:hover .ezpc-brand-card__img { transform: scale(1.05); }
.ezpc-brand-card__body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.ezpc-brand-card__name { font-family: var(--heading-font-family); font-weight: 800; font-size: 1.9rem; color: var(--ink); }
.homepage-dark .ezpc-brand-card__name { color: var(--text-heading-dark, #f1f5f9); }
.ezpc-brand-card__hook { font-family: var(--body-font-family); font-size: 1.35rem; line-height: 1.5; color: var(--graphite); flex: 1; }
.homepage-dark .ezpc-brand-card__hook { color: var(--text-body-dark, #94a3b8); }
.ezpc-brand-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.8rem;
	font-family: var(--mono-font-family);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--signal);
}
.ezpc-brand-card__cta svg { width: 1.5rem; height: 1.5rem; transition: transform 0.2s ease; }
.ezpc-brand-card:hover .ezpc-brand-card__cta svg { transform: translateX(0.3rem); }

/* ---------------------------------------------------------------------- */
/* 9. HEADER — sign-in / sign-up, brought onto the trust-first system.     */
/*    !important throughout: redesign.css is linked BEFORE style.css in   */
/*    head.php's actual output order (its own header comment claiming     */
/*    "loaded last" is wrong for this pair), so equal-specificity ties    */
/*    go to style.css's later declarations without it - same reason the   */
/*    price/sale-tag overrides earlier in this file already use it.       */
/* ---------------------------------------------------------------------- */
.header-container,
.pages-dark .header-container,
/* style.css's .homepage-dark .header-container is the same 2-class
   specificity AND !important as a plain ".homepage-dark .header-container"
   here would be - source order (style.css loads after) would then win the
   tie. .home-container is the other class already on that same wrapper div
   (index.php: <div class="home-container homepage-dark">), so stacking it
   on gives this 3-class specificity, which wins outright regardless of
   order. */
.home-container.homepage-dark .header-container {
	background: var(--ink) !important;
	padding: 0 2.4rem !important;
	/* .homepage-dark .header-container (style.css) also sets a hardcoded
	   neon-cyan box-shadow - not a var(), so the token !important fix above
	   doesn't reach it. Same specificity fight, so match it here instead of
	   leaving a stray cyan glow under the header. */
	box-shadow: none !important;
}
.header { max-width: 128rem !important; margin: 0 auto !important; gap: 1.2rem; }
.header .header__user-nav { display: flex !important; align-items: center; gap: 0.8rem; }
.header .header__user-nav--sign-in,
.header .header__user-nav--sign-up { margin: 0 !important; }
/* Neutralize the old skewed-gradient-blob button system (:before/:after
   pseudo layers + an absolutely-positioned .cta__btn--text label) - it
   predates the redesign and fights any plain color/padding override. */
.header .header__user-nav .cta__btn {
	position: relative;
	width: auto !important;
	height: auto !important;
	/* Solid bench pill, not an outline - a transparent/ghost button read as
	   washed-out and out of place next to the bold filled WhatsApp (green)
	   and Sign Up (orange) pills right beside it. Every other button in the
	   header/nav is filled; Sign In should be too, just neutral-colored. */
	background: var(--bench) !important;
	border: none !important;
	border-radius: 0.6rem !important;
	padding: 0.9rem 1.7rem;
	margin: 0 !important;
	cursor: pointer;
	transition: background 0.2s var(--ease, ease);
}
.header .header__user-nav .cta__btn::before,
.header .header__user-nav .cta__btn::after,
.header .header__user-nav .cta__btn--text::before { content: none !important; }
.header .header__user-nav .cta__btn:hover { background: var(--line) !important; }
.header .header__user-nav .cta__btn--text {
	position: static;
	background: none !important;
	/* The border the user actually flagged: style.css's base .cta__btn--text
	   rule (line ~392) sets "border: 1px solid var(--color-dark-2)" on the
	   inner text span itself - separate from the outer button's own border
	   (already removed above). Doesn't affect outer pill size, since that's
	   governed by .cta__btn's padding, not this inner span's border. */
	border: none !important;
	color: var(--ink);
	font-family: var(--body-font-family);
	font-size: 1.35rem;
	font-weight: 600;
	white-space: nowrap;
}
.header .header__user-nav--sign-up .cta__btn { background: var(--signal) !important; }
.header .header__user-nav--sign-up .cta__btn:hover { background: var(--signal-deep) !important; }
.header .header__user-nav--sign-up .cta__btn .cta__btn--text { color: var(--bench); }
@media (max-width: 420px) {
	.header .header__user-nav { gap: 0.5rem; }
	.header .header__user-nav .cta__btn { padding: 0.75rem 1.2rem; }
	.header .header__user-nav .cta__btn--text { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------- */
/* 10. SWEEP — other spots relying on --gradient-color(-reverse), which is  */
/*     neutralized to "none" in TOKENS above, had no solid-color fallback  */
/*     and silently broke as a side effect. Found while investigating the  */
/*     stats-band numbers going invisible; checked every remaining user.   */
/* ---------------------------------------------------------------------- */
/* Sign In / Sign Up modal titles: white text (--color-light-1) on a white
   modal (--color-light-1) once the gradient header background vanished -
   effectively invisible "Sign In"/"Sign Up" headings. Confirmed live. */
.modal__header {
	background-image: none !important;
	background-color: var(--ink) !important;
}
/* Custom scrollbar thumb had no background-color fallback at all - fully
   transparent/invisible thumb in Chrome/Edge/Safari once the gradient it
   depended on was removed. */
html::-webkit-scrollbar-thumb { background-image: none !important; background-color: var(--signal) !important; }
html::-webkit-scrollbar-thumb:hover { background-image: none !important; background-color: var(--signal-deep) !important; }
/* A handful of hover glows used a hardcoded neon-cyan rgba() literal
   instead of the --neon-cyan/--border-glow tokens, so fixing those tokens
   didn't reach them - left a stray cyan glow behind on card/section hovers
   even after everything else moved to the signal-orange palette. */
.homepage-dark .container-item:hover { box-shadow: 0 0 3rem rgba(226, 113, 29, 0.25) !important; }
.homepage-dark .why-us__item:hover { box-shadow: 0 0 3rem rgba(226, 113, 29, 0.2) !important; }
.homepage-dark .why-us__icon { background: rgba(226, 113, 29, 0.12) !important; }
.homepage-dark .capability-range__item:hover { box-shadow: 0 0 3rem rgba(226, 113, 29, 0.25) !important; }
.video-popup .popup__content { box-shadow: 0 0 8rem rgba(226, 113, 29, 0.2), 0 2rem 5rem rgba(0, 0, 0, 0.5) !important; }
.video-popup .about-post__video-box { box-shadow: 0 0 3rem rgba(226, 113, 29, 0.15) !important; }
/* This 3px accent strip above the video popup relied entirely on the now-
   neutralized gradient, with no fallback - was rendering as a blank line. */
.video-popup .popup__content::before { background-image: none !important; background-color: var(--signal) !important; }

/* ---------------------------------------------------------------------- */
/* 11. SEARCH BAR + NEWSLETTER — shared pill-input component. Both forms   */
/*     reuse the same generic .example/.search/.btn markup from the       */
/*     original template (light blue-grey input, oversized blue button,   */
/*     no shared visual language with anything else on the page) - .ezpc- */
/*     search is added to both templates as a common hook so they read as */
/*     one deliberate component instead of two different leftover forms.  */
/* ---------------------------------------------------------------------- */
.ezpc-search.example { max-width: 48rem !important; margin: 0 auto !important; }
.ezpc-search .clear-fix {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 3.2rem !important;
	box-shadow: 0 1.2rem 3.2rem rgba(18, 24, 26, 0.18) !important;
	overflow: hidden;
	padding: 0.5rem !important;
	width: 100% !important;
	justify-content: flex-start !important;
}
.ezpc-search input[type="text"] {
	background: transparent !important;
	color: var(--ink) !important;
	font-family: var(--body-font-family) !important;
	font-size: 1.5rem !important;
	font-weight: 500;
	padding: 1.1rem 1.6rem !important;
	border: none !important;
	box-shadow: none !important;
	float: none !important;
	height: auto !important;
	flex: 1 !important;
	min-width: 0 !important;
	width: auto !important;
}
.ezpc-search input[type="text"]::placeholder { color: var(--muted); opacity: 1; }
.ezpc-search input[type="text"]:focus { background: transparent !important; box-shadow: none !important; }
.ezpc-search .textbox-clr {
	background: transparent !important;
	color: var(--muted) !important;
	width: auto !important;
	min-width: 3.4rem !important;
	height: auto !important;
	font-weight: 700;
	border-radius: 50% !important;
}
.ezpc-search input[type="text"]:focus + .textbox-clr,
.ezpc-search .textbox-clr:hover { background: var(--bench) !important; color: var(--ink) !important; box-shadow: none !important; }
.ezpc-search .btn {
	background: var(--signal) !important;
	width: 5.2rem !important;
	height: 5.2rem !important;
	min-width: 5.2rem;
	border-radius: 50% !important;
	flex-shrink: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
	border: none !important;
	transition: background 0.2s var(--ease, ease);
}
.ezpc-search .btn:hover { background: var(--signal-deep) !important; }
.ezpc-search .btn .search__icon { width: 2rem !important; height: 2rem !important; fill: var(--bench) !important; }
@media (max-width: 480px) {
	.ezpc-search .btn { width: 4.6rem !important; height: 4.6rem !important; min-width: 4.6rem; }
	.ezpc-search input[type="text"] { font-size: 1.4rem !important; padding: 1rem 1.3rem !important; }
}

.ezpc-newsletter-section { text-align: center; padding: var(--space-lg) var(--space-md); }
.ezpc-newsletter-section .heading-text { margin: 0.6rem 0 0.8rem; }
.ezpc-newsletter-hook { font-family: var(--body-font-family); font-size: 1.4rem; color: var(--text-body-dark, var(--muted)); margin-bottom: var(--space-md); }
.ezpc-newsletter.example { margin: 0 auto !important; }

/* ---------------------------------------------------------------------- */
/* 12. SITEWIDE ACCENT UNIFICATION                                         */
/*     Every page outside the homepage (category/listing, product detail, */
/*     login/register, user profile, contact, etc.) already got real      */
/*     design attention in an earlier phase of this project - dark        */
/*     surfaces, .bttn pill buttons, .form-input fields, .post/.container-*/
/*     item cards - but that earlier pass used a blue+orange "modern"     */
/*     palette (--color-main #2563eb blue is THE accent used for nearly   */
/*     every button/border/icon/focus-ring sitewide) that predates this   */
/*     session's signal-orange/pcb-green/ink redesign. Confirmed live on  */
/*     /category/laptops: buttons, stat values etc. still solid blue.     */
/*     Rather than chase every individual selector across 7+ CSS files    */
/*     (style/pages/post/user/user_profile/users), redefining the shared  */
/*     token here recolors every consumer of it in one place - the same   */
/*     approach already used for fonts and the neon-cyan neutralization.  */
/*     --color-approved/--color-pending/--color-danger/--color-success    */
/*     deliberately left alone - those carry status meaning (admin/user   */
/*     application states) that shouldn't all become the same color.      */
/* ---------------------------------------------------------------------- */
:root {
	--color-main: var(--signal) !important;
	--color-main-dark: var(--signal-deep) !important;
	--color-secondary: var(--signal) !important;
	--color-active: var(--signal) !important;
}
/* Hardcoded rgba(37, 99, 235 ...) / rgba(0, 125, 184 ...) literals bypass
   the tokens above entirely - same class of bug as the neon-cyan sweep. */
.bttn:hover { box-shadow: 0 1rem 2.4rem rgba(226, 113, 29, 0.25) !important; }
.why-us__icon { background: rgba(226, 113, 29, 0.1) !important; }
.container-item:hover { box-shadow: 0 2rem 4rem rgba(226, 113, 29, 0.18) !important; }
.form-input:focus { box-shadow: 0 0 0 3px rgba(226, 113, 29, 0.22) !important; }

/* ---------------------------------------------------------------------- */
/* 13. STATIC CONTENT PAGES — about.php / legal.php, replacing pages that  */
/*     previously had nothing to do with EzeePC (an unbranded appointment  */
/*     booking form standing in for "About", a different site's Terms &   */
/*     Conditions for "legal"). Plain, readable article layout.            */
/* ---------------------------------------------------------------------- */
.ezpc-static {
	max-width: 76rem;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-xl);
}
.ezpc-static .heading-text { margin: 0.8rem 0 1.6rem; }
.ezpc-static__lede {
	font-family: var(--body-font-family);
	font-size: 1.7rem;
	line-height: 1.6;
	color: var(--text-body-dark, var(--graphite));
	margin-bottom: var(--space-lg);
}
.ezpc-static h2 {
	font-family: var(--heading-font-family);
	font-weight: 800;
	font-size: 2rem;
	color: var(--text-heading-dark, var(--ink));
	margin: var(--space-lg) 0 1rem;
}
.ezpc-static p {
	font-family: var(--body-font-family);
	font-size: 1.5rem;
	line-height: 1.7;
	color: var(--text-body-dark, var(--graphite));
	margin-bottom: 1.2rem;
}
.ezpc-static a { color: var(--signal); text-decoration: none; font-weight: 600; }
.ezpc-static a:hover { color: var(--signal-deep); text-decoration: underline; }
.ezpc-static__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.6rem;
	margin: var(--space-md) 0 var(--space-lg);
}
.ezpc-static__step {
	background: var(--surface-1, var(--paper));
	border: 1px solid var(--border-glow, var(--line));
	border-radius: var(--radius-lg, 1.2rem);
	padding: 2rem;
}
.ezpc-static__step-num { font-family: var(--mono-font-family); font-size: 1.2rem; color: var(--signal); font-weight: 700; }
.ezpc-static__step h3 { font-family: var(--heading-font-family); font-weight: 800; font-size: 1.7rem; margin: 0.8rem 0 0.6rem; color: var(--text-heading-dark, var(--ink)); }
.ezpc-static__step p { font-size: 1.4rem; margin-bottom: 0; }
.ezpc-static__updated { font-family: var(--mono-font-family); font-size: 1.2rem; color: var(--muted); margin-bottom: var(--space-md); }
.ezpc-static__note {
	margin-top: var(--space-lg);
	padding-top: 1.6rem;
	border-top: 1px solid var(--border-glow, var(--line));
	font-size: 1.3rem !important;
	color: var(--muted) !important;
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* 14. POPUPS — the regular info popup (#popup{model}, opened via the      */
/*     "Info" link on every product card, both homepage and category      */
/*     pages) has a white background (.popup__content, style.css line     */
/*     1250), but .homepage-dark .heading-text sets near-white text and   */
/*     the base .popup__close uses --color-light-2 (also near-white) with */
/*     no light/dark variant - both were only ever visible against the    */
/*     video-popup's dark background. Result on the far more common       */
/*     regular popup: an unreadable near-white-on-white heading and an    */
/*     invisible close button. .video-popup keeps its own (correct)       */
/*     light-on-dark treatment - excluded here and re-affirmed after so   */
/*     it isn't caught by this fix too.                                   */
/* ---------------------------------------------------------------------- */
.popup:not(.video-popup) .popup__content .heading-text { color: var(--ink) !important; }
.popup:not(.video-popup) .popup__content .popup__close:link,
.popup:not(.video-popup) .popup__content .popup__close:visited { color: var(--ink) !important; }
.popup:not(.video-popup) .popup__content .popup__close:hover { color: var(--signal) !important; }
.video-popup .heading-text { color: var(--text-heading-dark, #f1f5f9) !important; }
.video-popup .popup__close:link,
.video-popup .popup__close:visited { color: var(--text-body-dark, #94a3b8) !important; }
.video-popup .popup__close:hover { color: var(--signal) !important; }

/* ---------------------------------------------------------------------- */
/* 15. FOOTER — pages.css (category pages, all_posts, and now legal/about) */
/*     never defines .footer's grid layout at all (only a background      */
/*     color), unlike style.css - it's a pre-existing, sitewide gap that   */
/*     was already breaking the footer on every non-homepage page, not     */
/*     something specific to /legal. Porting style.css's real grid rules  */
/*     here so every page gets the same working footer regardless of      */
/*     which base stylesheet it loads.                                    */
/* ---------------------------------------------------------------------- */
.footer { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 56.25em) {
	.footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* footer's own "about us" / "legal & terms" popups (footer.php, driven by
   the `legal` DB table) and the "Contact Us" popup use the old gradient
   button - now invisible (see TOKENS: --gradient-color is neutralized to
   none, and unlike .bttn--blue this one has no background-color fallback
   at all). Recoloring to signal-orange to match every other primary
   button on the site, instead of just patching in a fallback color. */
.bttn--gradiant {
	background-image: none !important;
	background-color: var(--signal) !important;
}
.bttn--gradiant::after { background-image: none !important; background-color: var(--signal-deep) !important; }
/* .popup__right's description paragraph uses .body-text (not .popup__text,
   already-fixed on the card info popup), which .homepage-dark also tints
   light-on-white - same white-popup contrast bug as the heading/close fix
   above, different class. */
.popup:not(.video-popup) .popup__right .body-text { color: var(--ink) !important; }
/* The base popup radius (3px) predates every other rounded surface on the
   site (cards, buttons, nav panels all use 0.6-1.4rem) - bumping it to
   match instead of leaving popups looking like a leftover component. */
.popup:not(.video-popup) .popup__content { border-radius: 1.2rem !important; }
.popup__btn-group .bttn { border-radius: 0.6rem !important; }
/* .bttn--red ( color: var(--color-danger), a vivid #dc2626 ) is used for
   every "Cancel"/"Close" button in the sign-in/sign-up modals and the
   footer popups - a color that appears nowhere else in the site (no red
   anywhere in the signal-orange/pcb-green/ink palette), so it reads as a
   mismatched leftover next to the buttons around it. These are dismiss
   actions, not delete/danger confirmations, so recoloring to the same
   neutral bench/ink secondary treatment already used for the header's
   Sign In button - not touching --color-danger itself, so any real
   destructive-action button elsewhere (e.g. dashboard delete) keeps its
   warning color. */
.modal-container .bttn--red,
.popup .bttn--red {
	background-color: var(--bench) !important;
	color: var(--ink) !important;
}
.modal-container .bttn--red::after,
.popup .bttn--red::after {
	background-color: var(--bench) !important;
}
.modal-container .bttn--red:hover,
.popup .bttn--red:hover {
	background-color: var(--line) !important;
}

/* ---------------------------------------------------------------------- */
/* 16. POPUP SYSTEM — the real root cause of "footer is broken" and       */
/*     "popups don't match". pages.css defines NOTHING for .popup,        */
/*     .popup__content, .popup__left/right, .popup__close, .composition,  */
/*     .book__form, .form__group/input/label - not colors, the whole      */
/*     thing. On any pages.css page (category, all_posts, and now legal/  */
/*     about), every popup (footer's About/Legal/Contact, and product     */
/*     card info popups once cards load) has no position:fixed, no        */
/*     hidden-by-default state, nothing - confirmed live: #about computed */
/*     to position:static, sitting inline in the footer at 428px tall,    */
/*     permanently visible, which is what was ballooning the footer to    */
/*     ~1900px. The color-only fixes above assumed this base layer        */
/*     existed (true on style.css pages) and only patched contrast/       */
/*     buttons - this section rebuilds the whole thing so it's correct    */
/*     everywhere regardless of which base stylesheet a page loads.       */
/* ---------------------------------------------------------------------- */
.popup {
	height: 100vh !important;
	width: 100% !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1000 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s ease, visibility 0.3s !important;
	background-color: rgba(18, 24, 26, 0.7) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.popup:target { opacity: 1 !important; visibility: visible !important; }
.popup:not(.video-popup) .popup__content {
	max-width: 74rem !important;
	width: 88vw !important;
	max-height: 84vh !important;
	overflow-y: auto !important;
	background-color: var(--paper) !important;
	box-shadow: 0 2rem 6rem rgba(18, 24, 26, 0.35) !important;
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	opacity: 0 !important;
	transform: scale(0.96) !important;
	transition: opacity 0.25s ease, transform 0.25s ease !important;
	padding: 0 !important;
	height: auto !important;
}
.popup:target .popup__content { opacity: 1 !important; transform: scale(1) !important; }
.popup:not(.video-popup) .popup__left {
	width: 40% !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	background: var(--bench) !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-content: flex-start !important;
}
.popup:not(.video-popup) .popup__right {
	width: 60% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding: 3.2rem 3rem !important;
	gap: 0.8rem;
}
/* .composition's old effect (three photos rotated/overlapping via
   absolute positioning) needs CSS pages.css never had - a plain, robust
   2-up image grid reads clean and can't break on a page missing the rest
   of that system. */
.popup .composition {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2px !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 24rem;
	position: static !important;
}
.popup .composition__photo {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 12rem;
	object-fit: cover !important;
	transform: none !important;
	outline: none !important;
}
.popup .composition__photo--p1 { grid-column: 1 / 3; }
.popup__text {
	font-family: var(--body-font-family);
	font-size: 1.45rem;
	line-height: 1.6;
	color: var(--ink);
	column-count: 1 !important;
	hyphens: none !important;
	margin-bottom: 1.6rem !important;
}
.popup:not(.video-popup) .popup__close:link,
.popup:not(.video-popup) .popup__close:visited {
	position: absolute !important;
	top: 1.2rem !important;
	right: 1.2rem !important;
	width: 3.2rem;
	height: 3.2rem;
	display: grid !important;
	place-items: center;
	border-radius: 50% !important;
	background-color: var(--bench) !important;
	font-size: 1.8rem;
	line-height: 1;
	padding: 0 !important;
}
.popup__btn-group {
	display: flex !important;
	gap: 1rem;
	margin-top: 0.8rem;
}
.popup__btn-group .bttn { float: none !important; }
@media (max-width: 700px) {
	.popup:not(.video-popup) .popup__content { flex-direction: column !important; width: 92vw !important; }
	.popup:not(.video-popup) .popup__left,
	.popup:not(.video-popup) .popup__right { width: 100% !important; }
	.popup .composition { min-height: 16rem; }
}

/* "Contact Us" footer popup form - .book__form / .form__group / .form__input
   / .form__label are also entirely absent from pages.css. */
.book__form { padding: 3.2rem 3rem; width: 100%; }
.book__form .heading-text { margin-bottom: 2rem !important; }
.form__group { position: relative; margin-bottom: 1.8rem; }
.form__input {
	width: 100% !important;
	padding: 1.2rem 1.5rem !important;
	font-family: var(--body-font-family) !important;
	font-size: 1.4rem !important;
	color: var(--ink) !important;
	background-color: var(--bench) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0.6rem !important;
	transition: border-color 0.2s ease !important;
}
.form__input:focus { outline: none; border-color: var(--signal) !important; }
.form__label {
	font-family: var(--body-font-family);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--muted);
	margin: 0.5rem 0 0 0.3rem;
	display: block;
	transition: opacity 0.2s ease;
}
.form__input:placeholder-shown + .form__label { opacity: 0; visibility: hidden; }
.appointment-btns { display: flex; gap: 1rem; margin-top: 0.6rem; }
.appointment-btns .bttn { float: none !important; }