Hello world!

/**
* AppliancePartsHQ — custom styles (assembled)
* Source: tokens.css + aphq-base.css + aphq-wp-overrides.css
* Regenerate: python website/build_custom_css.py
* Deploy: python wp_build.py –push-css
*/

/* ── tokens.css ── */

/**
* AppliancePartsHQ — Design Tokens
* Single source of truth for all visual values.
* Follows APHQ_Design_Brief.md v2.3 (standard parts-store pivot).
*
* Usage: Import this file first, then component stylesheets.
* WooCommerce integration: enqueue via functions.php before aphq-custom.css
*
* @version 1.0
*/

/* ─────────────────────────────────────────────
FONT IMPORT
Self-host these weights in production via Google Fonts download tool.
Weights loaded: Inter 400/600/700, IBM Plex Mono 400/600
───────────────────────────────────────────── */
@import url(“https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;700&display=swap”);

/* ─────────────────────────────────────────────
COLOR TOKENS
───────────────────────────────────────────── */
:root {
/* Brand primaries */
–color-navy: #0D3B66; /* Header nav bar, primary buttons, brand anchor */
–color-action-blue: #1A6BB5; /* Links, hover states, secondary actions */

/* Backgrounds */
–color-white: #FFFFFF; /* Main content background */
–color-light-gray: #F5F7FA; /* Section fills, category cards, table rows */

/* Borders & dividers */
–color-border: #DDE3EA; /* Input borders, card outlines, dividers */

/* Text */
–color-text: #1A1F26; /* Primary body text */
–color-text-muted: #5A6472; /* Secondary labels, captions */

/* Semantic */
–color-in-stock: #1B7F4B; /* In-stock badges — nowhere else */
–color-out-stock: #B91C1C; /* Out-of-stock state */
–color-accent: #E87722; /* Sparing: sale flags, attention callouts */

/* Interactive states */
–color-focus-ring: #1A6BB5; /* Keyboard focus outline */
–color-hover-bg: #EAF0F8; /* Subtle hover on nav items */

/* Overlays */
–color-overlay: rgba(13, 59, 102, 0.55);
}

/* ─────────────────────────────────────────────
TYPOGRAPHY TOKENS
───────────────────────────────────────────── */
:root {
–font-body: “Inter”, system-ui, -apple-system, sans-serif;
–font-mono: “IBM Plex Mono”, ui-monospace, “Courier New”, monospace;

/* Scale (1.25 major-third) */
–text-xs: 0.75rem; /* 12px — legal, fine print */
–text-sm: 0.875rem; /* 14px — captions, labels */
–text-base: 1rem; /* 16px — body */
–text-lg: 1.125rem; /* 18px — lead text, card titles */
–text-xl: 1.25rem; /* 20px — sub-headings */
–text-2xl: 1.5rem; /* 24px — section headings */
–text-3xl: 1.875rem; /* 30px — page headings */
–text-4xl: 2.25rem; /* 36px — hero headings (mobile) */
–text-5xl: 3rem; /* 48px — hero headings (desktop) */

–leading-tight: 1.2;
–leading-snug: 1.35;
–leading-normal: 1.55;
–leading-relaxed:1.7;

–weight-normal: 400;
–weight-semibold:600;
–weight-bold: 700;
}

/* ─────────────────────────────────────────────
SPACING TOKENS
4px base grid
───────────────────────────────────────────── */
:root {
–space-1: 0.25rem; /* 4px */
–space-2: 0.5rem; /* 8px */
–space-3: 0.75rem; /* 12px */
–space-4: 1rem; /* 16px */
–space-5: 1.25rem; /* 20px */
–space-6: 1.5rem; /* 24px */
–space-8: 2rem; /* 32px */
–space-10: 2.5rem; /* 40px */
–space-12: 3rem; /* 48px */
–space-16: 4rem; /* 64px */
–space-20: 5rem; /* 80px */
–space-24: 6rem; /* 96px */
}

/* ─────────────────────────────────────────────
BORDER RADIUS
───────────────────────────────────────────── */
:root {
–radius-sm: 3px;
–radius-md: 6px;
–radius-lg: 10px;
–radius-full: 9999px;
}

/* ─────────────────────────────────────────────
SHADOWS
───────────────────────────────────────────── */
:root {
–shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
–shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
–shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
–shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────────
LAYOUT TOKENS
───────────────────────────────────────────── */
:root {
–max-w-content: 1200px;
–max-w-narrow: 800px;
–max-w-wide: 1400px;

–header-row1-h: 64px;
–header-row2-h: 44px;
–header-total: 108px; /* sum of both rows */

–sidebar-w: 260px;
–grid-gap: var(–space-6);
}

/* ─────────────────────────────────────────────
TRANSITION
───────────────────────────────────────────── */
:root {
–transition-fast: 150ms ease;
–transition-normal: 200ms ease;
–transition-slow: 300ms ease;
}

/* ─────────────────────────────────────────────
REDUCED MOTION
Override transitions when user prefers
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
:root {
–transition-fast: 0ms;
–transition-normal: 0ms;
–transition-slow: 0ms;
}
}

/* ── aphq-base.css ── */

/**
* AppliancePartsHQ — Base Component Stylesheet
* All shared components, layout primitives, and WooCommerce overrides.
* Requires tokens.css to be loaded first.
*
* Table of contents:
* 1. Reset & base
* 2. Layout utilities
* 3. Typography utilities
* 4. Buttons
* 5. Header — row 1 (white utility bar)
* 6. Header — row 2 (navy nav)
* 7. Mobile menu
* 8. Trust bar
* 9. Product card
* 10. Badges (in-stock, OEM, etc.)
* 11. Breadcrumb
* 12. Fitment module
* 13. Sidebar filters
* 14. Pagination
* 15. Blog card
* 16. Footer
* 17. Chat widget (Tawk.to placeholder)
* 18. WooCommerce overrides
* 19. Form elements
* 20. Responsive breakpoints
*
* @version 1.0
*/

/* ═══════════════════════════════════════════
1. RESET & BASE
═══════════════════════════════════════════ */

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}

body {
font-family: var(–font-body);
font-size: var(–text-base);
line-height: var(–leading-normal);
color: var(–color-text);
background-color: var(–color-white);
-webkit-font-smoothing: antialiased;
}

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

a {
color: var(–color-action-blue);
text-decoration: none;
transition: color var(–transition-fast);
}

a:hover { color: var(–color-navy); }

a:focus-visible {
outline: 2px solid var(–color-focus-ring);
outline-offset: 3px;
border-radius: var(–radius-sm);
}

ul, ol { list-style: none; }

/* ═══════════════════════════════════════════
2. LAYOUT UTILITIES
═══════════════════════════════════════════ */

.aphq-container {
max-width: var(–max-w-content);
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-container–narrow {
max-width: var(–max-w-narrow);
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-section {
padding-block: var(–space-12);
}

.aphq-section–gray {
background-color: var(–color-light-gray);
}

.aphq-section__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(–space-4);
margin-bottom: var(–space-8);
}

.aphq-section__title {
font-size: var(–text-2xl);
font-weight: var(–weight-bold);
color: var(–color-text);
line-height: var(–leading-tight);
}

.aphq-section__link {
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
white-space: nowrap;
flex-shrink: 0;
}

/* ═══════════════════════════════════════════
3. TYPOGRAPHY UTILITIES
═══════════════════════════════════════════ */

.aphq-mono {
font-family: var(–font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}

.aphq-text-muted {
color: var(–color-text-muted);
}

.aphq-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ═══════════════════════════════════════════
4. BUTTONS
═══════════════════════════════════════════ */

.aphq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(–space-2);
padding: var(–space-3) var(–space-6);
font-family: var(–font-body);
font-size: var(–text-base);
font-weight: var(–weight-semibold);
line-height: 1;
border: 2px solid transparent;
border-radius: var(–radius-md);
cursor: pointer;
text-decoration: none;
transition: background-color var(–transition-fast),
border-color var(–transition-fast),
color var(–transition-fast);
white-space: nowrap;
}

.aphq-btn:focus-visible {
outline: 2px solid var(–color-focus-ring);
outline-offset: 3px;
}

/* Primary — navy */
.aphq-btn–primary {
background-color: var(–color-navy);
color: #fff;
border-color: var(–color-navy);
}
.aphq-btn–primary:hover {
background-color: #0a2e52;
border-color: #0a2e52;
color: #fff;
}

/* Secondary — outlined */
.aphq-btn–secondary {
background-color: transparent;
color: var(–color-navy);
border-color: var(–color-navy);
}
.aphq-btn–secondary:hover {
background-color: var(–color-navy);
color: #fff;
}

/* Action — blue */
.aphq-btn–action {
background-color: var(–color-action-blue);
color: #fff;
border-color: var(–color-action-blue);
}
.aphq-btn–action:hover {
background-color: #145a99;
border-color: #145a99;
color: #fff;
}

/* Full width */
.aphq-btn–full { width: 100%; }

/* Large variant */
.aphq-btn–lg {
padding: var(–space-4) var(–space-8);
font-size: var(–text-lg);
}

/* ═══════════════════════════════════════════
5. HEADER — ROW 1 (white utility bar)
═══════════════════════════════════════════ */

.aphq-header {
position: sticky;
top: 0;
z-index: 100;
background: var(–color-white);
box-shadow: var(–shadow-sm);
}

.aphq-header__row1 {
height: var(–header-row1-h);
display: flex;
align-items: center;
gap: var(–space-6);
padding-inline: var(–space-6);
max-width: var(–max-w-content);
margin-inline: auto;
}

/* Logo — inline wordmark SVG */
.aphq-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
line-height: 0;
}

.aphq-logo–wordmark {
display: block;
flex-shrink: 0;
line-height: 0;
}

.aphq-logo–wordmark .aphq-wordmark,
.aphq-wordmark {
display: block;
height: 36px;
width: auto;
max-height: 36px;
}

@media (max-width: 767px) {
.aphq-logo–wordmark .aphq-wordmark,
.aphq-wordmark {
height: 28px;
max-height: 28px;
}
}

/* Search form */
.aphq-search {
flex: 1;
max-width: 600px;
display: flex;
gap: 0;
}

.aphq-search__input {
flex: 1;
height: 42px;
padding: 0 var(–space-4);
font-family: var(–font-body);
font-size: var(–text-base);
color: var(–color-text);
background: var(–color-white);
border: 2px solid var(–color-border);
border-right: none;
border-radius: var(–radius-md) 0 0 var(–radius-md);
transition: border-color var(–transition-fast);
}

.aphq-search__input:focus {
outline: none;
border-color: var(–color-action-blue);
}

.aphq-search__input::placeholder {
color: var(–color-text-muted);
font-family: var(–font-mono);
font-size: var(–text-sm);
}

.aphq-search__btn {
height: 42px;
padding: 0 var(–space-5);
background: var(–color-navy);
color: #fff;
border: none;
border-radius: 0 var(–radius-md) var(–radius-md) 0;
cursor: pointer;
font-family: var(–font-body);
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
transition: background-color var(–transition-fast);
display: flex;
align-items: center;
gap: var(–space-2);
}

.aphq-search__btn:hover {
background: var(–color-action-blue);
}

.aphq-search__btn:focus-visible {
outline: 2px solid var(–color-focus-ring);
outline-offset: 2px;
}

/* Utility icons (account, cart) */
.aphq-header__utils {
display: flex;
align-items: center;
gap: var(–space-5);
flex-shrink: 0;
}

.aphq-header__util-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(–color-text);
font-size: var(–text-xs);
font-weight: var(–weight-semibold);
text-decoration: none;
transition: color var(–transition-fast);
}

.aphq-header__util-link:hover { color: var(–color-action-blue); }

.aphq-header__util-link svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
}

/* Cart count badge */
.aphq-cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(–color-accent);
color: #fff;
font-size: 11px;
font-weight: var(–weight-bold);
border-radius: var(–radius-full);
position: relative;
top: -2px;
}

/* ═══════════════════════════════════════════
6. HEADER — ROW 2 (navy nav)
═══════════════════════════════════════════ */

.aphq-nav {
background-color: var(–color-navy);
}

.aphq-nav__inner {
display: flex;
align-items: stretch;
max-width: var(–max-w-content);
margin-inline: auto;
padding-inline: var(–space-6);
height: var(–header-row2-h);
}

.aphq-nav__item {
position: relative;
}

.aphq-nav__link {
display: flex;
align-items: center;
gap: var(–space-1);
height: 100%;
padding-inline: var(–space-5);
color: #F3F4F4;
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
text-decoration: none;
letter-spacing: 0.01em;
transition: background-color var(–transition-fast), color var(–transition-fast);
white-space: nowrap;
}

.aphq-nav__link:hover,
.aphq-nav__link[aria-expanded=”true”] {
background-color: rgba(255,255,255,0.12);
color: #fff;
}

.aphq-nav__link:focus-visible {
outline: 2px solid rgba(255,255,255,0.8);
outline-offset: -3px;
}

.aphq-nav__link svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
flex-shrink: 0;
}

/* Dropdown */
.aphq-nav__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: 0 0 var(–radius-md) var(–radius-md);
box-shadow: var(–shadow-md);
padding-block: var(–space-2);
z-index: 200;
display: none;
}

.aphq-nav__item:hover .aphq-nav__dropdown,
.aphq-nav__item:focus-within .aphq-nav__dropdown {
display: block;
}

.aphq-nav__dropdown-link {
display: block;
padding: var(–space-2) var(–space-5);
color: var(–color-text);
font-size: var(–text-sm);
text-decoration: none;
transition: background-color var(–transition-fast), color var(–transition-fast);
}

.aphq-nav__dropdown-link:hover {
background-color: var(–color-light-gray);
color: var(–color-navy);
}

/* ═══════════════════════════════════════════
7. MOBILE MENU
═══════════════════════════════════════════ */

.aphq-mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
color: var(–color-text);
flex-shrink: 0;
}

.aphq-mobile-menu-btn svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
}

.aphq-mobile-nav {
display: none;
background: var(–color-navy);
padding-block: var(–space-3);
}

.aphq-mobile-nav.is-open { display: block; }

.aphq-mobile-nav__link {
display: block;
padding: var(–space-3) var(–space-6);
color: rgba(255,255,255,0.9);
font-weight: var(–weight-semibold);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
}

.aphq-mobile-nav__sublink {
display: block;
padding: var(–space-2) var(–space-8);
color: rgba(255,255,255,0.7);
font-size: var(–text-sm);
text-decoration: none;
}

/* ═══════════════════════════════════════════
8. TRUST BAR
═══════════════════════════════════════════ */

.aphq-trust-bar {
background-color: var(–color-light-gray);
border-block: 1px solid var(–color-border);
padding-block: var(–space-5);
}

.aphq-trust-bar__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(–space-4);
max-width: var(–max-w-content);
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-trust-bar__item {
display: flex;
align-items: center;
gap: var(–space-3);
}

.aphq-trust-bar__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
color: var(–color-navy);
}

.aphq-trust-bar__icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
}

.aphq-trust-bar__text strong {
display: block;
font-size: var(–text-sm);
font-weight: var(–weight-bold);
color: var(–color-text);
}

.aphq-trust-bar__text span {
font-size: var(–text-xs);
color: var(–color-text-muted);
}

/* ═══════════════════════════════════════════
9. PRODUCT CARD
═══════════════════════════════════════════ */

.aphq-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(–grid-gap);
}

.aphq-product-card {
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: var(–radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(–transition-normal), transform var(–transition-normal);
}

.aphq-product-card:hover {
box-shadow: var(–shadow-md);
transform: translateY(-2px);
}

.aphq-product-card__img-wrap {
aspect-ratio: 1 / 1;
background: var(–color-light-gray);
overflow: hidden;
position: relative;
}

.aphq-product-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(–space-4);
transition: transform var(–transition-slow);
}

.aphq-product-card:hover .aphq-product-card__img-wrap img {
transform: scale(1.04);
}

.aphq-product-card__badges {
position: absolute;
top: var(–space-3);
left: var(–space-3);
display: flex;
flex-direction: column;
gap: var(–space-1);
}

.aphq-product-card__body {
padding: var(–space-4);
flex: 1;
display: flex;
flex-direction: column;
gap: var(–space-2);
}

.aphq-product-card__sku {
font-family: var(–font-mono);
font-size: var(–text-xs);
color: var(–color-text-muted);
letter-spacing: 0.02em;
}

.aphq-product-card__title {
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
color: var(–color-text);
line-height: var(–leading-snug);
flex: 1;
}

.aphq-product-card__title a {
color: inherit;
text-decoration: none;
}

.aphq-product-card__title a:hover {
color: var(–color-action-blue);
}

.aphq-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(–space-2);
margin-top: auto;
padding-top: var(–space-3);
border-top: 1px solid var(–color-border);
}

.aphq-product-card__price {
font-family: var(–font-mono);
font-size: var(–text-lg);
font-weight: var(–weight-semibold);
color: var(–color-text);
}

.aphq-product-card__add {
padding: var(–space-2) var(–space-4);
font-size: var(–text-sm);
}

/* ═══════════════════════════════════════════
10. BADGES
═══════════════════════════════════════════ */

.aphq-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(–space-2);
font-size: var(–text-xs);
font-weight: var(–weight-semibold);
border-radius: var(–radius-sm);
line-height: 1.4;
white-space: nowrap;
}

.aphq-badge–in-stock {
background: #EBF7F1;
color: var(–color-in-stock);
}

.aphq-badge–out-stock {
background: #FEF2F2;
color: var(–color-out-stock);
}

.aphq-badge–oem {
background: #EBF1FA;
color: var(–color-navy);
}

.aphq-badge–sale {
background: #FFF3E6;
color: var(–color-accent);
}

/* ═══════════════════════════════════════════
11. BREADCRUMB
═══════════════════════════════════════════ */

.aphq-breadcrumb {
padding-block: var(–space-4);
border-bottom: 1px solid var(–color-border);
}

.aphq-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(–space-2);
font-size: var(–text-sm);
color: var(–color-text-muted);
}

.aphq-breadcrumb__item + .aphq-breadcrumb__item::before {
content: “/”;
color: var(–color-border);
margin-right: var(–space-2);
}

.aphq-breadcrumb__link {
color: var(–color-action-blue);
text-decoration: none;
}

.aphq-breadcrumb__link:hover { text-decoration: underline; }

.aphq-breadcrumb__current { color: var(–color-text); }

/* ═══════════════════════════════════════════
12. FITMENT MODULE
═══════════════════════════════════════════ */

.aphq-fitment {
background: #EBF1FA;
border: 1px solid #C5D7EE;
border-radius: var(–radius-md);
padding: var(–space-5) var(–space-6);
}

.aphq-fitment__label {
font-size: var(–text-xs);
font-weight: var(–weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(–color-navy);
margin-bottom: var(–space-2);
}

.aphq-fitment__body {
font-size: var(–text-sm);
color: var(–color-text);
line-height: var(–leading-relaxed);
}

.aphq-fitment__disclaimer {
font-size: var(–text-xs);
color: var(–color-text-muted);
margin-top: var(–space-3);
}

/* ═══════════════════════════════════════════
13. SIDEBAR FILTERS
═══════════════════════════════════════════ */

.aphq-shop-layout {
display: grid;
grid-template-columns: var(–sidebar-w) 1fr;
gap: var(–space-8);
align-items: start;
}

.aphq-sidebar {
position: sticky;
top: calc(var(–header-total) + var(–space-4));
}

.aphq-filter-group {
border-bottom: 1px solid var(–color-border);
padding-block: var(–space-5);
}

.aphq-filter-group:last-child { border-bottom: none; }

.aphq-filter-group__title {
font-size: var(–text-sm);
font-weight: var(–weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(–color-text);
margin-bottom: var(–space-4);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.aphq-filter-option {
display: flex;
align-items: center;
gap: var(–space-2);
padding-block: var(–space-1);
font-size: var(–text-sm);
color: var(–color-text);
cursor: pointer;
}

.aphq-filter-option input[type=”checkbox”] {
width: 16px;
height: 16px;
accent-color: var(–color-navy);
cursor: pointer;
flex-shrink: 0;
}

.aphq-filter-count {
color: var(–color-text-muted);
font-size: var(–text-xs);
margin-left: auto;
}

.aphq-filter-price {
display: flex;
gap: var(–space-2);
align-items: center;
}

.aphq-filter-price input[type=”number”] {
width: 80px;
padding: var(–space-2) var(–space-3);
font-family: var(–font-mono);
font-size: var(–text-sm);
border: 1px solid var(–color-border);
border-radius: var(–radius-sm);
}

/* ═══════════════════════════════════════════
14. PAGINATION
═══════════════════════════════════════════ */

.aphq-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(–space-2);
padding-top: var(–space-10);
}

.aphq-page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding-inline: var(–space-3);
border: 1px solid var(–color-border);
border-radius: var(–radius-md);
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
color: var(–color-text);
text-decoration: none;
transition: all var(–transition-fast);
}

.aphq-page-link:hover {
border-color: var(–color-navy);
background: var(–color-navy);
color: #fff;
}

.aphq-page-link.is-current {
background: var(–color-navy);
border-color: var(–color-navy);
color: #fff;
}

/* ═══════════════════════════════════════════
15. BLOG CARD
═══════════════════════════════════════════ */

.aphq-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(–grid-gap);
}

.aphq-blog-card {
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: var(–radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}

.aphq-blog-card__img {
aspect-ratio: 16 / 9;
background: var(–color-light-gray);
overflow: hidden;
}

.aphq-blog-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.aphq-blog-card__body {
padding: var(–space-5);
flex: 1;
display: flex;
flex-direction: column;
gap: var(–space-3);
}

.aphq-blog-card__category {
font-size: var(–text-xs);
font-weight: var(–weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(–color-action-blue);
}

.aphq-blog-card__title {
font-size: var(–text-lg);
font-weight: var(–weight-bold);
line-height: var(–leading-snug);
color: var(–color-text);
}

.aphq-blog-card__title a {
color: inherit;
text-decoration: none;
}

.aphq-blog-card__title a:hover { color: var(–color-action-blue); }

.aphq-blog-card__excerpt {
font-size: var(–text-sm);
color: var(–color-text-muted);
line-height: var(–leading-relaxed);
flex: 1;
}

.aphq-blog-card__meta {
font-size: var(–text-xs);
color: var(–color-text-muted);
display: flex;
align-items: center;
gap: var(–space-3);
padding-top: var(–space-3);
border-top: 1px solid var(–color-border);
}

/* ═══════════════════════════════════════════
16. FOOTER
═══════════════════════════════════════════ */

.aphq-footer {
background: var(–color-navy);
color: rgba(255,255,255,0.85);
margin-top: auto;
}

.aphq-footer__main {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(–space-10);
padding-block: var(–space-12);
max-width: var(–max-w-content);
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-footer__brand p {
font-size: var(–text-sm);
line-height: var(–leading-relaxed);
margin-top: var(–space-4);
color: rgba(255,255,255,0.65);
}

.aphq-footer__col-title {
font-size: var(–text-xs);
font-weight: var(–weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.5);
margin-bottom: var(–space-4);
}

.aphq-footer__links {
display: flex;
flex-direction: column;
gap: var(–space-3);
}

.aphq-footer__link {
color: rgba(255,255,255,0.75);
font-size: var(–text-sm);
text-decoration: none;
transition: color var(–transition-fast);
}

.aphq-footer__link:hover { color: #fff; }

/* Newsletter */
.aphq-newsletter__form {
display: flex;
gap: 0;
margin-top: var(–space-3);
}

.aphq-newsletter__input {
flex: 1;
padding: var(–space-3) var(–space-4);
font-family: var(–font-body);
font-size: var(–text-sm);
border: 1px solid rgba(255,255,255,0.25);
border-right: none;
border-radius: var(–radius-md) 0 0 var(–radius-md);
background: rgba(255,255,255,0.1);
color: #fff;
}

.aphq-newsletter__input::placeholder { color: rgba(255,255,255,0.45); }
.aphq-newsletter__input:focus { outline: none; border-color: rgba(255,255,255,0.6); }

.aphq-newsletter__btn {
padding: var(–space-3) var(–space-5);
background: var(–color-action-blue);
color: #fff;
border: none;
border-radius: 0 var(–radius-md) var(–radius-md) 0;
cursor: pointer;
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
transition: background-color var(–transition-fast);
}

.aphq-newsletter__btn:hover { background: #145a99; }

/* Footer bottom */
.aphq-footer__bottom {
background: rgba(0,0,0,0.2);
padding-block: var(–space-6);
}

.aphq-footer__bottom-inner {
max-width: var(–max-w-content);
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-footer__disclaimer {
font-size: var(–text-xs);
color: rgba(255,255,255,0.5);
line-height: var(–leading-relaxed);
margin-bottom: var(–space-4);
}

.aphq-footer__disclaimer a {
color: rgba(255,255,255,0.7);
text-decoration: underline;
}

.aphq-footer__legal {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(–space-4);
flex-wrap: wrap;
font-size: var(–text-xs);
color: rgba(255,255,255,0.4);
}

.aphq-footer__legal-links {
display: flex;
gap: var(–space-5);
}

.aphq-footer__legal-links a {
color: rgba(255,255,255,0.5);
text-decoration: none;
}

.aphq-footer__legal-links a:hover { color: rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════
17. CHAT WIDGET (Tawk.to placeholder)
═══════════════════════════════════════════ */

/* Tawk.to injects its own widget iframe.
These rules position a CSS-only placeholder for the prototype.
Remove .aphq-chat-placeholder in production (Tawk.to replaces it). */

.aphq-chat-placeholder {
position: fixed;
bottom: var(–space-6);
right: var(–space-6);
z-index: 9999;
}

.aphq-chat-placeholder__tab {
display: flex;
align-items: center;
gap: var(–space-2);
padding: var(–space-3) var(–space-5);
background: var(–color-navy);
color: #fff;
border-radius: var(–radius-full);
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
box-shadow: var(–shadow-lg);
cursor: pointer;
border: none;
transition: background-color var(–transition-fast);
}

.aphq-chat-placeholder__tab:hover { background: var(–color-action-blue); }

.aphq-chat-placeholder__dot {
width: 8px;
height: 8px;
border-radius: var(–radius-full);
background: #22C55E;
flex-shrink: 0;
}

/* ═══════════════════════════════════════════
18. WOOCOMMERCE OVERRIDES
Apply on top of the active theme.
═══════════════════════════════════════════ */

/* Mono for all prices and SKUs */
.woocommerce-Price-amount,
.price,
.woocommerce .sku,
.product_meta .sku,
.woocommerce-cart-form .product-subtotal,
.order-total .woocommerce-Price-amount {
font-family: var(–font-mono) !important;
font-variant-numeric: tabular-nums;
}

/* Primary buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order {
background-color: var(–color-navy) !important;
color: #fff !important;
border-radius: var(–radius-md) !important;
font-family: var(–font-body) !important;
font-weight: var(–weight-semibold) !important;
font-size: var(–text-base) !important;
padding: var(–space-3) var(–space-6) !important;
border: none !important;
transition: background-color var(–transition-fast) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
background-color: var(–color-action-blue) !important;
}

/* Alt buttons */
.woocommerce a.button.alt {
background-color: var(–color-action-blue) !important;
}

/* Form inputs */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
border: 2px solid var(–color-border) !important;
border-radius: var(–radius-md) !important;
font-family: var(–font-body) !important;
color: var(–color-text) !important;
padding: var(–space-3) var(–space-4) !important;
}

.woocommerce input.input-text:focus {
border-color: var(–color-action-blue) !important;
box-shadow: 0 0 0 3px rgba(26,107,181,0.15) !important;
outline: none !important;
}

/* Stock status */
.woocommerce .in-stock { color: var(–color-in-stock) !important; font-weight: var(–weight-semibold) !important; }
.woocommerce .out-of-stock { color: var(–color-out-stock) !important; }

/* ═══════════════════════════════════════════
19. FORM ELEMENTS
═══════════════════════════════════════════ */

.aphq-form-group {
display: flex;
flex-direction: column;
gap: var(–space-2);
}

.aphq-label {
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
color: var(–color-text);
}

.aphq-input {
padding: var(–space-3) var(–space-4);
font-family: var(–font-body);
font-size: var(–text-base);
color: var(–color-text);
background: var(–color-white);
border: 2px solid var(–color-border);
border-radius: var(–radius-md);
transition: border-color var(–transition-fast);
width: 100%;
}

.aphq-input:focus {
outline: none;
border-color: var(–color-action-blue);
box-shadow: 0 0 0 3px rgba(26,107,181,0.12);
}

.aphq-select {
appearance: none;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’16’ height=’16’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%235A6472′ stroke-width=’2’%3E%3Cpath d=’M6 9l6 6 6-6’/%3E%3C/svg%3E”);
background-repeat: no-repeat;
background-position: right var(–space-3) center;
padding-right: var(–space-8);
}

/* ═══════════════════════════════════════════
20. RESPONSIVE BREAKPOINTS
Mobile-first: styles apply upward from each breakpoint
═══════════════════════════════════════════ */

/* Mobile < 640px — base styles above are mobile */ /* Tablet: 640px+ */ @media (min-width: 640px) { .aphq-trust-bar__grid { grid-template-columns: repeat(2, 1fr); } .aphq-product-grid { grid-template-columns: repeat(2, 1fr); } .aphq-blog-grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop: 1024px+ */ @media (min-width: 1024px) { .aphq-trust-bar__grid { grid-template-columns: repeat(4, 1fr); } .aphq-product-grid { grid-template-columns: repeat(4, 1fr); } .aphq-blog-grid { grid-template-columns: repeat(3, 1fr); } .aphq-shop-layout { grid-template-columns: var(--sidebar-w) 1fr; } } /* Small mobile: hide nav text labels if needed */ @media (max-width: 639px) { .aphq-header__row1 { flex-wrap: wrap; height: auto; padding-block: var(--space-3); gap: var(--space-3); } .aphq-search { order: 3; max-width: 100%; flex-basis: 100%; } .aphq-header__util-link span { display: none; } .aphq-mobile-menu-btn { display: flex; } .aphq-nav { display: none; } .aphq-footer__main { grid-template-columns: 1fr; gap: var(--space-8); } .aphq-shop-layout { grid-template-columns: 1fr; } .aphq-product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) and (max-width: 1023px) { .aphq-mobile-menu-btn { display: flex; } .aphq-nav { display: none; } .aphq-mobile-nav.is-open { display: block; } .aphq-footer__main { grid-template-columns: repeat(2, 1fr); } .aphq-shop-layout { grid-template-columns: 1fr; } } /* ── aphq-wp-overrides.css ── */ /** * AppliancePartsHQ — WordPress / WooCommerce integration * Loaded after tokens.css + aphq-base.css in aphq-custom.css */ /* ── One logo only (theme Site Identity; hide duplicates) ── */ header .wp-block-site-title, .site-header .site-branding .site-title, .site-header .site-title { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; } footer .custom-logo-link, footer .wp-block-site-logo, .site-footer .custom-logo-link, .site-footer .site-logo, .site-footer .wp-block-site-logo { display: none !important; } .page-template-page-with-title .entry-header, .home .entry-header, .home header.wp-block-post-title, .home .wp-block-post-title { display: none !important; } .custom-logo, .wp-block-site-logo img, .wp-block-site-logo .custom-logo { max-height: 40px; width: auto; height: auto; } /* ── Theme nav → navy row 2 (.aphq-nav design) ── */ /* Beat WP block nav `color: inherit` (.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content) */ .aphq-primary-nav, .aphq-nav, nav.aphq-primary-nav, .main-navigation.aphq-primary-nav, .wp-block-navigation.aphq-primary-nav, .wp-block-navigation.aphq-nav { background-color: var(--color-navy); color: #F3F4F4; } .aphq-primary-nav .main-nav > ul,
.aphq-primary-nav > ul,
.aphq-primary-nav .wp-block-navigation__container,
.wp-block-navigation.aphq-primary-nav .wp-block-navigation__container,
.wp-block-navigation.aphq-nav .wp-block-navigation__container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
max-width: var(–max-w-content);
margin-inline: auto;
min-height: var(–header-row2-h);
}

.aphq-primary-nav .main-nav > ul > li > a,
.aphq-primary-nav > ul > li > a,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > button.wp-block-navigation-item__content,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > button.wp-block-navigation-item__content {
color: #F3F4F4;
font-weight: var(–weight-semibold);
font-size: var(–text-sm);
padding: 0 var(–space-5);
text-decoration: none;
display: flex;
align-items: center;
min-height: var(–header-row2-h);
}

.aphq-primary-nav .main-nav > ul > li > a:hover,
.aphq-primary-nav > ul > li > a:hover,
.aphq-primary-nav .main-nav > ul > li.current-menu-item > a,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > button.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > button.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}

.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
outline: 2px solid rgba(243, 244, 244, 0.8);
outline-offset: -3px;
}

.wp-block-navigation.aphq-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu .wp-block-navigation__submenu-icon,
.wp-block-navigation.aphq-nav > .wp-block-navigation__container > .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
color: #F3F4F4;
}

.aphq-primary-nav .sub-menu,
.aphq-primary-nav .wp-block-navigation__submenu-container {
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: 0 0 var(–radius-md) var(–radius-md);
box-shadow: var(–shadow-md);
min-width: 11rem;
padding: var(–space-2) 0;
color: var(–color-text);
}

.aphq-primary-nav .sub-menu a,
.aphq-primary-nav .wp-block-navigation__submenu-container a,
.wp-block-navigation.aphq-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation.aphq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
color: var(–color-text);
font-weight: var(–weight-semibold);
padding: var(–space-2) var(–space-5);
min-height: auto;
}

.aphq-primary-nav .sub-menu a:hover,
.wp-block-navigation.aphq-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation.aphq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
background: var(–color-light-gray);
color: var(–color-navy);
}

/* Block theme header search */
.wp-block-search__input,
.woocommerce-product-search input[type=”search”] {
font-family: var(–font-mono);
font-size: var(–text-sm);
border: 2px solid var(–color-border);
border-radius: var(–radius-md);
}

.wp-block-search__button,
.woocommerce-product-search button {
background: var(–color-navy) !important;
color: #fff !important;
border-radius: var(–radius-md);
font-weight: var(–weight-semibold);
}

/* ── Homepage hero (navy gradient, accent CTA) ── */

.aphq-hero {
background: linear-gradient(135deg, var(–color-navy) 0%, #0a2e52 100%);
padding-block: var(–space-16) var(–space-12);
text-align: center;
position: relative;
overflow: hidden;
margin: 0;
border: none;
border-radius: 0;
}

.aphq-hero::before {
content: “”;
position: absolute;
inset: 0;
background: url(“data:image/svg+xml,%3Csvg width=’60’ height=’60’ viewBox=’0 0 60 60′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg fill=’none’ fill-rule=’evenodd’%3E%3Cg fill=’%23ffffff’ fill-opacity=’0.03’%3E%3Cpath d=’M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);
pointer-events: none;
}

.aphq-hero__inner {
position: relative;
max-width: 700px;
margin-inline: auto;
padding-inline: var(–space-6);
}

.aphq-hero__eyebrow {
display: inline-block;
font-size: var(–text-xs);
font-weight: var(–weight-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(–space-4);
}

.aphq-hero__headline,
.aphq-hero h1 {
font-size: clamp(var(–text-3xl), 5vw, var(–text-5xl));
font-weight: var(–weight-bold);
color: #fff;
line-height: var(–leading-tight);
margin-bottom: var(–space-4);
}

.aphq-hero__subline,
.aphq-hero__sub {
font-size: var(–text-lg);
color: rgba(255, 255, 255, 0.75);
margin-bottom: var(–space-8);
line-height: var(–leading-relaxed);
}

.aphq-hero-search,
.aphq-hero__search {
display: flex;
gap: 0;
max-width: 580px;
margin-inline: auto;
}

.aphq-hero-search__input,
.aphq-hero__search input[type=”search”] {
flex: 1;
height: 52px;
padding: 0 var(–space-5);
font-family: var(–font-body);
font-size: var(–text-base);
color: var(–color-text);
background: var(–color-white);
border: none;
border-radius: var(–radius-md) 0 0 var(–radius-md);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.aphq-hero-search__input:focus,
.aphq-hero__search input[type=”search”]:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.5);
}

.aphq-hero-search__input::placeholder,
.aphq-hero__search input[type=”search”]::placeholder {
font-family: var(–font-mono);
font-size: var(–text-sm);
color: #999;
}

.aphq-hero-search__btn,
.aphq-hero__search button {
height: 52px;
padding: 0 var(–space-6);
background: var(–color-accent);
color: #fff;
border: none;
border-radius: 0 var(–radius-md) var(–radius-md) 0;
font-family: var(–font-body);
font-size: var(–text-base);
font-weight: var(–weight-bold);
cursor: pointer;
transition: background-color var(–transition-fast);
white-space: nowrap;
}

.aphq-hero-search__btn:hover,
.aphq-hero__search button:hover {
background: #c96218;
}

.aphq-hero__hint {
margin-top: var(–space-4);
font-size: var(–text-xs);
color: rgba(255, 255, 255, 0.5);
}

.aphq-hero__hint a {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
}

/* ── Homepage appliance grid + brand pills ── */

.aphq-appliance-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(–space-4);
}

.aphq-appliance-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(–space-3);
padding: var(–space-6) var(–space-4);
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: var(–radius-lg);
text-decoration: none;
color: var(–color-text);
transition: box-shadow var(–transition-normal), border-color var(–transition-normal);
text-align: center;
}

.aphq-appliance-card:hover {
box-shadow: var(–shadow-md);
border-color: var(–color-action-blue);
color: var(–color-navy);
}

.aphq-appliance-card__icon {
width: 52px;
height: 52px;
color: var(–color-navy);
}

.aphq-appliance-card__label {
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
line-height: var(–leading-snug);
}

.aphq-brands-strip .aphq-brands,
.aphq-brands.aphq-brands–pills {
display: flex;
flex-wrap: wrap;
gap: var(–space-3);
align-items: center;
background: transparent;
padding: 0;
border-radius: 0;
}

.aphq-brand-pill {
padding: var(–space-2) var(–space-5);
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: var(–radius-full);
font-size: var(–text-sm);
font-weight: var(–weight-semibold);
color: var(–color-text);
text-decoration: none;
transition: all var(–transition-fast);
}

.aphq-brand-pill:hover {
border-color: var(–color-navy);
background: var(–color-navy);
color: #fff;
}

/* Legacy category grid (backward compat) */
.aphq-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: var(–space-4);
}

.aphq-category-card {
display: block;
background: var(–color-white);
border: 1px solid var(–color-border);
border-radius: var(–radius-lg);
padding: var(–space-6) var(–space-4);
text-align: center;
text-decoration: none;
color: var(–color-text);
font-weight: var(–weight-semibold);
transition: border-color var(–transition-fast), box-shadow var(–transition-fast);
}

.aphq-category-card:hover {
border-color: var(–color-action-blue);
box-shadow: var(–shadow-md);
color: var(–color-navy);
}

/* Fitment disclaimer line on product pages */
.aphq-fitment__disclaimer {
margin-top: var(–space-3);
font-size: var(–text-sm);
color: var(–color-text-muted);
}

/* Site-wide footer disclaimer (light bar above theme footer) */
.aphq-footer-disclaimer {
background: var(–color-light-gray);
border-top: 1px solid var(–color-border);
padding: var(–space-4) var(–space-6);
margin-top: var(–space-8);
font-size: var(–text-xs);
line-height: var(–leading-relaxed);
color: var(–color-text-muted);
max-width: var(–max-w-content);
margin-inline: auto;
}

.aphq-footer-disclaimer a {
color: var(–color-action-blue);
}

/* WooCommerce product grid on homepage */
.aphq-home .woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(–space-5);
}

.aphq-home .woocommerce ul.products li.product {
border: 1px solid var(–color-border);
border-radius: var(–radius-lg);
padding: var(–space-4);
background: var(–color-white);
margin: 0 !important;
width: 100% !important;
}

.woocommerce span.onsale {
background: var(–color-accent) !important;
}

.wp-block-button__link {
background-color: var(–color-navy) !important;
color: #fff !important;
border-radius: var(–radius-md);
font-weight: var(–weight-semibold);
}

.wp-block-button__link:hover {
background-color: var(–color-action-blue) !important;
}

@media (min-width: 640px) {
.aphq-appliance-grid {
grid-template-columns: repeat(3, 1fr);
}
}

@media (min-width: 1024px) {
.aphq-appliance-grid {
grid-template-columns: repeat(6, 1fr);
}
}

@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}