/*
Theme Name: PhoneInsight
Theme URI: https://phoneinsight.net
Author: PhoneInsight
Description: A fully custom, professional phone-specification catalog theme inspired by the clarity and polish of Apple's and Google's product sites. Light theme, built for the PhoneInsight Importer plugin's `phone` custom post type. Includes a filterable database, product-style single phone pages with spec tabs, a compare tool, and full blog support. Optimized for performance and SEO (pairs with Yoast SEO).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoneinsight
Tags: custom-background, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, e-commerce, blog
*/

/* =================================================================
   1. RESET
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; } /* .pi-article-content below explicitly reverts this for real post content lists */
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =================================================================
   2. DESIGN TOKENS
   ================================================================= */
:root{
	/* Color */
	--pi-bg: #ffffff;
	--pi-bg-alt: #f5f5f7;
	--pi-bg-soft: #fafafa;
	--pi-surface: #ffffff;
	/* Product photos are supplied on solid white backgrounds -- every
	   container that frames a phone photo uses this token (not
	   --pi-bg-alt) so no grey seam shows around the image. */
	--pi-media-bg: #ffffff;
	--pi-text: #1d1d1f;
	--pi-text-secondary: #6e6e73;
	--pi-text-tertiary: #96969b;
	--pi-border: #e5e5e7;
	--pi-border-strong: #d2d2d7;

	--pi-accent: #000000;
	--pi-accent-dark: #1a1a1a;
	--pi-accent-light: #f0f0f0;
	--pi-accent-2: #000000;
	--pi-gradient: linear-gradient(135deg, #000000 0%, #434343 100%);
	--pi-gradient-soft: linear-gradient(135deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.03) 100%);

	--pi-success: #16a34a;
	--pi-success-bg: #eafaf0;
	--pi-danger: #e11d48;
	--pi-danger-bg: #fdecef;
	--pi-warning: #d97706;

	/* Type */
	--pi-font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
	--pi-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

	/* Radius */
	--pi-radius-sm: 10px;
	--pi-radius-md: 16px;
	--pi-radius-lg: 24px;
	--pi-radius-xl: 32px;
	--pi-radius-full: 999px;

	/* Shadow */
	--pi-shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04);
	--pi-shadow-md: 0 8px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
	--pi-shadow-lg: 0 24px 60px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.05);
	--pi-shadow-focus: 0 0 0 4px rgba(0,0,0,.18);

	/* Layout */
	--pi-container: 1320px;
	--pi-container-narrow: 820px;
	--pi-header-h: 72px;
	--pi-section-pad: clamp(56px, 8vw, 120px);

	/* Motion */
	--pi-ease: cubic-bezier(.16,1,.3,1);
	--pi-fast: .18s;
	--pi-med: .35s;
	--pi-slow: .6s;
}

/* =================================================================
   3. BASE
   ================================================================= */
html { font-size: 100%; }
body {
	font-family: var(--pi-font-body);
	background: var(--pi-bg);
	color: var(--pi-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
body.pi-noscroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pi-font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--pi-text);
}
h1 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
p { color: var(--pi-text-secondary); }
a { transition: color var(--pi-fast) var(--pi-ease); }

::selection { background: var(--pi-accent); color: #fff; }

:focus-visible {
	outline: none;
	box-shadow: var(--pi-shadow-focus);
	border-radius: 6px;
}

.pi-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--pi-text); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.pi-skip-link:focus { left: 0; }

.sr-only, .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =================================================================
   4. LAYOUT
   ================================================================= */
.pi-container { max-width: var(--pi-container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.pi-container-narrow { max-width: var(--pi-container-narrow); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.pi-section { padding-block: var(--pi-section-pad); }
.pi-section-alt { background: var(--pi-bg-alt); }
.pi-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.pi-section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pi-accent); margin-bottom: 12px; }
.pi-section-title { max-width: 640px; }
.pi-section-subtitle { margin-top: 10px; font-size: 1.05rem; max-width: 560px; }
.pi-section-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pi-accent); white-space: nowrap; }
.pi-section-link .pi-icon { width: 18px; height: 18px; transition: transform var(--pi-fast) var(--pi-ease); }
.pi-section-link:hover .pi-icon { transform: translateX(4px); }

.pi-grid { display: grid; gap: 24px; }
.pi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pi-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px){ .pi-grid-4, .pi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .pi-grid-2, .pi-grid-3, .pi-grid-4, .pi-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pi-grid-2, .pi-grid-3, .pi-grid-4, .pi-grid-5 { grid-template-columns: 1fr; } }

.pi-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* =================================================================
   5. BUTTONS
   ================================================================= */
.pi-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--pi-font-body); font-weight: 600; font-size: .95rem;
	padding: 14px 26px; border-radius: var(--pi-radius-full);
	transition: all var(--pi-fast) var(--pi-ease);
	border: 1.5px solid transparent; white-space: nowrap;
}
.pi-btn .pi-icon { width: 18px; height: 18px; }
.pi-btn-primary { background: var(--pi-text); color: #fff; }
.pi-btn-primary:hover { background: #000; box-shadow: var(--pi-shadow-md); }
.pi-btn-accent { background: var(--pi-accent); color: #fff; }
.pi-btn-accent:hover { background: var(--pi-accent-dark); box-shadow: var(--pi-shadow-md); }
.pi-btn-secondary { background: var(--pi-bg-alt); color: var(--pi-text); }
.pi-btn-secondary:hover { background: var(--pi-border); }
.pi-btn-outline { background: transparent; border-color: var(--pi-border-strong); color: var(--pi-text); }
.pi-btn-outline:hover { border-color: var(--pi-text); }
.pi-btn-ghost { background: transparent; color: var(--pi-accent); padding-inline: 4px; }
.pi-btn-ghost:hover { color: var(--pi-accent-dark); }
.pi-btn-sm { padding: 9px 18px; font-size: .85rem; }
.pi-btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.pi-btn-block { width: 100%; }
.pi-btn[disabled] { opacity: .5; pointer-events: none; }

.pi-btn-icon {
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pi-bg-alt); transition: all var(--pi-fast) var(--pi-ease);
}
.pi-btn-icon:hover { background: var(--pi-border); }
.pi-btn-icon:disabled { opacity: .4; pointer-events: none; }
.pi-btn-icon.is-active { background: var(--pi-accent); color: #fff; }

/* =================================================================
   6. FORMS
   ================================================================= */
.pi-input, .pi-select, .pi-textarea {
	width: 100%; padding: 13px 16px; border: 1.5px solid var(--pi-border);
	border-radius: var(--pi-radius-sm); background: var(--pi-bg); font-size: .95rem;
	transition: border-color var(--pi-fast) var(--pi-ease);
}
.pi-input:focus, .pi-select:focus, .pi-textarea:focus { border-color: var(--pi-accent); }
.pi-field { margin-bottom: 18px; }
.pi-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.pi-textarea { min-height: 140px; resize: vertical; }

/* Base (no-JS) select: appearance:none strips the browser's own
   inconsistent, unstyleable native arrow in favor of the theme's icon.
   main.js progressively enhances this into a fully custom dropdown --
   a native <select>'s OPEN popup can't be restyled to match a theme in
   most browsers, appearance:none only ever fixes the closed state. */
.pi-select-wrap { position: relative; }
.pi-select-wrap .pi-select {
	appearance: none; -webkit-appearance: none;
	padding-right: 40px; font-weight: 600; cursor: pointer;
	border-radius: var(--pi-radius-sm);
}
.pi-select-wrap > .pi-select-chevron {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: var(--pi-text-tertiary); pointer-events: none;
}

/* JS-enhanced state: the native select is kept (for its value/form
   submission) but visually hidden; .pi-select-display/-menu are built
   and inserted by main.js. */
.pi-select-wrap.is-enhanced select { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.pi-select-wrap.is-enhanced > .pi-select-chevron { display: none; }

.pi-select-display {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; padding: 13px 16px; border: 1.5px solid var(--pi-border); border-radius: var(--pi-radius-sm);
	background: var(--pi-bg); font-weight: 600; font-size: .95rem; cursor: pointer; text-align: left;
	transition: border-color var(--pi-fast) var(--pi-ease);
}
.pi-select-display:hover { border-color: var(--pi-border-strong); }
.pi-select-display.is-open, .pi-select-display:focus-visible { border-color: var(--pi-accent); }
.pi-select-display .pi-select-chevron { width: 16px; height: 16px; color: var(--pi-text-tertiary); flex-shrink: 0; transition: transform var(--pi-fast) var(--pi-ease); }
.pi-select-display.is-open .pi-select-chevron { transform: rotate(180deg); }

.pi-select-menu {
	position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; width: max-content; z-index: 50;
	background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-md);
	box-shadow: var(--pi-shadow-lg); padding: 6px; list-style: none; margin: 0;
}
.pi-select-menu[hidden] { display: none; }
.pi-select-menu li {
	padding: 10px 14px; border-radius: 8px; font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap;
	color: var(--pi-text-secondary); transition: background var(--pi-fast) var(--pi-ease), color var(--pi-fast) var(--pi-ease);
}
.pi-select-menu li:hover { background: var(--pi-bg-alt); color: var(--pi-text); }
.pi-select-menu li.is-selected { background: var(--pi-text); color: #fff; font-weight: 600; }

/* =================================================================
   7. HEADER / NAVIGATION
   ================================================================= */
.pi-announcement-bar { background: var(--pi-text); color: #fff; }
.pi-announcement-inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 10px; position: relative; font-size: .84rem; font-weight: 600; text-align: center; }
.pi-announcement-inner a { text-decoration: underline; text-underline-offset: 3px; }
.pi-announcement-close { position: absolute; right: clamp(20px,4vw,48px); display: inline-flex; opacity: .7; }
.pi-announcement-close:hover { opacity: 1; }
.pi-announcement-close .pi-icon { width: 16px; height: 16px; }

.pi-header {
	position: sticky; top: 0; z-index: 500;
	height: var(--pi-header-h);
	display: flex; align-items: center;
	background: rgba(255,255,255,.78);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--pi-fast) var(--pi-ease), box-shadow var(--pi-fast) var(--pi-ease);
}
.pi-header.is-scrolled { border-bottom-color: var(--pi-border); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.pi-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }

.pi-logo { display: flex; align-items: center; gap: 10px; font-family: var(--pi-font-display); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.pi-logo img { max-height: 32px; width: auto; }
@media (max-width: 420px){
	.pi-logo { font-size: .95rem; gap: 6px; }
	.pi-logo img { max-height: 24px; }
	.pi-logo-mark { width: 24px; height: 24px; }
	.pi-logo-mark .pi-icon { width: 14px; height: 14px; }
	.pi-header-actions { gap: 4px; }
	.pi-header-actions .pi-btn-icon { width: 38px; height: 38px; }
}
.pi-logo-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--pi-gradient); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pi-logo-mark .pi-icon { width: 17px; height: 17px; stroke-width: 2.2; }

.pi-primary-nav { display: none; }
.pi-primary-nav > ul { display: flex; align-items: center; gap: 4px; }
.pi-menu-item { position: relative; }
.pi-menu-link {
	display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--pi-radius-full);
	font-weight: 600; font-size: .92rem; color: var(--pi-text); transition: background var(--pi-fast) var(--pi-ease);
}
.pi-menu-item.pi-has-children { display: flex; align-items: center; }
.pi-menu-link:hover, .pi-menu-item.pi-current > .pi-menu-link { background: var(--pi-bg-alt); }
.pi-submenu-toggle { display: inline-flex; padding: 8px; margin-left: -6px; color: var(--pi-text-secondary); }
.pi-submenu-toggle .pi-icon { width: 15px; height: 15px; transition: transform var(--pi-fast) var(--pi-ease); }
.pi-menu-item.pi-open .pi-submenu-toggle .pi-icon { transform: rotate(180deg); }

/* .pi-sub-menu-panel is the dropdown's visual shell (position, surface,
   shadow) -- .pi-sub-menu-search and .pi-sub-menu (the actual <ul>) both
   live inside it, so the filter box can sit pinned above a scrolling/
   reflowing list without being part of the list itself. */
.pi-sub-menu-panel {
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
	/* Belt-and-suspenders cap: main.js sizes the grid itself to fit
	   (see updateSubmenuDividers()), this just guarantees the panel can
	   never render wider than the viewport even in an edge case that
	   estimate gets wrong (or before JS has run). */
	max-width: calc(100vw - 40px);
	background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-md);
	box-shadow: var(--pi-shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: all var(--pi-fast) var(--pi-ease);
}
.pi-menu-item.pi-open > .pi-sub-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.pi-sub-menu .pi-menu-link { display: flex; border-radius: var(--pi-radius-sm); padding: 10px 12px; }

/* Hidden until there are enough items that scanning the list by eye
   stops being realistic (50+ brands, eventually) -- same item-count
   threshold as the multi-column layout below, so both kick in together.
   Filled, borderless field (matches .pi-filter-option/.pi-widget/etc
   elsewhere in the theme) rather than a bordered box -- an outlined,
   unfilled input sitting on a panel of the exact same white read as a
   redundant "box inside a box" next to the panel's own border. */
.pi-sub-menu-search { display: none; }
.pi-sub-menu-panel:has( li:nth-child(7) ) .pi-sub-menu-search {
	display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 8px;
	background: var(--pi-bg-alt); border-radius: var(--pi-radius-sm);
}
.pi-sub-menu-search .pi-icon { width: 15px; height: 15px; color: var(--pi-text-tertiary); flex-shrink: 0; }
.pi-sub-menu-search-input {
	-webkit-appearance: none; appearance: none;
	border: none; outline: none; box-shadow: none; background: transparent;
	font-size: .88rem; width: 100%; color: var(--pi-text);
}
.pi-sub-menu-search-input:hover,
.pi-sub-menu-search-input:focus,
.pi-sub-menu-search-input:focus-visible { border: none; outline: none; box-shadow: none; }
.pi-sub-menu-item-hidden { display: none !important; }
.pi-sub-menu-no-results { padding: 14px 10px; text-align: center; color: var(--pi-text-tertiary); font-size: .85rem; }

/* A long submenu (e.g. every brand under "Phones") reads as one tall
   scrolling column otherwise -- past 6 items this switches to a wider
   multi-column panel instead, filled top-to-bottom then across (like a
   sitemap column). The panel always shows exactly 3 columns (4 on a
   wide desktop screen, via the media query below) -- never more, so
   its width stays fixed and predictable regardless of how many brands
   there are. Row count is a CSS custom property, not fixed: main.js
   (updateSubmenuDividers()) solves for however many rows are needed to
   fit every item within that fixed column count, so a long brand list
   makes the columns taller rather than adding more of them. max-height
   + overflow-y is the scroll for when even that gets tall -- vertical,
   not horizontal, since the column count itself never grows. Desktop
   dropdown only: the mobile drawer's own .pi-sub-menu rules further
   down stay single-column, which is what a narrow screen actually
   needs. The search filter box above this list is a sibling, not a
   child, of it, so it stays in place while this scrolls. */
.pi-primary-nav .pi-sub-menu:has( li:nth-child(7) ) {
	display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--pi-submenu-rows, 6), auto);
	grid-auto-columns: 150px; column-gap: 28px; row-gap: 0; padding-block: 4px;
	max-width: calc(150px * 3 + 28px * 2); max-height: var(--pi-submenu-max-height, 264px); overflow-y: auto; overflow-x: hidden;
}
.pi-primary-nav .pi-sub-menu:has( li:nth-child(7) ) > li { white-space: nowrap; }
@media (min-width: 1400px) {
	.pi-primary-nav .pi-sub-menu:has( li:nth-child(7) ) { max-width: calc(150px * 4 + 28px * 3); }
}
/* Column-start items get a divider on their left, toggled by main.js
   (updateSubmenuDividers()) rather than a fixed nth-child position --
   nth-child counts filtered-out (display:none) items too, so a static
   rule would leave a divider stuck on whatever was originally the 5th
   item even after filtering left it as the only thing on screen. With
   no row-gap between items, each one's border-left touches the next
   row's seamlessly, reading as one continuous line down the column
   boundary. A plain full-strength edge-to-edge rule read as a harsh
   spreadsheet line -- a faint tint plus more padding either side of it
   makes it a quiet visual cue instead of a hard ruled border. */
.pi-primary-nav .pi-sub-menu > li.pi-sub-menu-col-divider {
	border-left: 1px solid rgba(0,0,0,.08);
	padding-left: 18px;
}

.pi-header-actions { display: flex; align-items: center; gap: 8px; }
.pi-compare-badge {
	/* Hidden by default via display:none (not the [hidden] attribute --
	   that loses to this class's own display:flex on specificity, which
	   is exactly why the badge was stuck showing "0"). JS toggles the
	   .is-visible class once there's an actual count to show. */
	position: absolute; top: -2px; right: -2px; background: var(--pi-accent); color: #fff;
	font-size: .65rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%;
	display: none; align-items: center; justify-content: center; padding: 0 3px;
}
.pi-compare-badge.is-visible { display: flex; }
.pi-header-actions .pi-btn-icon { position: relative; }
.pi-menu-toggle { display: inline-flex; }
@media (min-width: 1080px){
	.pi-primary-nav { display: block; }
	.pi-menu-toggle { display: none; }
}

/* Search flyout */
.pi-search-flyout {
	position: fixed; inset: 0; z-index: 900; background: rgba(29,29,31,.4);
	opacity: 0; visibility: hidden; transition: opacity var(--pi-med) var(--pi-ease);
	backdrop-filter: blur(4px);
	/* Flex + a top padding that clears the sticky header, so the panel
	   never sits flush against the very top edge of the viewport. */
	display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
	padding: calc(var(--pi-header-h) + 24px) 20px 24px;
}
.pi-search-flyout.is-open { opacity: 1; visibility: visible; }
.pi-search-panel {
	position: relative;
	background: var(--pi-surface); padding: clamp(20px,5vw,40px); border-radius: var(--pi-radius-lg);
	transform: translateY(-24px); transition: transform var(--pi-med) var(--pi-ease);
	max-width: 720px; width: 100%; box-shadow: var(--pi-shadow-lg);
}
.pi-search-flyout.is-open .pi-search-panel { transform: translateY(0); }
.pi-search-form { position: relative; }
/* Direct-child combinator on purpose: the close button (below) also
   contains a .pi-icon now that it lives inside this form, and it needs
   its own positioning, not this one. */
.pi-search-form > .pi-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--pi-text-tertiary); pointer-events: none; }
.pi-search-input { padding-left: 50px; padding-right: 48px; font-size: 1.15rem; padding-block: 16px; border-radius: var(--pi-radius-full); }
/* Suppress the browser's own native clear (x) button on type="search" --
   the theme already provides its own close control, so having both
   showed two separate x buttons at once. */
.pi-search-input::-webkit-search-cancel-button,
.pi-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.pi-search-results { margin-top: 20px; display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; transition: opacity .15s ease; }
.pi-search-results.is-loading { opacity: .6; }
.pi-search-status { padding: 16px; margin: 0; color: var(--pi-text-tertiary); font-size: .9rem; }
.pi-search-result { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--pi-radius-sm); }
.pi-search-result:hover { background: var(--pi-bg-alt); }
.pi-search-result img { width: 46px; height: 46px; object-fit: contain; background: var(--pi-media-bg); border: 1px solid var(--pi-border); border-radius: 8px; }
.pi-search-result-brand { font-size: .78rem; color: var(--pi-text-tertiary); }
/* Lives inside .pi-search-form now (see header.php) and is centered on
   the input itself, the same way the search icon is on the left --
   positioning it against the panel's corner instead (an earlier
   attempt) put it outside the input's own box, where the input's own
   solid background could paint over it depending on stacking order. */
.pi-search-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; }

/* Mobile menu */
.pi-mobile-menu {
	position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 950;
	background: var(--pi-surface); box-shadow: var(--pi-shadow-lg);
	transform: translateX(100%); transition: transform var(--pi-med) var(--pi-ease);
	padding: 24px; overflow-y: auto;
}
.pi-mobile-menu.is-open { transform: translateX(0); }
.pi-mobile-menu-overlay {
	position: fixed; inset: 0; z-index: 940; background: rgba(29,29,31,.4);
	opacity: 0; visibility: hidden; transition: opacity var(--pi-med) var(--pi-ease);
}
.pi-mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }
.pi-mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
/* .pi-has-children is display:flex (row) at the base .pi-menu-item
   level so the desktop dropdown trigger sits snug next to its label --
   fine for a horizontal top bar, but that same <li> is also the parent
   of .pi-sub-menu-panel once it's open. Without flex-wrap, the panel
   was just a third item in that same row: squeezed into whatever
   horizontal space the link and toggle button didn't use, rather than
   dropping onto its own line below them -- which is what actually
   produced the "cut off, starts partway across" look. flex-wrap here,
   plus flex-basis:100% on the panel itself (below) so it can never fit
   beside the other two regardless of exact content widths, is what
   forces it onto a guaranteed full-width line of its own. */
.pi-mobile-menu .pi-menu-item.pi-has-children { flex-wrap: wrap; }
.pi-mobile-menu .pi-sub-menu-panel {
	position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none;
	padding: 4px 0 8px 14px; display: none;
	flex-basis: 100%; max-width: none;
}
.pi-mobile-menu .pi-menu-item.pi-open > .pi-sub-menu-panel { display: block; }
/* A long brand list otherwise expands the whole drawer to match it,
   pushing Compare/Blog/About/Contact far below the fold -- capping the
   list itself (not the whole panel, so the filter box above stays
   pinned in view rather than scrolling away with it) keeps opening
   "Phones" from taking over the entire menu. */
.pi-mobile-menu .pi-sub-menu { max-height: 45vh; overflow-y: auto; }
.pi-mobile-menu .pi-menu-link { display: flex; padding: 13px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--pi-border); border-radius: 0; }
/* .pi-has-children makes the <li> a flex row (link + toggle button side
   by side) so the desktop dropdown trigger sits snug next to its label
   -- fine inline in a horizontal bar, but in this vertical list it left
   the link shrunk to just its own text width instead of filling the row
   like every other item, with the toggle floating right after it rather
   than pinned to the row's far edge. */
.pi-mobile-menu .pi-menu-item.pi-has-children > .pi-menu-link { flex: 1 1 auto; border-radius: 0; }
.pi-mobile-menu .pi-submenu-toggle { padding: 13px 8px; margin-left: 0; }
@media (min-width: 1080px){ .pi-mobile-menu, .pi-mobile-menu-overlay, .pi-menu-toggle { display: none; } }

/* =================================================================
   8. HERO
   ================================================================= */
.pi-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 130px); }
.pi-hero-bg {
	position: absolute; inset: -20% -10%; z-index: 0; opacity: .55; pointer-events: none;
	background:
		radial-gradient(50% 50% at 20% 20%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(45% 45% at 85% 30%, rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 70%);
	filter: blur(10px);
}
.pi-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.pi-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--pi-radius-full);
	background: var(--pi-accent-light); color: var(--pi-accent-dark); font-weight: 700; font-size: .82rem; margin-bottom: 22px;
}
.pi-hero-title { white-space: pre-line; margin-bottom: 20px; }
.pi-hero-subtitle { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 520px; margin-bottom: 34px; }
.pi-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.pi-hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.pi-hero-stat-num { font-family: var(--pi-font-display); font-size: 1.8rem; font-weight: 800; }
.pi-hero-stat-label { font-size: .85rem; color: var(--pi-text-secondary); }

/* Just the product photo -- no card/frame wrapper, no floating badges. */
.pi-hero-media { position: relative; display: flex; align-items: center; justify-content: center; }
.pi-hero-media-img { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)); }
.pi-hero-media-placeholder { width: 140px; height: 140px; color: var(--pi-text-tertiary); }
@media (max-width: 980px){
	.pi-hero-inner { grid-template-columns: 1fr; text-align: center; }
	.pi-hero-subtitle { margin-inline: auto; }
	.pi-hero-actions, .pi-hero-stats { justify-content: center; }
	.pi-hero-media { margin-top: 20px; }
}

/* Simple inner page hero (archives, pages, blog) */
.pi-page-hero { padding-block: clamp(44px, 6vw, 76px); border-bottom: 1px solid var(--pi-border); background: var(--pi-bg-alt); }
.pi-page-hero-title { margin-bottom: 12px; }
.pi-page-hero-title-android { display: flex; align-items: center; gap: 14px; }
.pi-page-hero-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.pi-page-hero-desc { max-width: 640px; font-size: 1.05rem; }
.pi-page-hero-media { margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.pi-page-hero-media img { width: 96px; height: 96px; object-fit: contain; background: var(--pi-bg); border-radius: var(--pi-radius-md); padding: 10px; box-shadow: var(--pi-shadow-sm); }

/* =================================================================
   9. BADGES / TAGS
   ================================================================= */
.pi-badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pi-radius-full);
	background: var(--pi-bg-alt); font-size: .76rem; font-weight: 700; color: var(--pi-text-secondary);
}
.pi-badge-accent { background: var(--pi-accent-light); color: var(--pi-accent-dark); }
.pi-badge-success { background: var(--pi-success-bg); color: var(--pi-success); }
.pi-badge-gradient { background: var(--pi-gradient); color: #fff; }

/* =================================================================
   10. PHONE CARD
   ================================================================= */
.pi-phone-card {
	/* No explicit height here on purpose -- it fights the grid/flex
	   container's default stretch alignment in some browsers and makes
	   cards fall back to their own content height instead of matching
	   the tallest sibling in the row. Stretch alone handles it. */
	position: relative; background: var(--pi-surface); border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-lg); overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow var(--pi-fast) var(--pi-ease), border-color var(--pi-fast) var(--pi-ease);
}
.pi-phone-card:hover { box-shadow: var(--pi-shadow-md); border-color: var(--pi-border-strong); }
.pi-phone-card-media {
	position: relative; aspect-ratio: 1/.92; background: var(--pi-media-bg);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pi-phone-card-media img { max-height: 100%; width: auto; object-fit: contain; }
.pi-phone-card-compare {
	position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.92); border: 1px solid var(--pi-border); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
	box-shadow: var(--pi-shadow-sm); color: var(--pi-text-secondary); transition: all var(--pi-fast) var(--pi-ease);
}
.pi-phone-card-compare:hover, .pi-phone-card-compare.is-active { background: var(--pi-text); border-color: var(--pi-text); color: #fff; }
.pi-phone-card-compare .pi-icon { width: 16px; height: 16px; }
.pi-phone-card-os {
	position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255,255,255,.92); border: 1px solid var(--pi-border); backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--pi-shadow-sm); z-index: 2;
}
.pi-phone-card-os img { width: 16px; height: 16px; object-fit: contain; }
.pi-phone-card-os .pi-icon { width: 16px; height: 16px; color: var(--pi-text-secondary); }
/* iOS has no per-version logo file to size a circle around -- a plain
   text badge instead, so the shape follows the word rather than being
   squeezed into a fixed icon-sized circle. */
.pi-phone-card-os-text {
	width: auto; height: auto; border-radius: var(--pi-radius-full);
	padding: 4px 9px; font-size: .66rem; font-weight: 700; letter-spacing: .01em;
	color: var(--pi-text-secondary);
}
.pi-phone-card-body { background: var(--pi-bg-alt); padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pi-phone-card-brand { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pi-text-tertiary); }
.pi-phone-card-name { font-family: var(--pi-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.pi-phone-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.pi-phone-card-badges .pi-badge { background: var(--pi-surface); border: 1px solid var(--pi-border); }
.pi-phone-card-price { font-weight: 700; color: var(--pi-text); margin-top: 4px; }
.pi-phone-card-score { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .78rem; color: var(--pi-text-secondary); }
.pi-phone-card-score .pi-icon { width: 13px; height: 13px; color: var(--pi-accent); }
a.pi-phone-card-link { position: absolute; inset: 0; z-index: 1; }
.pi-phone-card-compare { z-index: 2; }

/* Carousel */
.pi-carousel { position: relative; }
.pi-carousel-track {
	/* overflow-y: hidden, not visible -- some browsers still treat
	   "visible" as scroll-capable once overflow-x is scrollable, letting
	   a stray wheel/trackpad nudge shift scrollTop by a couple of pixels
	   with nothing to snap it back (no scroll-snap-type on the y axis),
	   which read as the card silently drifting upward on hover. Hidden
	   makes that scroll impossible outright; the padding below gives
	   hover shadows/badges room so they don't get clipped by it. */
	display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
	padding-block: 10px 8px;
	scrollbar-width: none;
}
.pi-carousel-track::-webkit-scrollbar { display: none; }
.pi-carousel-track > * { scroll-snap-align: start; flex: 0 0 auto; width: min(280px, 78vw); }
.pi-carousel-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 20px; }

/* =================================================================
   11. ARCHIVE / FILTERS
   ================================================================= */
.pi-archive-layout { display: grid; grid-template-columns: 264px 1fr; gap: 40px; align-items: start; }
@media (max-width: 960px){ .pi-archive-layout { grid-template-columns: 1fr; } }

.pi-filters { position: sticky; top: calc(var(--pi-header-h) + 20px); background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-lg); padding: 22px; }
.pi-filter-group { padding-block: 16px; border-bottom: 1px solid var(--pi-border); }
.pi-filter-group:first-child { padding-top: 0; }
.pi-filter-group:last-child { border-bottom: none; }
.pi-filter-title { font-weight: 700; font-size: .92rem; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
summary.pi-filter-title { cursor: pointer; list-style: none; user-select: none; }
summary.pi-filter-title::-webkit-details-marker { display: none; }
summary.pi-filter-title::marker { content: ''; }
.pi-filter-caret { width: 16px; height: 16px; color: var(--pi-text-tertiary); flex-shrink: 0; transition: transform var(--pi-fast) var(--pi-ease); }
details.pi-filter-group[open] .pi-filter-caret { transform: rotate(180deg); }
.pi-filter-list {
	display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; overflow-x: hidden;
	padding-right: 6px;
	scrollbar-width: thin; scrollbar-color: var(--pi-border-strong) transparent;
}
.pi-filter-list::-webkit-scrollbar { width: 6px; }
.pi-filter-list::-webkit-scrollbar-track { background: transparent; }
.pi-filter-list::-webkit-scrollbar-thumb { background: var(--pi-border-strong); border-radius: 999px; }
.pi-filter-option { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: .9rem; border-radius: 8px; cursor: pointer; }
/* The name truncates before the count ever gets squeezed out -- it was
   losing that fight before, which is why the count read as "invisible":
   it was being pushed past the visible edge instead. */
.pi-filter-option > span:not(.pi-filter-option-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pi-filter-option:hover { background: var(--pi-bg-alt); }
.pi-filter-option input { accent-color: var(--pi-accent); width: 16px; height: 16px; }
.pi-filter-option-count { margin-left: auto; color: var(--pi-text-tertiary); font-size: .8rem; flex-shrink: 0; }
.pi-filter-option-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
/* Same filled, borderless field as the "Phones" mega-menu's own filter
   box (.pi-sub-menu-search) -- a sibling of .pi-filter-list, not a
   child of it, so it stays put above the list rather than scrolling
   away with it. */
.pi-filter-group-search {
	display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 10px;
	background: var(--pi-bg-alt); border-radius: var(--pi-radius-sm);
}
.pi-filter-group-search .pi-icon { width: 15px; height: 15px; color: var(--pi-text-tertiary); flex-shrink: 0; }
.pi-filter-group-search-input {
	-webkit-appearance: none; appearance: none;
	border: none; outline: none; box-shadow: none; background: transparent;
	font-size: .88rem; width: 100%; color: var(--pi-text);
}
.pi-filter-group-search-input:hover,
.pi-filter-group-search-input:focus,
.pi-filter-group-search-input:focus-visible { border: none; outline: none; box-shadow: none; }
.pi-filter-option-hidden { display: none !important; }
.pi-filter-group-no-results { padding: 10px 4px; text-align: center; color: var(--pi-text-tertiary); font-size: .85rem; }
.pi-filter-clear { font-size: .8rem; font-weight: 600; color: var(--pi-accent); }
/* The wrapper owns the border and the (modest, not a full pill) rounded
   corners; input and button are plain flex segments inside it -- the
   button is a visually distinct attached block on the outside-right,
   not floating on top of the input. */
.pi-filter-search {
	display: flex; align-items: stretch; background: var(--pi-bg);
	border: 1.5px solid var(--pi-border); border-radius: var(--pi-radius-sm);
	overflow: hidden; transition: border-color var(--pi-fast) var(--pi-ease);
}
.pi-filter-search:focus-within { border-color: var(--pi-accent); }
.pi-filter-search input {
	flex: 1 1 auto; min-width: 0; border: none; border-radius: 0; background: transparent;
	padding: 10px 14px; font-size: .88rem;
}
.pi-filter-search input:focus { border-color: transparent; }
.pi-filter-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pi-filter-search-btn {
	flex: 0 0 auto; width: 44px;
	display: flex; align-items: center; justify-content: center;
	background: var(--pi-bg-alt); color: var(--pi-text-secondary); border-left: 1.5px solid var(--pi-border);
	transition: background var(--pi-fast) var(--pi-ease), color var(--pi-fast) var(--pi-ease);
}
.pi-filter-search-btn .pi-icon { width: 16px; height: 16px; }
.pi-filter-search-btn:hover { background: var(--pi-accent); color: #fff; border-color: var(--pi-accent); }
@media (max-width: 700px){
	.pi-filter-search input { padding-block: 13px; font-size: 1rem; }
	.pi-filter-search-btn { width: 46px; }
}
.pi-filter-mobile-bar { display: none; }
.pi-filter-toggle { display: none; }
@media (max-width: 960px){
	.pi-filters { position: fixed; inset: 0 0 0 auto; width: min(360px,88vw); z-index: 950; border-radius: 0; overflow-y: auto; transform: translateX(100%); transition: transform var(--pi-med) var(--pi-ease); }
	.pi-filters.is-open { transform: translateX(0); }
	.pi-filter-mobile-bar { display: flex; }
	.pi-filter-toggle { display: inline-flex; }
}

#pi-results { transition: opacity .2s ease; }
#pi-results.is-loading { opacity: .5; pointer-events: none; }
.pi-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.pi-toolbar-count { color: var(--pi-text-secondary); font-size: .92rem; white-space: nowrap; }
.pi-toolbar-search { flex: 1 1 260px; max-width: 420px; }
.pi-toolbar-search .pi-filter-search input { padding-block: 12px; }
.pi-toolbar-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 700px){ .pi-toolbar-search { order: 3; flex-basis: 100%; max-width: none; } }
.pi-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pi-active-filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pi-text); color: #fff; padding: 6px 10px 6px 14px; border-radius: var(--pi-radius-full); font-size: .8rem; font-weight: 600; }
.pi-active-filter-chip button { display: inline-flex; opacity: .7; }
.pi-active-filter-chip button:hover { opacity: 1; }

.pi-empty-state { text-align: center; padding: 80px 20px; }
.pi-empty-state .pi-icon { width: 52px; height: 52px; color: var(--pi-text-tertiary); margin-bottom: 20px; }

/* =================================================================
   12. PAGINATION
   ================================================================= */
.pi-pagination ul { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.pi-pagination a, .pi-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding-inline: 8px;
	border-radius: var(--pi-radius-full); font-weight: 600; font-size: .9rem; border: 1px solid transparent;
}
.pi-pagination a:hover { border-color: var(--pi-border-strong); }
.pi-pagination .current { background: var(--pi-text); color: #fff; }
.pi-pagination .dots { border: none; }

/* =================================================================
   13. BREADCRUMBS
   ================================================================= */
.pi-breadcrumbs { padding-block: 18px; }
.pi-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--pi-text-tertiary); }
.pi-breadcrumbs a:hover { color: var(--pi-accent); }
.pi-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.pi-crumb-sep { width: 13px; height: 13px; }
.pi-breadcrumbs [aria-current="page"] { color: var(--pi-text); font-weight: 600; }

/* =================================================================
   14. SINGLE PHONE PAGE
   ================================================================= */
.pi-phone-hero { padding-block: 40px clamp(40px,6vw,72px); border-bottom: 1px solid var(--pi-border); }
.pi-phone-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px){ .pi-phone-hero-grid { grid-template-columns: 1fr; } }

.pi-phone-gallery-main {
	/* Capped width + centered, rather than stretching to fill the whole
	   grid column: at full column width (~600px) a narrow product shot
	   (older/feature-phone photos especially) was lost in a huge sea of
	   empty white space. Flat white background, no gradient/tint. */
	position: relative; aspect-ratio: 1/1; max-width: 380px; margin-inline: auto;
	background: var(--pi-media-bg); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-lg);
	display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden;
}
.pi-phone-gallery-main img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(0,0,0,.12)); }
.pi-phone-gallery-os {
	position: absolute; top: 16px; right: 16px; width: 60px; height: 60px; border-radius: 50%;
	background: rgba(255,255,255,.95); border: 1px solid var(--pi-border); box-shadow: var(--pi-shadow-sm);
	display: flex; align-items: center; justify-content: center; padding: 10px; z-index: 2;
	transition: border-color var(--pi-fast) var(--pi-ease), box-shadow var(--pi-fast) var(--pi-ease);
}
.pi-phone-gallery-os:hover { border-color: var(--pi-border-strong); box-shadow: var(--pi-shadow-md); }
.pi-phone-gallery-os img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.pi-phone-gallery-os .pi-icon { width: 100%; height: 100%; color: var(--pi-text-secondary); }
/* iOS has no per-version logo file to size a circle around -- a plain
   text badge instead, so the shape follows the word rather than being
   squeezed into a fixed icon-sized circle. */
.pi-phone-gallery-os-text {
	width: auto; height: auto; border-radius: var(--pi-radius-full);
	padding: 8px 14px; font-weight: 700; font-size: .85rem; letter-spacing: .01em;
	color: var(--pi-text-secondary);
}
.pi-phone-gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.pi-phone-gallery-thumb { width: 64px; height: 64px; border-radius: var(--pi-radius-sm); border: 1.5px solid var(--pi-border); background: var(--pi-media-bg); padding: 6px; }
.pi-phone-gallery-thumb.is-active { border-color: var(--pi-accent); }

.pi-phone-title-block .pi-badge { margin-bottom: 16px; }
.pi-phone-title-block h1 { margin-bottom: 10px; }
.pi-phone-tagline { font-size: 1.1rem; margin-bottom: 24px; }
.pi-phone-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 28px; }
.pi-phone-price { font-family: var(--pi-font-display); font-size: 2rem; font-weight: 800; }
.pi-phone-price-note { color: var(--pi-text-tertiary); font-size: .85rem; }
.pi-phone-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

.pi-quick-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 620px){ .pi-quick-specs { grid-template-columns: repeat(2, 1fr); } }
.pi-quick-spec-item { background: var(--pi-bg-alt); border-radius: var(--pi-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pi-quick-spec-item .pi-icon { color: var(--pi-accent); }
.pi-quick-spec-label { font-size: .72rem; color: var(--pi-text-tertiary); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pi-quick-spec-value { font-weight: 700; font-size: .92rem; line-height: 1.35; }
.pi-quick-spec-android-logo { width: 20px; height: 20px; object-fit: contain; }
.pi-quick-spec-ios-logo.pi-icon { width: 20px; height: 20px; color: var(--pi-accent); }
a.pi-quick-spec-value-link { color: inherit; text-decoration: none; }
a.pi-quick-spec-value-link:hover { color: var(--pi-accent); }

.pi-sticky-bar {
	/* Fades in/out rather than sliding -- a translateY animation on a
	   sticky + backdrop-filter element sitting directly against the
	   header's own sticky + backdrop-filter was producing a rendering
	   seam/glitch line where the two met during the transition. */
	position: sticky; top: var(--pi-header-h); z-index: 300; background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--pi-border); opacity: 0; visibility: hidden; transition: opacity var(--pi-med) var(--pi-ease), visibility var(--pi-med);
}
.pi-sticky-bar.is-visible { opacity: 1; visibility: visible; }
.pi-sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.pi-sticky-bar-name { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.pi-sticky-bar-name img { width: 34px; height: 34px; object-fit: contain; background: var(--pi-media-bg); border: 1px solid var(--pi-border); border-radius: 8px; }

/* Spec tabs */
.pi-spec-section { padding-block: var(--pi-section-pad); }
.pi-spec-tabs { display: grid !important; grid-template-columns: 240px 1fr !important; gap: 40px; align-items: start; }
@media (max-width: 860px){ .pi-spec-tabs { grid-template-columns: 1fr !important; } }
.pi-spec-tab-nav { position: sticky; top: calc(var(--pi-header-h) + 20px); display: flex; flex-direction: column; gap: 4px; }
.pi-spec-tab-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--pi-radius-md); font-weight: 600; font-size: .92rem; color: var(--pi-text-secondary); text-align: left; }
.pi-spec-tab-btn .pi-icon { color: var(--pi-text-tertiary); }
.pi-spec-tab-btn:hover { background: var(--pi-bg-alt); }
.pi-spec-tab-btn.is-active { background: var(--pi-text); color: #fff; }
.pi-spec-tab-btn.is-active .pi-icon { color: #fff; }
@media (max-width: 860px){ .pi-spec-tab-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .pi-spec-tab-btn { flex: 0 0 auto; } }

/* Full Specifications only -- Compare's reuse of this same tab markup
   gets its own per-panel border further down, so this is scoped to avoid
   doubling up there. A category with a short table (e.g. "Launch", almost
   always just Announced+Status) sitting next to the full, uncapped
   category sidebar leaves real empty space below it -- align-self:stretch
   claims that space as part of this column (no visible border/frame
   around it, just breathing room) instead of leaving a gap after it. */
#pi-full-specs-section .pi-spec-tab-panels {
	align-self: stretch; background: var(--pi-surface); padding: 4px 24px;
}

.pi-spec-tab-panel { display: none; }
.pi-spec-tab-panel.is-active { display: block; animation: pi-fade-in .35s var(--pi-ease); }
.pi-spec-table { width: 100%; }
.pi-spec-table tr { border-bottom: 1px solid var(--pi-border); }
.pi-spec-table tr:last-child { border-bottom: none; }
.pi-spec-table th, .pi-spec-table td { text-align: left; padding: 16px 4px; vertical-align: top; }
.pi-spec-table th { width: 200px; font-weight: 600; color: var(--pi-text-secondary); font-size: .88rem; }
.pi-spec-table td { font-weight: 500; }
@media (max-width: 560px){ .pi-spec-table th, .pi-spec-table td { display: block; width: 100%; padding: 4px; } .pi-spec-table th { padding-top: 16px; } }

/* Pricing */
.pi-pricing-list { display: flex; flex-direction: column; gap: 10px; }
.pi-pricing-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--pi-bg-alt); border-radius: var(--pi-radius-md); }
.pi-pricing-store { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pi-pricing-variant { color: var(--pi-text-secondary); font-size: .85rem; }
.pi-pricing-amount { font-family: var(--pi-font-display); font-weight: 800; font-size: 1.15rem; }
/* Shown after a price is converted to the visitor's local currency
   (main.js, PICurrency) -- keeps the original price visible so the
   conversion is never opaque about what it actually did. */
.pi-price-note { font-family: var(--pi-font-body); font-weight: 500; font-size: .78em; color: var(--pi-text-tertiary); }

/* Popularity */
.pi-popularity-box { display: flex; gap: 28px; padding: 22px; background: var(--pi-bg-alt); border-radius: var(--pi-radius-md); }
.pi-popularity-stat { display: flex; flex-direction: column; gap: 4px; }
.pi-popularity-num { font-family: var(--pi-font-display); font-weight: 800; font-size: 1.3rem; }
.pi-popularity-label { font-size: .78rem; color: var(--pi-text-tertiary); }

/* Related */
.pi-related { padding-block: var(--pi-section-pad); border-top: 1px solid var(--pi-border); }

/* Jump-link targets need clearance for the sticky header (always) plus
   the sticky buy bar (visible by the time these are reachable), or the
   header hides the top of the section right after the smooth scroll. */
#pi-full-specs-section, #pi-pricing-section { scroll-margin-top: calc(var(--pi-header-h) + 70px); }

/* PhoneInsight Score -- specs-derived composite, cached at import time
   (see PhoneInsight_Benchmark), never computed at render time. */
/* No top padding -- "Full specifications" right above already carries its
   own bottom padding-block: var(--pi-section-pad). A real (if modest)
   bottom padding of its own, though: Pricing/Popularity/Related below it
   are each conditional and commonly ALL absent for a given phone, in
   which case this section is the last thing on the page before the
   footer -- relying on "whatever comes next supplies the gap" left it
   flush against the footer whenever nothing did. */
.pi-benchmark-section { padding-top: 0; padding-bottom: 48px; }
.pi-benchmark-card {
	display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center;
	background: var(--pi-bg-alt); border-radius: var(--pi-radius-lg); padding: 32px;
}
@media (max-width: 760px){ .pi-benchmark-card { grid-template-columns: 1fr; } }
.pi-benchmark-score-block { display: flex; flex-direction: column; gap: 10px; }
.pi-benchmark-score-num { font-family: var(--pi-font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; }
.pi-benchmark-score-max { font-size: 1.1rem; font-weight: 600; color: var(--pi-text-tertiary); margin-left: 2px; }
.pi-benchmark-disclaimer { font-size: .76rem; color: var(--pi-text-tertiary); max-width: 260px; margin-top: 2px; }

.pi-benchmark-bars { display: flex; flex-direction: column; gap: 14px; }
.pi-benchmark-bar-row { display: grid; grid-template-columns: 140px 1fr 38px; align-items: center; gap: 14px; }
@media (max-width: 480px){ .pi-benchmark-bar-row { grid-template-columns: 110px 1fr 32px; gap: 10px; } }
.pi-benchmark-bar-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; color: var(--pi-text-secondary); }
.pi-benchmark-bar-label .pi-icon { width: 16px; height: 16px; color: var(--pi-text-tertiary); flex-shrink: 0; }
.pi-benchmark-bar-track { height: 8px; border-radius: var(--pi-radius-full); background: var(--pi-border); overflow: hidden; }
.pi-benchmark-bar-fill { display: block; height: 100%; border-radius: var(--pi-radius-full); background: var(--pi-gradient); }
.pi-benchmark-bar-value { font-weight: 700; font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }

/* =================================================================
   15. COMPARE
   ================================================================= */
.pi-compare-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; align-items: stretch; }
@media (max-width: 820px){ .pi-compare-slots { grid-template-columns: 1fr; } }

.pi-compare-slot {
	border: 1.5px dashed var(--pi-border-strong); border-radius: var(--pi-radius-lg);
	min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	color: var(--pi-text-tertiary); font-weight: 600; font-size: .92rem;
	transition: border-color var(--pi-fast) var(--pi-ease), background var(--pi-fast) var(--pi-ease), color var(--pi-fast) var(--pi-ease);
}
.pi-compare-slot:hover { border-color: var(--pi-accent); background: var(--pi-accent-light); color: var(--pi-accent-dark); }
.pi-compare-slot-add-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--pi-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--pi-text-secondary); }
.pi-compare-slot:hover .pi-compare-slot-add-icon { background: var(--pi-surface); color: var(--pi-accent); }

.pi-compare-slot.is-filled {
	border: 1px solid var(--pi-border); background: var(--pi-surface); border-radius: var(--pi-radius-lg);
	text-align: left; align-items: stretch; position: relative; overflow: hidden; min-height: 0;
}
.pi-compare-slot-remove { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--pi-surface); border: 1px solid var(--pi-border); width: 34px; height: 34px; }
.pi-compare-slot-media { background: var(--pi-media-bg); aspect-ratio: 1/.85; display: flex; align-items: center; justify-content: center; padding: 28px; }
.pi-compare-slot-media img { max-width: 65%; max-height: 100%; object-fit: contain; }
.pi-compare-slot-body { padding: 20px 22px 24px; }
.pi-compare-slot-brand { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pi-text-tertiary); }
.pi-compare-slot-name { font-family: var(--pi-font-display); font-weight: 700; font-size: 1.12rem; margin-top: 4px; line-height: 1.3; }
.pi-compare-slot-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; color: var(--pi-accent); margin-top: 16px; }
.pi-compare-slot-link .pi-icon { width: 15px; height: 15px; }

/* The comparison itself now reuses the single-phone spec-sheet's
   sidebar-nav + tab-panel layout (.pi-spec-tabs) instead of one long
   stacked table -- each category is its own tab, so comparing "Display"
   across phones doesn't mean scrolling past Launch/Platform/Memory/etc
   first. The scroll+border box that used to wrap the whole table now
   belongs to each panel individually, so it doesn't also apply to the
   sidebar nav sitting beside it. */
.pi-compare-table-wrap .pi-spec-tab-panel { overflow-x: auto; border: 1px solid var(--pi-border); border-radius: var(--pi-radius-lg); }
.pi-compare-table-wrap { transition: opacity .15s ease; }
.pi-compare-table-wrap.is-loading { opacity: .5; pointer-events: none; }
.pi-compare-table { min-width: 640px; width: 100%; border-collapse: separate; }
.pi-compare-table th, .pi-compare-table td { padding: 16px 20px; border-bottom: 1px solid var(--pi-border); text-align: center; vertical-align: middle; }
.pi-compare-table thead th {
	/* No position:sticky here on purpose -- combined with this wrap's
	   own overflow-x:auto + border-radius, a sticky child doesn't get
	   clipped by the rounded corner and visually detaches/overlaps the
	   row below it while scrolling. Not worth the visual glitch for a
	   minor nicety. */
	font-family: var(--pi-font-display); font-size: 1rem; text-align: center;
	background: var(--pi-surface); border-bottom: 1px solid var(--pi-border);
}
.pi-compare-table thead th:first-child { text-align: left; }
.pi-compare-table tbody th { color: var(--pi-text); font-weight: 700; font-size: .86rem; text-align: left; background: var(--pi-bg-soft); width: 200px; white-space: nowrap; }
.pi-compare-table tbody td { font-weight: 500; color: var(--pi-text-secondary); }
/* The last row's own border-bottom sat flush against the panel's rounded
   outer border below it -- two thin lines a pixel apart read as one
   doubled/messy border along the bottom edge. */
.pi-compare-table tbody tr:last-child th,
.pi-compare-table tbody tr:last-child td { border-bottom: none; }

/* The spec-name column stays pinned while you scroll horizontally to
   compare values -- the actual fix for "hard to read": otherwise you
   lose track of which row you're looking at once the label scrolls
   off. Background must be solid (matches whatever this cell already
   uses) so table content doesn't show through underneath it. */
.pi-compare-table thead th:first-child, .pi-compare-table tbody th {
	position: sticky; left: 0; z-index: 2;
	box-shadow: 2px 0 6px -2px rgba(0,0,0,.06);
}
/* Row-hover makes it easy to track one spec across all three columns
   while scanning -- same light-gray-only treatment used everywhere
   else in the theme, no motion. */
.pi-compare-table tbody tr:hover th,
.pi-compare-table tbody tr:hover td { background: var(--pi-bg-alt); }
/* Subtle, not a loud highlight -- on detailed fields like network bands
   almost every phone differs, so a bold fill on nearly every cell just
   reads as noisy rather than useful. */
.pi-compare-diff { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); border-radius: var(--pi-radius-sm); }
/* A missing spec (one phone just doesn't have this field) isn't a
   "difference" to call out -- it's the absence of a data point, so it
   stays quiet: no box, dimmer dash, instead of matching the diff pill. */
.pi-compare-na { color: var(--pi-text-tertiary); }
.pi-compare-empty { text-align: center; padding: 60px 20px; color: var(--pi-text-tertiary); }

/* PhoneInsight Score in each compare slot + the dedicated "Benchmark" tab
   (a mini progress bar per phone per sub-score, winner highlighted). */
.pi-compare-slot-score { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.pi-compare-slot-score-num { font-family: var(--pi-font-display); font-weight: 800; font-size: 1.5rem; }
.pi-compare-slot-score-tier { font-size: .72rem; font-weight: 700; color: var(--pi-text-tertiary); text-transform: uppercase; letter-spacing: .04em; }

.pi-compare-mini-bar { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pi-compare-mini-bar-track { width: 100%; max-width: 140px; height: 6px; border-radius: var(--pi-radius-full); background: var(--pi-border); overflow: hidden; margin-inline: auto; }
.pi-compare-mini-bar-fill { display: block; height: 100%; border-radius: var(--pi-radius-full); background: var(--pi-text-tertiary); }
.pi-compare-mini-bar-value { font-weight: 700; font-size: .85rem; }
.pi-compare-benchmark-winner .pi-compare-mini-bar-fill { background: var(--pi-gradient); }
.pi-compare-benchmark-winner .pi-compare-mini-bar-value { color: var(--pi-accent-dark); }

/* =================================================================
   16. BLOG
   ================================================================= */
/* The most recent post on the blog index, given real visual weight
   instead of being squeezed into the grid below -- which looked
   especially sparse and unbalanced with only one or two posts. */
.pi-post-featured {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
	border: 1px solid var(--pi-border); border-radius: var(--pi-radius-lg); overflow: hidden;
	margin-bottom: 48px;
}
.pi-post-featured-media { aspect-ratio: 4/3; background: var(--pi-bg-alt); height: 100%; }
.pi-post-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.pi-post-featured-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--pi-gradient-soft); }
.pi-post-featured-placeholder .pi-icon { width: 40px; height: 40px; color: var(--pi-text-tertiary); }
.pi-post-featured-body { padding: 12px 40px 12px 0; }
.pi-post-featured-title { margin: 16px 0 14px; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.pi-post-featured-title a:hover { color: var(--pi-accent); }
.pi-post-featured-excerpt { font-size: 1.02rem; margin-bottom: 18px; }
.pi-post-featured .pi-post-card-meta { margin-bottom: 24px; }
@media (max-width: 860px){
	.pi-post-featured { grid-template-columns: 1fr; }
	.pi-post-featured-media { aspect-ratio: 16/10; }
	.pi-post-featured-body { padding: 24px; }
}

.pi-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 960px){ .pi-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .pi-post-grid { grid-template-columns: 1fr; } }
.pi-post-card { border-radius: var(--pi-radius-lg); overflow: hidden; border: 1px solid var(--pi-border); transition: box-shadow var(--pi-fast) var(--pi-ease), border-color var(--pi-fast) var(--pi-ease); position: relative; }
.pi-post-card:hover { box-shadow: var(--pi-shadow-md); border-color: var(--pi-border-strong); }
.pi-post-card-media { aspect-ratio: 16/10; background: var(--pi-bg-alt); overflow: hidden; }
.pi-post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pi-post-card-body { padding: 20px 22px 24px; }
.pi-post-card-meta { font-size: .78rem; color: var(--pi-text-tertiary); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.pi-post-card-title { font-size: 1.15rem; margin-bottom: 8px; }
.pi-post-card-excerpt { font-size: .9rem; }
a.pi-post-card-link { position: absolute; inset: 0; z-index: 1; }

.pi-article { padding-bottom: clamp(56px, 8vw, 96px); }
.pi-article-header { text-align: center; max-width: 760px; margin-inline: auto; padding-block: 40px; padding-inline: clamp(20px,4vw,48px); }
.pi-article-meta { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--pi-text-tertiary); font-size: .88rem; margin-top: 16px; }
.pi-article-cover { max-width: var(--pi-container); margin-inline: auto; padding-inline: clamp(20px,4vw,48px); margin-bottom: 48px; }
.pi-article-cover img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--pi-radius-xl); }

.pi-article-content { font-size: 1.08rem; line-height: 1.8; }
.pi-article-content > * + * { margin-top: 1.4em; }
.pi-article-content h2 { margin-top: 2em; font-size: 1.7rem; }
.pi-article-content h3 { margin-top: 1.7em; font-size: 1.3rem; }
.pi-article-content p, .pi-article-content li { color: var(--pi-text); }
.pi-article-content a { color: var(--pi-accent); text-decoration: underline; text-underline-offset: 3px; }
.pi-article-content img { border-radius: var(--pi-radius-md); }
.pi-article-content blockquote { border-left: 3px solid var(--pi-accent); padding-left: 24px; font-size: 1.2rem; font-family: var(--pi-font-display); font-weight: 600; color: var(--pi-text); }
.pi-article-content ul, .pi-article-content ol { padding-left: 1.4em; list-style: revert; }
.pi-article-content figcaption { font-size: .85rem; color: var(--pi-text-tertiary); text-align: center; margin-top: 8px; }
.pi-article-content pre { background: var(--pi-text); color: #fff; padding: 20px; border-radius: var(--pi-radius-md); overflow-x: auto; }

/* Any avatar image on the site (post byline, comments) -- Gravatar/local
   photos ship square, so this is what actually makes them read as a
   consistent circular "avatar" rather than an odd square headshot. */
.avatar { border-radius: var(--pi-radius-full); object-fit: cover; flex-shrink: 0; }

/* ===================================================================
   Comments (comments.php) -- wp_list_comments()/comment_form() emit
   WordPress's own default markup and classes (.comment-body, .avatar,
   .comment-form-author, etc.), which carry no styling of their own, so
   this scopes the theme's look onto those default class names directly
   rather than replacing them with a custom walker.
   ================================================================= */
.pi-comments { margin-top: 56px; }
.pi-comments > h3 { font-family: var(--pi-font-display); font-size: 1.4rem; margin-bottom: 24px; }
.pi-comment-list { display: flex; flex-direction: column; gap: 18px; }
.pi-comment-list .children { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 18px; border-left: 2px solid var(--pi-border); padding-left: 24px; }
.comment-body {
	background: var(--pi-bg-alt); border-radius: var(--pi-radius-lg); padding: 22px 24px;
}
.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.comment-author .avatar { width: 44px; height: 44px; }
.comment-author .fn { font-style: normal; font-weight: 700; font-size: .95rem; }
.comment-author .fn a { color: inherit; }
.comment-author .says { display: none; }
.comment-metadata { font-size: .8rem; color: var(--pi-text-tertiary); margin-bottom: 14px; }
.comment-metadata a { color: inherit; }
.comment-content p { margin-top: 0; }
.comment-content p + p { margin-top: 1em; }
.comment-reply-link {
	display: inline-flex; align-items: center; margin-top: 12px; font-size: .82rem; font-weight: 700;
	color: var(--pi-text-secondary); text-decoration: none;
}
.comment-reply-link:hover { color: var(--pi-accent); }
.pi-comments-closed { color: var(--pi-text-tertiary); }

#respond { margin-top: 40px; }
#reply-title { font-family: var(--pi-font-display); font-size: 1.4rem; margin-bottom: 6px; }
#reply-title small { display: inline-block; margin-left: 14px; font-size: .78rem; font-weight: 600; }
#reply-title small a { color: var(--pi-text-tertiary); text-decoration: underline; text-underline-offset: 2px; }
#reply-title small a:hover { color: var(--pi-accent); }
.comment-notes, .logged-in-as { font-size: .88rem; color: var(--pi-text-tertiary); margin-bottom: 18px; }
.comment-notes .required, .comment-form-cookies-consent { color: inherit; }
#commentform label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
	width: 100%; max-width: 360px; background: var(--pi-surface); border: 1.5px solid var(--pi-border);
	border-radius: var(--pi-radius-sm); padding: 11px 14px; font-size: .92rem; font-family: inherit;
	color: var(--pi-text); transition: border-color var(--pi-fast) var(--pi-ease);
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus { outline: none; border-color: var(--pi-accent); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--pi-text-secondary); }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form-cookies-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--pi-accent); flex-shrink: 0; }

.pi-layout-with-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
@media (max-width: 960px){ .pi-layout-with-sidebar { grid-template-columns: 1fr; } }
.pi-widget { margin-bottom: 32px; padding: 24px; background: var(--pi-bg-alt); border-radius: var(--pi-radius-lg); overflow-wrap: break-word; }
.pi-widget-title { margin-bottom: 16px; font-size: 1.05rem; }
/* Block-based widgets (a Group block with a heading, an Archives block,
   a Categories block, etc. added via Appearance -> Widgets) render their
   own raw heading markup instead of going through before_title/
   after_title, so it inherits the site's large section-heading sizes --
   way too big for a sidebar. Scope every heading level down wherever it
   appears inside a widget, regardless of what block produced it. */
.pi-widget h1, .pi-widget h2, .pi-widget h3, .pi-widget h4, .pi-widget h5, .pi-widget h6 {
	font-size: 1.05rem; margin-bottom: 12px; line-height: 1.3;
}
.pi-widget li { margin-bottom: 6px; }
.pi-widget p:last-child { margin-bottom: 0; }
.pi-widget ul, .pi-widget ol { display: flex; flex-direction: column; gap: 10px; }
.pi-widget a:hover { color: var(--pi-accent); }

/* Block-based Search widget (Appearance -> Widgets -> a Search block) --
   its default markup ships with no visual styling of its own, so next to
   the rest of this theme it read like a plain, unstyled browser form.
   Same split input+button treatment as the toolbar/filter search box
   elsewhere in the theme, just scoped to widget context. */
.pi-widget .wp-block-search__label {
	display: block; margin-bottom: 10px; font-size: .82rem; font-weight: 700;
	color: var(--pi-text-tertiary); text-transform: uppercase; letter-spacing: .04em;
}
.pi-widget .wp-block-search__inside-wrapper {
	display: flex; align-items: stretch; background: var(--pi-surface);
	border: 1.5px solid var(--pi-border); border-radius: var(--pi-radius-sm); overflow: hidden;
	transition: border-color var(--pi-fast) var(--pi-ease);
}
/* box-shadow instead of the native focus outline for the whole pill --
   an outline on the button (browsers draw one by default) sits outside
   its border box, so inside this rounded, overflow:hidden wrapper it got
   clipped unevenly and looked like a stray, cut-off border fragment
   poking out one side. box-shadow respects the wrapper's own radius. */
.pi-widget .wp-block-search__inside-wrapper:focus-within { border-color: var(--pi-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.pi-widget .wp-block-search__input {
	flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none;
	padding: 11px 14px; font-size: .9rem; font-family: inherit; color: var(--pi-text);
}
.pi-widget .wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pi-widget .wp-block-search__button {
	flex: 0 0 auto; border: none; outline: none; background: var(--pi-text); color: #fff;
	padding: 0 20px; font-weight: 600; font-size: .88rem; cursor: pointer;
	transition: background var(--pi-fast) var(--pi-ease);
}
.pi-widget .wp-block-search__button:hover { background: #000; }

/* Recent Posts / Recent Comments blocks: their list items and comment
   meta line render as plain unstyled text otherwise. */
.pi-widget .wp-block-latest-posts__post-title { display: block; font-weight: 600; font-size: .92rem; color: var(--pi-text); }
.pi-widget .wp-block-latest-comments__comment-meta { font-size: .88rem; line-height: 1.5; color: var(--pi-text-secondary); }
.pi-widget .wp-block-latest-comments__comment-author { font-weight: 600; color: var(--pi-text); }

/* =================================================================
   17. NEWSLETTER / CTA
   ================================================================= */
.pi-cta-banner { background: var(--pi-text); border-radius: var(--pi-radius-xl); padding: clamp(36px,6vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; color: #fff; position: relative; overflow: hidden; }
.pi-cta-banner::before { content: ''; position: absolute; inset: 0; background: var(--pi-gradient); opacity: .18; }
.pi-cta-banner-content { position: relative; z-index: 1; max-width: 520px; }
.pi-cta-banner h2 { color: #fff; margin-bottom: 12px; }
.pi-cta-banner p { color: rgba(255,255,255,.72); }
.pi-cta-form { position: relative; z-index: 1; }
.pi-cta-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* .pi-input never sets its own color, so on this dark banner (color:#fff
   set higher up for the headline/paragraph) it was inheriting white text
   on its own white input background -- invisible while typing. */
.pi-cta-form input { min-width: 260px; color: var(--pi-text); }
.pi-cta-banner .pi-btn-accent { background: #fff; color: var(--pi-text); }
.pi-cta-banner .pi-btn-accent:hover { background: var(--pi-bg-alt); }
.pi-cta-banner .pi-btn-accent:disabled { opacity: .7; pointer-events: none; }
.pi-cta-form-note {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
	padding: 10px 16px; border-radius: var(--pi-radius-full); font-size: .85rem; font-weight: 600;
}
.pi-cta-form-note .pi-icon { width: 16px; height: 16px; flex-shrink: 0; }
.pi-cta-form-note.is-success { background: var(--pi-success-bg); color: var(--pi-success); }
.pi-cta-form-note.is-error { background: var(--pi-danger-bg); color: var(--pi-danger); }

/* =================================================================
   18. FOOTER
   ================================================================= */
.pi-footer { background: var(--pi-bg-alt); border-top: 1px solid var(--pi-border); }
.pi-footer-top { padding-block: 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px){ .pi-footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pi-footer-top { grid-template-columns: 1fr; } }
.pi-footer-brand .pi-logo { margin-bottom: 16px; }
.pi-footer-about { font-size: .92rem; max-width: 320px; margin-bottom: 20px; }
.pi-social-links { display: flex; gap: 10px; }
.pi-footer-heading { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 18px; color: var(--pi-text-tertiary); }
.pi-footer-col ul { display: flex; flex-direction: column; gap: 12px; font-size: .92rem; }
.pi-footer-col a:hover { color: var(--pi-accent); }
.pi-footer-bottom { border-top: 1px solid var(--pi-border); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--pi-text-tertiary); }
.pi-footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.pi-footer-bottom-links button.pi-cookie-reopen { font: inherit; color: inherit; font-size: .82rem; }
.pi-footer-bottom-links a:hover, .pi-footer-bottom-links button:hover { color: var(--pi-accent); }

/* Cookie consent banner */
.pi-cookie-banner {
	position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 800;
	max-width: 560px; margin-inline: auto;
	background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-lg);
	box-shadow: var(--pi-shadow-lg); padding: 22px 24px;
	transform: translateY(140%); transition: transform var(--pi-med) var(--pi-ease);
}
.pi-cookie-banner.is-visible { transform: translateY(0); }
.pi-cookie-banner p { font-size: .86rem; margin-bottom: 16px; }
.pi-cookie-banner a { color: var(--pi-accent); text-decoration: underline; text-underline-offset: 2px; }
.pi-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px){ .pi-cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; } }

/* Legal pages (Privacy / Terms / Cookie Policy) */
.pi-legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 1080px; margin-inline: auto; }
.pi-legal-toc { position: sticky; top: calc(var(--pi-header-h) + 20px); }
.pi-legal-toc strong { display: block; margin-bottom: 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pi-text-tertiary); }
.pi-legal-toc ol { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; counter-reset: toc; }
.pi-legal-toc a { color: var(--pi-text-secondary); }
.pi-legal-toc a:hover, .pi-legal-toc a.is-active { color: var(--pi-accent); }
@media (max-width: 860px){ .pi-legal-layout { grid-template-columns: 1fr; } .pi-legal-toc { position: static; margin-bottom: 8px; } }

/* =================================================================
   19. 404 / EMPTY
   ================================================================= */
.pi-404 { text-align: center; padding-block: clamp(60px,10vw,140px); }
.pi-404-code { font-family: var(--pi-font-display); font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; background: var(--pi-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* =================================================================
   20. ANIMATION HOOKS (keyframes in animations.css)
   ================================================================= */
.pi-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--pi-ease), transform .7s var(--pi-ease); }
.pi-reveal.is-visible { opacity: 1; transform: translateY(0); }
.pi-reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .6s var(--pi-ease), transform .6s var(--pi-ease); }
.pi-reveal-scale.is-visible { opacity: 1; transform: scale(1); }
.pi-stagger > * { transition-delay: calc(var(--pi-stagger-i, 0) * 70ms); }

@keyframes pi-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Homepage brand marquee: front-page.php deliberately renders the brand
   list twice back-to-back (width: max-content) -- the setup for a
   classic seamless infinite-scroll ticker -- but never actually had the
   animation that scrolls it, so the track just sat still and once its
   (finite, twice-repeated) content ran out there was nothing left to
   fill the rest of the section, showing as blank space after the last
   name. Animating exactly -50% (one full copy's width) loops it
   perfectly since the content is exactly two identical copies. */
.pi-brand-marquee-track {
	animation: pi-marquee 32s linear infinite;
}
.pi-brand-marquee:hover .pi-brand-marquee-track { animation-play-state: paused; }
@keyframes pi-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.pi-brand-marquee-track { animation: none; }
}

.pi-back-to-top.is-visible { opacity: 1 !important; visibility: visible !important; }

/* ===================================================================
   About page -- founder profile card
   ================================================================= */
.pi-founder-card {
	max-width: 440px; margin-inline: auto; text-align: center;
	background: var(--pi-surface); border-radius: var(--pi-radius-lg);
	padding: 40px 32px;
}
.pi-founder-photo { display: block; width: 140px; height: 140px; margin: 0 auto 20px; border-radius: var(--pi-radius-full); object-fit: cover; box-shadow: var(--pi-shadow-md); }
.pi-founder-name { font-family: var(--pi-font-display); font-size: 1.4rem; margin-bottom: 2px; }
.pi-founder-title { color: var(--pi-text-secondary); font-weight: 600; font-size: .92rem; }
.pi-founder-location { display: inline-flex; align-items: center; gap: 6px; color: var(--pi-text-tertiary); font-size: .85rem; margin-top: 10px; }
.pi-founder-location .pi-icon { width: 14px; height: 14px; }
.pi-founder-bio { color: var(--pi-text-secondary); line-height: 1.7; margin-top: 20px; }
.pi-founder-links { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.pi-founder-portfolio-link {
	display: inline-block; margin-top: 18px; color: var(--pi-text-secondary);
	font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.pi-founder-portfolio-link:hover { color: var(--pi-accent); }

/* ===================================================================
   Print (single-phone.php's "Print specs" button just calls
   window.print() -- everything else happens here). Deliberately just
   one page: the photo, title, and quick-spec grid, plus a footer
   pointing back at the site for the full spec sheet -- not the entire
   tabbed spec sheet/pricing/related sections, which would run several
   pages long.
   ================================================================= */
.pi-print-header, .pi-print-footer, .pi-print-specs { display: none; }

/* =====================================================================
   Print stylesheet -- a self-contained one-page spec sheet, not a
   trimmed-down copy of the on-screen layout. Screen and print have
   different jobs here: the page is for browsing (big photo, one spec
   category at a time, calls to action); a printout is for reference,
   so it trades all of that for a proper document shell (masthead,
   "Printed <date>" footer) around as much of the real spec data as
   still reasonably fits on one page -- see .pi-print-specs below,
   which is a dedicated compact rendering of the exact same category/
   field data the on-screen tabs show, not the tabs themselves (those
   only ever show one category at a time, which doesn't translate to
   paper at all).
   ================================================================= */
@media print {
	@page { margin: 16mm; }
	* { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
	body { background: #fff; color: #000; font-size: 11px; }

	/* Everything on-screen-only: nav/chrome, calls to action (nothing to
	   click on paper), and the interactive tabbed spec UI -- replaced
	   here by .pi-print-specs, a static rendering built for one page
	   rather than one category at a time. */
	.pi-header, .pi-sticky-bar, .pi-mobile-menu, .pi-mobile-menu-overlay,
	.pi-search-flyout, .pi-announcement-bar, .pi-cookie-banner, .pi-back-to-top,
	.pi-breadcrumbs, .pi-phone-cta-row, .pi-phone-gallery-thumbs,
	.pi-quick-specs, .pi-spec-section, #pi-pricing-section,
	.pi-popularity-section, .pi-related, .pi-footer, .pi-compare-badge,
	#wpadminbar {
		display: none !important;
	}

	/* A small letterhead-style masthead in place of the site's own nav
	   (hidden above) -- so a printed page still identifies where it came
	   from even once it's out of its browser tab, the way a real
	   document does. */
	.pi-print-header {
		display: flex; align-items: center; justify-content: space-between;
		padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid #000;
	}
	.pi-print-header-brand { display: flex; align-items: center; gap: 8px; }
	.pi-print-header-logo { display: block; height: 20px; width: auto; }
	.pi-print-header-name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
	.pi-print-header-meta { text-align: right; line-height: 1.4; }
	.pi-print-header-doctype { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #444; }
	.pi-print-header-date { display: block; font-size: 10px; color: #777; }

	.pi-phone-hero { border-bottom: none; padding-block: 0 14px; }
	/* Side by side, not stacked -- .pi-phone-hero-grid's own display:block
	   fallback (used at narrow screen widths) put the photo above the
	   details instead of beside them, using close to double the page
	   height and pushing later content onto a second page. */
	.pi-phone-hero-grid { display: flex !important; gap: 22px; align-items: stretch; }
	/* .pi-phone-gallery -- not .pi-phone-gallery-main -- is the actual
	   flex item here (.pi-phone-gallery-main is just its child, next to
	   the now print-hidden thumbnail strip), so align-items:stretch
	   only ever stretched this invisible wrapper. The bordered photo box
	   inside it still sized to its own content and left blank space
	   below it whenever the wrapper ended up taller. Fixed by sizing the
	   real flex item here and telling the photo box to fill 100% of it.
	   Smaller than the on-screen hero (140px, not 200px) -- the dense
	   spec sheet below is the actual point of a printout, so the photo
	   only needs to be big enough to identify the phone, not showcase it. */
	.pi-phone-gallery { flex: 0 0 140px; width: 140px; }
	.pi-phone-gallery-main {
		width: 100%; height: 100%; box-sizing: border-box;
		margin-inline: 0; padding: 10px; border: none; break-inside: avoid;
	}
	.pi-phone-gallery-main img { filter: none; }
	.pi-phone-gallery-os { display: none; }
	.pi-phone-title-block { margin-top: 0; flex: 1 1 auto; min-width: 0; }
	/* The site's own h1 is a huge display headline (clamp up to 4.2rem) --
	   fine as a page hero, way oversized for a compact one-page printout. */
	.pi-phone-title-block h1 { font-size: 22px; line-height: 1.2; }
	.pi-phone-tagline { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #333; }
	/* Not printed -- this is this site's own live price, which goes
	   stale the moment it's on paper; same reasoning as omitting the
	   scraped "Price" spec field in .pi-print-specs below. */
	.pi-phone-price-row { display: none !important; }

	a { color: #000; text-decoration: none; }

	/* The dense spec sheet itself: every category from the on-screen
	   tabs, flowed into newspaper-style columns instead of one panel at
	   a time -- CSS columns (not a fixed-row grid) specifically because
	   real spec values vary wildly in length (a 3-word "Card slot: No"
	   next to a 200-character band list), so a rigid grid would either
	   waste space or clip; columns just let each entry take whatever
	   height its own content needs and reflow the rest around it. */
	.pi-print-specs {
		display: block; column-count: 3; column-gap: 22px; margin-top: 4px;
	}
	.pi-print-spec-group { break-inside: avoid-column; margin-bottom: 10px; }
	.pi-print-spec-group h2 {
		font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
		margin: 0 0 5px; padding-bottom: 3px; border-bottom: 1px solid #000;
		break-after: avoid;
	}
	.pi-print-spec-row { break-inside: avoid; margin-bottom: 5px; }
	.pi-print-spec-label {
		display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase;
		letter-spacing: .03em; color: #666;
	}
	.pi-print-spec-value { display: block; font-size: 10.5px; line-height: 1.35; }

	/* Normal document flow, not position:fixed -- print engines handle
	   a fixed-position element inconsistently (some repeat it on every
	   page, some clip it, some drop it), and this only ever needs to
	   appear once at the true end of a single-page printout anyway. */
	.pi-print-footer {
		display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
		margin-top: 16px; padding-top: 10px; border-top: 1px solid #ccc;
	}
	.pi-print-footer-logo { display: block; height: 16px; width: auto; }
	.pi-print-footer-name { font-weight: 700; font-size: 11px; }
	.pi-print-footer-url { font-size: 10px; color: #666; }
	.pi-print-footer-date { font-size: 10px; color: #999; margin-left: auto; }
	.pi-print-footer-note { flex-basis: 100%; margin: 2px 0 0; font-size: 9.5px; color: #666; }
}