/**
 * FindaPro Nordic Ice — Redesign Stylesheet
 * Visual-only reskin. Does NOT modify existing style.css.
 * Enqueued at priority 25 (after all existing stylesheets).
 * Cache-bust: WP appends ?ver=<filemtime> automatically; this file's mtime
 * updates on every save. If the live site shows stale CSS, clear server-side
 * cache (WP cache plugin) and CDN cache (Cloudflare etc.), then hard-reload.
 *
 * Pages completed:
 *   [x] Global tokens
 *   [x] Header + nav + dropdowns + mobile menu
 *   [x] Homepage (front-page.php): hero, search, popular chips,
 *       trust strip, categories, how it works, testimonials,
 *       VIP section, pro CTA, service area
 *   [x] Footer (footer.php): 4-col grid, dark accent ground,
 *       contact-flow popup re-themed
 *   [x] Categories landing (page-categories.php): Nordic Ice page header,
 *       horizontal card grid with Lucide icons + verified-pro count
 *   [x] Category detail (category.php — child override): Nordic Ice
 *       breadcrumb + H1 with pro count, two-col layout (sticky sidebar
 *       + cards grid), inline pro cards with initials avatars,
 *       "New on FindaPro" pill, and city chip
 *   [x] Search results (page-search.php — child override): same Nordic
 *       Ice layout as category detail, plus hero search bar, functional
 *       Sort/Verified, rating-pill variant on cards, and pagination
 *   [x] Articles index (archive-article.php — child override): light page,
 *       white hero panel with mono ARTICLES eyebrow + H1 + subtitle +
 *       Nordic search bar, sticky pill filter chips, per-category
 *       grouped sections of 2-col no-image cards (eyebrow + title +
 *       optional Featured pill), reused .fp-pagination + .fp-category-empty
 *   [x] Suppliers archive (archive-supplier.php — child override):
 *       category-detail layout (2-col sidebar + grid) with functional
 *       City + Category filtering (?city=&supplier_cat=). Cards: initials
 *       avatar + name + tagline + service tags + city chip. Reuses
 *       Sections 15/16 selectors; adds service-tag pills (Section 18)
 *
 *   r2 (2026-05-09): sidebar Category nav switched from hardcoded 8-slug
 *       array to a single `get_terms('category', hide_empty=false)` call
 *       on category.php; page-search.php reuses its existing
 *       `$all_categories = get_categories(...)` query. No broken links;
 *       new categories auto-appear once added in WP admin.
 *
 * Build: 2026-05-09 suppliers-r1
 */

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
  /* Surfaces */
  --fp-bg:              #f5f7f9;
  --fp-surface:         #ffffff;
  --fp-surface-alt:     #eef2f5;
  --fp-border:          #dde3e8;
  --fp-border-strong:   #bbc4cd;

  /* Text */
  --fp-text:            #0e1b26;
  --fp-text-muted:      #516371;
  --fp-text-dim:        #8593a0;

  /* Brand */
  --fp-primary:         #1e6b8a;
  --fp-primary-hover:   #185a75;
  --fp-primary-fg:      #ffffff;
  --fp-accent:          #0e1b26;
  --fp-accent-hover:    #000000;
  --fp-success:         #2d7a5f;
  --fp-star:            #1e6b8a;

  /* Typography */
  --fp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fp-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Shape */
  --fp-radius:      8px;
  --fp-radius-lg:   14px;
  --fp-radius-pill: 999px;

  /* Elevation */
  --fp-shadow-sm: 0 1px 2px rgba(14,27,38,0.04), 0 1px 3px rgba(14,27,38,0.06);
  --fp-shadow:    0 4px 12px rgba(14,27,38,0.06), 0 2px 4px rgba(14,27,38,0.04);
  --fp-shadow-lg: 0 12px 32px rgba(14,27,38,0.10), 0 4px 8px rgba(14,27,38,0.06);

  /* Spacing scale */
  --fp-s1: 4px;  --fp-s2: 8px;   --fp-s3: 12px; --fp-s4: 16px;
  --fp-s5: 20px; --fp-s6: 24px;  --fp-s7: 32px; --fp-s8: 48px;
  --fp-s9: 64px; --fp-s10: 96px;
}

/* ============================================================
   1. GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--fp-sans);
  background-color: var(--fp-bg);
  color: var(--fp-text);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   2. HEADER SHELL
   ============================================================ */
.fp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
  box-shadow: none; /* reset any previous shadow */
}

.fp-header-inner {
  width: 100%;
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ============================================================
   3. LOGO
   ============================================================ */
.fp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.fp-logo:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 3px;
  border-radius: var(--fp-radius);
}

/* The "F" square tile */
.fp-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--fp-primary);
  color: #ffffff;
  font-family: var(--fp-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* "FindaPro" wordmark */
.fp-logo-wordmark {
  font-family: var(--fp-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--fp-text);
  letter-spacing: -0.3px;
  line-height: 1;
}

/* ".fi" suffix */
.fp-logo-fi {
  color: var(--fp-text-dim);
  font-weight: 400;
}

/* ============================================================
   4. DESKTOP NAV
   ============================================================ */
.fp-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-start;
  gap: 2px;
}

/* Shared style for nav links and the About trigger button */
.fp-nav > a,
.fp-nav > div > button.fp-nav-trigger {
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: var(--fp-radius);
  position: relative;
  transition: color 200ms ease, background-color 200ms ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  letter-spacing: -0.1px;
}

.fp-nav > a:hover,
.fp-nav > div > button.fp-nav-trigger:hover {
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
}

.fp-nav > a:focus-visible,
.fp-nav > div > button.fp-nav-trigger:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Active / current page underline */
.fp-nav > a[aria-current="page"] {
  color: var(--fp-primary);
}

.fp-nav > a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -1px; /* sits flush on the header's bottom border */
  left: 13px;
  right: 13px;
  height: 1.5px;
  background-color: var(--fp-primary);
  border-radius: 1px;
}

/* ============================================================
   5. HEADER RIGHT — language picker + For Pros button
   ============================================================ */
.fp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Language button */
.fp-lang-btn {
  font-family: var(--fp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fp-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--fp-radius);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 200ms ease, background-color 200ms ease;
  white-space: nowrap;
  line-height: 1;
}

.fp-lang-btn:hover {
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
}

.fp-lang-btn:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

.fp-lang-btn .fp-font-emoji {
  font-size: 16px;
  line-height: 1;
}

/* "For Pros" outline button */
.fp-btn-forpros {
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text);
  background: none;
  border: 1px solid var(--fp-border-strong);
  border-radius: var(--fp-radius);
  padding: 7px 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
  line-height: 1;
}

.fp-btn-forpros:hover {
  background-color: var(--fp-surface-alt);
  border-color: var(--fp-border-strong);
  color: var(--fp-primary);
}

.fp-btn-forpros:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* ============================================================
   6. DROPDOWNS (shared: About menu + Language menu)
   ============================================================ */
.fp-nav > div,
.fp-header-actions > div {
  position: relative;
}

.fp-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  min-width: 185px;
  z-index: 200;
  overflow: hidden;
  display: none;
  padding: 6px;
}

.fp-dropdown.show {
  display: block;
  animation: fp-dd-in 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fp-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fp-dropdown a,
.fp-dropdown [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fp-text);
  text-decoration: none;
  border-radius: var(--fp-radius);
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.fp-dropdown a:hover,
.fp-dropdown [role="menuitem"]:hover {
  background-color: var(--fp-surface-alt);
  color: var(--fp-primary);
}

.fp-dropdown a:focus-visible,
.fp-dropdown [role="menuitem"]:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: -2px;
  border-radius: var(--fp-radius);
}

.fp-dropdown a[aria-current="page"],
.fp-dropdown a[aria-current="true"],
.fp-dropdown [role="menuitem"][aria-current="page"],
.fp-dropdown [role="menuitem"][aria-current="true"] {
  color: var(--fp-primary);
  font-weight: 500;
}

/* ============================================================
   7. MOBILE CONTROLS (hamburger area — hidden on desktop)
   ============================================================ */
.fp-mobile-controls {
  display: none;
  align-items: center;
  gap: 4px;
}

/* Shared icon button used for hamburger + mobile lang picker */
.fp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fp-radius);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fp-text-muted);
  transition: background-color 150ms ease, color 150ms ease;
  position: relative; /* for dropdown positioning */
}

.fp-icon-btn:hover {
  background-color: var(--fp-surface-alt);
  color: var(--fp-text);
}

.fp-icon-btn:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* ============================================================
   8. MOBILE SLIDE-IN MENU
   ============================================================ */
.fp-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 38, 0.45);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.fp-mobile-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.fp-mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100%;
  background-color: var(--fp-surface);
  z-index: 200;
  overflow-y: auto;
  transition: right 220ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--fp-shadow-lg);
  display: flex;
  flex-direction: column;
}

.fp-mobile-menu.show {
  right: 0;
}

/* Close × button inside the panel */
.fp-mobile-menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fp-radius);
  background-color: var(--fp-surface-alt);
  border: none;
  cursor: pointer;
  color: var(--fp-text-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.fp-mobile-menu-close:hover {
  background-color: var(--fp-border);
  color: var(--fp-text);
}

.fp-mobile-menu-close:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Mobile nav links */
.fp-mobile-menu nav {
  display: flex;
  flex-direction: column;
  padding: 68px 20px 20px;
  flex: 1;
}

.fp-mobile-menu nav a {
  font-family: var(--fp-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--fp-text);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--fp-border);
  transition: color 150ms ease;
  display: block;
}

.fp-mobile-menu nav a:hover {
  color: var(--fp-primary);
}

.fp-mobile-menu nav a[aria-current="page"] {
  color: var(--fp-primary);
}

.fp-mobile-menu nav a:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "For Pros" call-to-action at bottom of mobile panel */
.fp-mobile-forpros {
  display: block;
  margin: 20px 20px 28px;
  text-align: center;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-primary);
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-radius);
  padding: 11px 16px;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.fp-mobile-forpros:hover {
  background-color: var(--fp-primary);
  color: #ffffff;
}

/* ============================================================
   9. SKIP TO CONTENT (accessibility)
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--fp-primary);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 0 0 var(--fp-radius) var(--fp-radius);
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  z-index: 9999;
  transition: top 150ms ease;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================================
   10. RESPONSIVE BREAKPOINTS — header
   ============================================================ */

/* ── Mobile (≤ 768px): hide desktop nav & actions, show hamburger ── */
@media (max-width: 768px) {
  .fp-header-inner {
    padding: 0 20px;
    gap: 12px;
  }

  .fp-nav {
    display: none !important;
  }

  .fp-header-actions {
    display: none !important;
  }

  .fp-mobile-controls {
    display: flex;
  }
}

/* ── Desktop (≥ 769px): hide mobile controls ── */
@media (min-width: 769px) {
  .fp-mobile-controls {
    display: none !important;
  }
}

/* ── Tablet (769px–1024px): tighten nav padding ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .fp-header-inner {
    padding: 0 24px;
    gap: 16px;
  }

  .fp-nav > a,
  .fp-nav > div > button.fp-nav-trigger {
    padding: 6px 10px;
  }
}

/* ============================================================
   11. HOMEPAGE — front-page.php
   ============================================================ */

/* 11.1 Page wrapper override (kills .min-h-screen cream bg from old system) */
.min-h-screen {
  background-color: var(--fp-bg) !important;
  font-family: var(--fp-sans);
  color: var(--fp-text);
}

/* 11.2 Section helpers
   Section head shares the same 1080px centered container as the grid/cards below
   so the eyebrow / h2 / intro left-edge lines up with the first column of the grid. */
.fp-section-head {
  max-width: 1080px;
  margin: 0 auto var(--fp-s7);
  padding: 0;
  text-align: left;
}

/* Inside the section head, keep the readable text constrained
   so headings/intro don't span the full 1080px and become hard to read. */
.fp-section-head .fp-section-h2 {
  max-width: 720px;
}

.fp-section-head .fp-section-intro {
  max-width: 600px;
}

.fp-eyebrow {
  display: inline-block;
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin-bottom: var(--fp-s3);
}

.fp-section-h2 {
  font-family: var(--fp-sans);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--fp-text);
  margin: 0 0 var(--fp-s4);
}

.fp-section-intro {
  font-family: var(--fp-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fp-text-muted);
  margin: 0;
}

.fp-section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--fp-s7);
}

.fp-btn-icon {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  flex-shrink: 0;
}

/* 11.3 Hero — overrides design-system .fp-hero / .fp-hero-overlay */
.fp-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 560px !important;
  height: auto !important;
  max-height: 680px !important;
  overflow: hidden !important;
  background-color: var(--fp-accent);
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.fp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.fp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 27, 38, 0.45) 0%,
    rgba(14, 27, 38, 0.65) 100%
  );
  z-index: 1;
}

.fp-hero .fp-hero-content,
.fp-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: var(--fp-s7) var(--fp-s8) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

.fp-hero .fp-hero-eyebrow,
.fp-hero-eyebrow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--fp-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: var(--fp-s4) !important;
  white-space: nowrap !important;
}

/* Belt-and-suspenders sizing: HTML attrs set the box; CSS forces it again
   in case a parent reset has `svg { width: 100% }` or similar. */
.fp-hero-eyebrow-icon {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px;
  min-height: 10px;
  flex: 0 0 10px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.62);
  vertical-align: middle;
}

.fp-hero-eyebrow-text {
  display: inline-block;
  vertical-align: middle;
}

.fp-hero .fp-hero-title,
.fp-hero-title {
  font-family: var(--fp-sans) !important;
  font-size: 56px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.6px !important;
  color: #ffffff !important;
  margin: 0 0 var(--fp-s4) !important;
  max-width: 640px !important;
  text-align: left !important;
}

.fp-hero-title em,
.fp-hero-title i {
  font-family: "Playfair Display", "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1.5px;
}

.fp-hero .fp-hero-sub,
.fp-hero-sub {
  font-family: var(--fp-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 0 var(--fp-s5) !important;
  max-width: 480px !important;
  text-align: left !important;
}

/* 11.4 Search bar (override) — pill-shaped */
.search-bar-container {
  width: 100%;
  max-width: 760px;
  position: relative;
  margin: 0;
}

.fp-hero .fp-search-bar,
.fp-search-bar {
  display: flex !important;
  flex-direction: row !important;
  background-color: var(--fp-surface) !important;
  border-radius: var(--fp-radius-pill) !important;
  box-shadow: var(--fp-shadow-lg);
  overflow: visible !important;
  padding: 5px !important;
  gap: 4px !important;
  transition: box-shadow 200ms ease;
}

.fp-search-bar:focus-within {
  box-shadow: var(--fp-shadow-lg), 0 0 0 3px rgba(30, 107, 138, 0.22);
}

.fp-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.fp-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fp-text-dim);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.fp-search-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.fp-search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  font-family: var(--fp-sans);
  font-size: 14px;
  color: var(--fp-text);
  background-color: transparent;
  border: none;
  border-radius: var(--fp-radius-pill);
  outline: none;
}

.fp-search-input::placeholder {
  color: var(--fp-text-dim);
}

.fp-search-input:focus {
  outline: none;
}

.desktop-search-controls {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  gap: 4px;
}

/* Wrapper around the city <select> so we can overlay a pin icon */
.fp-search-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--fp-border);
  padding-left: 4px;
}

.fp-search-pin-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  color: var(--fp-text-muted);
  pointer-events: none;
  z-index: 2;
}

.fp-search-select {
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text);
  background-color: transparent;
  border: none;
  height: 42px;
  padding: 0 28px 0 34px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22 fill=%22none%22 stroke=%22%23516371%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M1 1.5 6 6.5 11 1.5%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  outline: none;
  min-width: 140px;
}

.fp-search-select:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
  border-radius: var(--fp-radius);
}

/* High-specificity selectors so this beats the .fp-hero-content .fp-btn-primary
   block rule further down (which sets border-radius: var(--fp-radius)). */
.fp-hero .fp-search-bar .fp-search-submit,
.fp-hero-content .fp-search-submit,
.fp-search-bar button.fp-search-submit,
.fp-search-submit.fp-search-submit {
  height: 42px !important;
  min-width: 124px !important;
  padding: 0 32px !important;
  border-radius: 9999px !important;
  background-color: var(--fp-primary) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--fp-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  cursor: pointer !important;
}

.fp-hero .fp-search-bar .fp-search-submit:hover,
.fp-hero-content .fp-search-submit:hover,
.fp-search-bar button.fp-search-submit:hover,
.fp-search-submit.fp-search-submit:hover {
  background-color: var(--fp-primary-hover) !important;
}

.fp-hero .fp-search-bar .fp-search-submit:focus-visible,
.fp-hero-content .fp-search-submit:focus-visible,
.fp-search-bar button.fp-search-submit:focus-visible,
.fp-search-submit.fp-search-submit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 107, 138, 0.35) !important;
}

.mobile-search-controls {
  display: none;
  margin-top: 8px;
  gap: 8px;
}

.fp-search-select-mobile {
  flex: 1 1 auto;
  height: 52px;
  border-left: none;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  background-color: var(--fp-surface);
  box-shadow: var(--fp-shadow-sm);
}

.fp-search-submit-mobile {
  flex-shrink: 0;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--fp-radius);
}

.fp-autocomplete-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  z-index: 100;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-lg);
  display: none;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
}

.fp-autocomplete-results li {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--fp-text);
  border-radius: var(--fp-radius);
  cursor: pointer;
}

.fp-autocomplete-results li:hover,
.fp-autocomplete-results li[aria-selected="true"] {
  background-color: var(--fp-surface-alt);
  color: var(--fp-primary);
}

/* 11.5 Hero chips */
.fp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: var(--fp-s5);
}

.fp-hero .fp-hero-chips-label,
.fp-hero-chips-label {
  font-family: var(--fp-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin-right: 6px;
}

.fp-hero .fp-hero-chip,
.fp-hero-chip {
  font-family: var(--fp-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--fp-radius-pill) !important;
  padding: 7px 16px !important;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.fp-hero-chip:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

.fp-hero-chip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 11.6 Trust strip */
.fp-trust-strip {
  background-color: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
  padding: var(--fp-s7) var(--fp-s5);
}

.fp-trust-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fp-s7);
}

.fp-trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: var(--fp-s7);
  position: relative;
}

.fp-trust-icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  color: var(--fp-primary);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fp-trust-icon svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

.fp-trust-title {
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fp-text);
  margin: 0;
  letter-spacing: -0.1px;
}

.fp-trust-desc {
  font-family: var(--fp-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fp-text-muted);
  margin: 0;
}

/* 11.7 Categories — overrides design-system .fp-card-category */
.fp-section.fp-categories {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--fp-s10) var(--fp-s8);
  background: transparent;
}

.fp-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .fp-categories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Override the old design-system colored top strip + circle icon */
.fp-card-category {
  background-color: var(--fp-surface) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius-lg) !important;
  box-shadow: none !important;
  padding: var(--fp-s7) var(--fp-s5) var(--fp-s5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--fp-s4) !important;
  text-decoration: none;
  text-align: left !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  overflow: visible !important;
}

.fp-card-category::before {
  display: none !important;
}

.fp-card-category:hover {
  border-color: var(--fp-primary) !important;
  box-shadow: var(--fp-shadow) !important;
  transform: translateY(-2px) !important;
}

.fp-card-category:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 3px;
}

.fp-card-category .fp-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background-color: var(--fp-surface-alt) !important;
  color: var(--fp-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  padding: 0 !important;
}

/* Lock the SVG size with !important + min-width/height to defeat any
   global `svg { width: 100% }` reset on the live site. */
.fp-card-category .fp-card-icon svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

.fp-card-category .fp-card-label {
  font-family: var(--fp-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-text);
  letter-spacing: -0.1px;
  line-height: 1.2;
}

.fp-card-category .fp-card-sub {
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fp-text-dim);
  margin-top: -8px;
}

/* 11.8 How It Works — overrides design-system step styles */
.fp-section.fp-how {
  max-width: none;
  margin: 0;
  padding: var(--fp-s10) var(--fp-s8);
  background-color: var(--fp-surface);
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
}

.fp-how .fp-section-head {
  margin-bottom: var(--fp-s8);
}

.fp-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-s7);
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 768px) {
  .fp-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-s8);
  }
}

.fp-card-step {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--fp-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--fp-s5) 0 0 !important;
  text-align: left !important;
  position: relative;
}

.fp-step-number {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  margin: 0 0 var(--fp-s4) !important;
  display: block !important;
  font-family: var(--fp-mono) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: var(--fp-text-muted) !important;
}

.fp-step-number::before {
  content: '0' attr(data-step);
  display: inline-block;
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fp-text-muted);
}

/* Disable old colored circle backgrounds */
.fp-step-number[data-step="1"],
.fp-step-number[data-step="2"],
.fp-step-number[data-step="3"] {
  background-color: transparent !important;
}

.fp-step-title {
  font-family: var(--fp-sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--fp-text);
  margin: 0 0 var(--fp-s3);
}

.fp-step-desc {
  font-family: var(--fp-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fp-text-muted);
  margin: 0;
}

/* Hide old design-system step connectors — Nordic Ice uses border-top instead */
.fp-step-connector,
.fp-step-connector-1,
.fp-step-connector-2 {
  display: none !important;
}

/* 11.9 Testimonials — overrides design-system .fp-card-testimonial */
.fp-section.fp-testimonials {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--fp-s10) var(--fp-s8);
}

.fp-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-s5);
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .fp-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-s6);
  }
}

.fp-card-testimonial {
  background-color: var(--fp-surface) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius-lg) !important;
  box-shadow: none !important;
  padding: 28px 24px 24px !important;
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.fp-card-testimonial:hover {
  border-color: var(--fp-border-strong) !important;
  box-shadow: var(--fp-shadow) !important;
  transform: translateY(-2px);
}

.fp-card-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--fp-border-strong);
}

.fp-card-testimonial .fp-testimonial-text {
  font-family: var(--fp-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fp-text);
  margin: 28px 0 var(--fp-s5);
  padding: 0;
}

.fp-card-testimonial .fp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-card-testimonial .fp-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--fp-radius-pill) !important;
  background-color: var(--fp-surface-alt) !important;
  color: var(--fp-primary) !important;
  font-family: var(--fp-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-card-testimonial .fp-author-name {
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text);
  letter-spacing: -0.1px;
}

/* 11.10 VIP section — full-bleed dark with glassmorphic card */
.fp-vip-section {
  background-color: var(--fp-accent);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--fp-s10) var(--fp-s8);
  width: 100vw;
  max-width: 100vw;
}

.fp-vip-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-s8);
  align-items: center;
}

@media (min-width: 900px) {
  .fp-vip-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--fp-s9);
  }
}

.fp-eyebrow-on-dark {
  color: rgba(255, 255, 255, 0.62) !important;
}

.fp-vip-title {
  font-family: var(--fp-sans);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0 0 var(--fp-s4);
}

.fp-vip-sub {
  font-family: var(--fp-sans);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0 0 var(--fp-s7);
  max-width: 520px;
}

.fp-vip-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.fp-btn-ghost-on-dark {
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--fp-radius);
  padding: 11px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.fp-btn-ghost-on-dark:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.36);
  color: #ffffff;
}

.fp-btn-ghost-on-dark:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.fp-vip-card {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--fp-radius-lg);
  padding: var(--fp-s7);
}

.fp-vip-list {
  list-style: none;
  margin: var(--fp-s4) 0 var(--fp-s5);
  padding: 0;
}

.fp-vip-list li {
  position: relative;
  padding-left: var(--fp-s6);
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--fp-sans);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fp-vip-list li:last-child {
  border-bottom: none;
}

.fp-vip-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--fp-primary);
  border-bottom: 2px solid var(--fp-primary);
  transform: rotate(-45deg);
}

.fp-vip-note {
  font-family: var(--fp-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
  padding-top: var(--fp-s4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 11.11 Pro CTA — full-bleed light gray strip (text left, button right) */
.fp-pro-cta {
  background-color: var(--fp-surface-alt);
  padding: var(--fp-s8) var(--fp-s8);
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
}

.fp-pro-cta-inner {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-s5);
  align-items: center;
  text-align: left;
}

@media (min-width: 768px) {
  .fp-pro-cta-inner {
    grid-template-columns: 1fr auto;
    gap: var(--fp-s7);
    padding: 0;
  }
}

.fp-pro-cta-text-wrap {
  min-width: 0;
}

.fp-pro-cta-title {
  font-family: var(--fp-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--fp-text);
  margin: 0 0 8px;
}

.fp-pro-cta-text {
  font-family: var(--fp-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fp-text-muted);
  margin: 0;
  max-width: 580px;
}

.fp-pro-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 11.12 Service area — 2-column with text + map */
.fp-service-area {
  background-color: var(--fp-surface);
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  padding: var(--fp-s8) var(--fp-s8);
}

.fp-service-area-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-s7);
  align-items: center;
}

@media (min-width: 900px) {
  .fp-service-area-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--fp-s8);
  }
}

.fp-service-area-text {
  text-align: left;
}

.fp-service-area-text .fp-section-h2 {
  font-size: 36px;
  letter-spacing: -0.8px;
  line-height: 1.1;
  text-align: left;
  margin-bottom: var(--fp-s3);
}

.fp-service-area-text .fp-section-intro {
  margin-bottom: var(--fp-s5);
  font-size: 15px;
}

.fp-service-area-text .fp-eyebrow {
  margin-bottom: var(--fp-s3);
}

.fp-service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-service-chip {
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-pill);
  padding: 6px 14px;
}

.fp-service-chip-soon {
  color: var(--fp-text-muted);
  background-color: transparent;
  border-style: dashed;
}

.fp-service-area-map-wrap {
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fp-border);
}

/* Override design-system .fp-service-map sizing */
.fp-service-area .fp-service-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0 !important;
  overflow: hidden;
}

.fp-service-area .fp-service-map picture,
.fp-service-area .fp-service-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-service-area .fp-map-label {
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--fp-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text);
  padding: 6px 10px;
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-sm);
  letter-spacing: -0.1px;
}

/* 11.13 Buttons — Nordic Ice override of homepage uses */
.fp-hero-content .fp-btn,
.fp-section .fp-btn,
.fp-vip-section .fp-btn,
.fp-pro-cta .fp-btn {
  font-family: var(--fp-sans);
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.fp-hero-content .fp-btn-primary,
.fp-section .fp-btn-primary,
.fp-vip-section .fp-btn-primary,
.fp-pro-cta .fp-btn-primary {
  background-color: var(--fp-primary) !important;
  color: var(--fp-primary-fg) !important;
  border: none !important;
  border-radius: var(--fp-radius) !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none;
}

.fp-hero-content .fp-btn-primary:hover,
.fp-section .fp-btn-primary:hover,
.fp-vip-section .fp-btn-primary:hover,
.fp-pro-cta .fp-btn-primary:hover {
  background-color: var(--fp-primary-hover) !important;
}

.fp-hero-content .fp-btn-primary:focus-visible,
.fp-section .fp-btn-primary:focus-visible,
.fp-vip-section .fp-btn-primary:focus-visible,
.fp-pro-cta .fp-btn-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 107, 138, 0.35) !important;
}

.fp-hero-content .fp-btn-lg,
.fp-section .fp-btn-lg,
.fp-vip-section .fp-btn-lg,
.fp-pro-cta .fp-btn-lg {
  font-size: 15px !important;
  padding: 14px 26px !important;
}

.fp-section .fp-btn-secondary {
  background-color: transparent !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-strong) !important;
  border-radius: var(--fp-radius) !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none;
}

.fp-section .fp-btn-secondary:hover {
  background-color: var(--fp-surface-alt) !important;
  border-color: var(--fp-text-muted) !important;
  color: var(--fp-primary) !important;
}

/* 11.14 Responsive */
@media (max-width: 1024px) {
  .fp-hero .fp-hero-title,
  .fp-hero-title {
    font-size: 48px !important;
    letter-spacing: -1.2px !important;
  }
}

@media (max-width: 767px) {
  .fp-hero {
    min-height: 560px;
  }

  .fp-hero-content {
    padding: var(--fp-s8) var(--fp-s6) var(--fp-s7) !important;
  }

  .fp-hero-title {
    font-size: 44px;
    letter-spacing: -1.2px;
    line-height: 1.05;
  }

  .fp-hero-title em,
  .fp-hero-title i {
    letter-spacing: -0.6px;
  }

  .fp-hero-sub {
    font-size: 16px;
  }

  .fp-hero-eyebrow {
    margin-bottom: var(--fp-s4);
  }

  .fp-search-bar {
    padding: 6px;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: var(--fp-shadow-sm) !important;
  }

  .fp-search-input {
    height: 44px;
    font-size: 14px;
  }

  .fp-search-select {
    min-width: 0;
  }

  .fp-search-submit {
    height: 44px;
    padding: 0 20px !important;
  }

  .search-bar-container,
  #search-form,
  .mobile-search-controls {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .fp-hero-chips {
    margin-top: var(--fp-s5);
  }

  .desktop-search-controls {
    display: none;
  }

  .mobile-search-controls {
    display: flex;
  }

  .fp-search-bar {
    box-shadow: var(--fp-shadow);
    border-radius: var(--fp-radius);
    overflow: visible;
  }

  .fp-search-input {
    height: 52px;
    border-radius: var(--fp-radius);
    font-size: 14px;
  }

  .fp-autocomplete-results {
    top: 56px;
  }

  .fp-trust-strip {
    padding: var(--fp-s5) var(--fp-s5);
  }

  .fp-trust-strip-inner {
    grid-template-columns: 1fr;
    gap: var(--fp-s4);
  }

  .fp-trust-item {
    padding-left: var(--fp-s7);
  }

  .fp-section.fp-categories,
  .fp-section.fp-how,
  .fp-section.fp-testimonials,
  .fp-pro-cta,
  .fp-service-area,
  .fp-vip-section {
    padding: var(--fp-s8) var(--fp-s5);
  }

  .fp-section-h2 {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .fp-section-intro {
    font-size: 15px;
  }

  .fp-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .fp-card-category {
    padding: var(--fp-s5) var(--fp-s4) var(--fp-s4) !important;
  }

  .fp-vip-title {
    font-size: 28px;
    letter-spacing: -0.6px;
  }

  .fp-vip-sub {
    font-size: 15px;
  }

  .fp-vip-card {
    padding: var(--fp-s5);
  }

  .fp-pro-cta-inner {
    padding: 0;
  }

  .fp-pro-cta-title {
    font-size: 22px;
  }

  .fp-service-area-text .fp-section-h2 {
    font-size: 24px;
  }

  .fp-service-area-map-wrap {
    border-radius: var(--fp-radius);
  }
}

@media (min-width: 768px) {
  .desktop-search-controls {
    display: flex;
  }

  .mobile-search-controls {
    display: none;
  }
}

/* ============================================================
   12. FOOTER — Nordic Ice
   Dark accent ground, 4-col grid, mono uppercase headings,
   60%-white Inter links. Overrides design-system.css:688–758
   via source order (this sheet enqueues after).
   ============================================================ */
.fp-footer {
  background-color: var(--fp-accent);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--fp-s9) var(--fp-s8) var(--fp-s7);
  margin-top: 0;
  border-top: none;
}

.fp-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.fp-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fp-s7);
  margin-bottom: var(--fp-s7);
}

.fp-footer h3 {
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 14px;
  padding: 0;
  line-height: 1.2;
}

.fp-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fp-s2);
}

.fp-footer li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.fp-footer a {
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 200ms ease;
  display: inline;
}

.fp-footer a:hover,
.fp-footer a:focus-visible {
  color: #ffffff;
}

.fp-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 2px;
}

.fp-footer .fp-footer-link-soon {
  color: rgba(255, 255, 255, 0.4);
}

.fp-footer .fp-footer-link-soon:hover,
.fp-footer .fp-footer-link-soon:focus-visible {
  color: rgba(255, 255, 255, 0.7);
}

.fp-footer .fp-footer-soon {
  color: inherit;
}

.fp-footer .fp-footer-link-view-all {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.fp-footer .fp-footer-link-view-all:hover,
.fp-footer .fp-footer-link-view-all:focus-visible {
  color: #ffffff;
}

.fp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--fp-s6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.fp-footer-copyright {
  font-family: var(--fp-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.fp-footer-copyright a {
  color: rgba(255, 255, 255, 0.7);
  font-size: inherit;
}

.fp-footer-copyright a:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .fp-footer {
    padding: var(--fp-s8) var(--fp-s5) var(--fp-s6);
  }

  .fp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--fp-s6);
    margin-bottom: var(--fp-s6);
  }

  .fp-footer h3 {
    margin-bottom: 12px;
  }
}

/* ============================================================
   13. CONTACT-FLOW POPUP — Nordic Ice
   Re-themed gate / form / success modal. JS-wired IDs preserved
   (see footer.php). Overrides parent style.css:21–209 via source
   order (this sheet enqueues after).
   ============================================================ */
.contact-flow-popup-overlay {
  background-color: rgba(14, 27, 38, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: var(--fp-s5);
  transition: opacity 200ms ease, visibility 200ms ease;
}

.contact-flow-popup-content {
  background-color: var(--fp-surface);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  border: 1px solid var(--fp-border);
  max-width: 480px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-flow-popup-overlay.is-visible .contact-flow-popup-content,
.contact-flow-popup-overlay[aria-hidden="false"] .contact-flow-popup-content {
  transform: scale(1);
}

.popup-screen {
  padding: var(--fp-s7);
}

.popup-screen-inner {
  display: block;
}

.popup-title {
  font-family: var(--fp-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--fp-text);
  margin: 0 0 12px;
  text-align: center;
}

.popup-text {
  font-family: var(--fp-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fp-text-muted);
  margin: 0 auto var(--fp-s6);
  max-width: 100%;
  text-align: center;
}

.popup-button-wrap {
  margin-top: var(--fp-s6);
  display: flex;
  justify-content: center;
}

.popup-button-primary {
  width: 100%;
  display: inline-block;
  background-color: var(--fp-primary);
  color: var(--fp-primary-fg);
  border: none;
  border-radius: var(--fp-radius);
  padding: 12px var(--fp-s6);
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease;
  text-align: center;
  text-decoration: none;
}

.popup-button-primary:hover {
  background-color: var(--fp-primary-hover);
}

.popup-button-primary:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

.popup-accordion {
  margin-top: var(--fp-s6);
  border-top: 1px solid var(--fp-border);
  padding-top: var(--fp-s4);
  text-align: center;
}

.popup-accordion-trigger {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms ease;
}

.popup-accordion-trigger:hover {
  color: var(--fp-text);
}

.popup-accordion-trigger:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.popup-accordion-trigger::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease;
  margin-bottom: 2px;
}

.popup-accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}

.popup-accordion-content {
  margin-top: var(--fp-s3);
  text-align: left;
}

.popup-accordion-content p {
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fp-text-muted);
  margin: 0 0 var(--fp-s3);
}

.popup-accordion-content p:last-child {
  margin-bottom: 0;
}

#popup-screen-success .success-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--fp-s4);
  border-radius: 50%;
  background-color: rgba(45, 122, 95, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

#popup-screen-success .success-icon-wrap::before {
  content: "\2713";
  color: var(--fp-success);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.revealed-info {
  margin-top: var(--fp-s6);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  text-align: left;
  overflow: hidden;
  background-color: var(--fp-surface);
}

.info-item {
  padding: var(--fp-s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-s3);
  background: transparent;
}

.info-item:not(:last-child) {
  border-bottom: 1px solid var(--fp-border);
}

.info-item span {
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fp-text-muted);
  flex-shrink: 0;
}

.info-item strong {
  font-family: var(--fp-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fp-text);
  flex: 1;
  text-align: left;
  margin-left: var(--fp-s3);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.info-button {
  background: transparent;
  color: var(--fp-text);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 8px 14px;
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.info-button:hover {
  background-color: var(--fp-surface-alt);
  border-color: var(--fp-border-strong);
  color: var(--fp-text);
}

.info-button:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .popup-screen {
    padding: var(--fp-s6) var(--fp-s5);
  }

  .popup-title {
    font-size: 20px;
  }

  .popup-text {
    font-size: 15px;
  }

  .info-item {
    flex-wrap: wrap;
    gap: var(--fp-s2);
  }

  .info-item strong {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
  }

  .info-button {
    margin-left: auto;
  }
}

/* ============================================================
   14. CATEGORIES LANDING PAGE (page-categories.php)
   ============================================================ */

/* 14.1 Page wrapper — override Tailwind bg-[#F4EEE6] */
.fp-page-categories {
  background-color: var(--fp-bg);
  min-height: 100vh;
}

/* 14.2 Page header */
.fp-cat-header {
  padding: var(--fp-s9) 0 var(--fp-s7);
}

.fp-cat-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

.fp-cat-h1 {
  font-family: var(--fp-sans);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--fp-text);
  margin: 0;
}

/* 14.3 Search bar on categories page */
.fp-cat-search-wrap {
  margin-top: var(--fp-s6);
  max-width: 680px;
}

/* 14.4 Grid section */
.fp-cat-section {
  padding: 0 0 var(--fp-s10);
}

.fp-cat-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fp-s4);
}

/* 14.5 Horizontal card */
.fp-cat-card {
  display: flex;
  align-items: center;
  gap: var(--fp-s4);
  padding: var(--fp-s5) var(--fp-s6);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.fp-cat-card:hover {
  border-color: var(--fp-primary);
  box-shadow: var(--fp-shadow);
  transform: translateY(-2px);
}

.fp-cat-card:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 3px;
}

/* 14.6 Icon tile */
.fp-cat-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background-color: var(--fp-surface-alt);
  color: var(--fp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-cat-card-icon svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

/* 14.7 Card body (name + count) */
.fp-cat-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-cat-card-name {
  font-family: var(--fp-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-text);
  line-height: 1.3;
  letter-spacing: -0.1px;
}

.fp-cat-card-count {
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fp-text-muted);
  line-height: 1.3;
}

/* 14.8 Arrow icon */
.fp-cat-card-arrow {
  flex-shrink: 0;
  color: var(--fp-text-dim);
  display: flex;
  align-items: center;
  transition: color 200ms ease, transform 200ms ease;
}

.fp-cat-card:hover .fp-cat-card-arrow {
  color: var(--fp-primary);
  transform: translateX(3px);
}

.fp-cat-card-arrow svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  display: block;
}

/* 14.9 Responsive */
@media (max-width: 1024px) {
  .fp-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fp-cat-header-inner,
  .fp-cat-grid {
    padding-left: var(--fp-s6);
    padding-right: var(--fp-s6);
  }
}

@media (max-width: 640px) {
  .fp-cat-grid {
    grid-template-columns: 1fr;
  }

  .fp-cat-h1 {
    font-size: 30px;
  }

  .fp-cat-header {
    padding: var(--fp-s8) 0 var(--fp-s6);
  }

  .fp-cat-header-inner,
  .fp-cat-grid {
    padding-left: var(--fp-s5);
    padding-right: var(--fp-s5);
  }
}

/* ============================================================
   15. CATEGORY DETAIL PAGE (category.php — child override)
   Renders /category/<slug>/ — list of pros in a single category.
   Reference: handoff/screenshots/02-search-desktop.png
   ============================================================ */

/* 15.1 Page wrapper */
.fp-category-page {
  background-color: var(--fp-bg);
  min-height: 100vh;
  font-family: var(--fp-sans);
  color: var(--fp-text);
}

/* 15.2 Hero — breadcrumb + H1 (white surface, 1px bottom border) */
.fp-category-hero {
  background-color: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
  padding: var(--fp-s7) 0;
}

.fp-category-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

.fp-category-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fp-s2);
  font-size: 13px;
  color: var(--fp-text-muted);
  margin-bottom: var(--fp-s4);
}

.fp-category-breadcrumb a {
  color: var(--fp-text-muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.fp-category-breadcrumb a:hover {
  color: var(--fp-primary);
  text-decoration: underline;
}

.fp-category-breadcrumb [aria-current="page"] {
  color: var(--fp-text-muted);
}

.fp-category-breadcrumb-sep {
  color: var(--fp-text-dim);
}

.fp-category-h1 {
  font-family: var(--fp-sans);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--fp-s3);
  flex-wrap: wrap;
}

.fp-category-h1-name { color: var(--fp-text); }
.fp-category-h1-sep,
.fp-category-h1-count { color: var(--fp-text-dim); font-weight: 400; }

/* 15.3 Two-col layout */
.fp-category-layout-wrap {
  padding: var(--fp-s7) 0 var(--fp-s10);
}

.fp-category-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--fp-s7);
  align-items: start;
}

/* 15.4 Sidebar (sticky on desktop) */
.fp-category-sidebar {
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: var(--fp-s5);
  position: sticky;
  top: var(--fp-s5);
  display: flex;
  flex-direction: column;
  gap: var(--fp-s5);
}

.fp-sidebar-block {
  display: flex;
  flex-direction: column;
  gap: var(--fp-s2);
  margin: 0;
}

.fp-sidebar-eyebrow {
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin: 0 0 4px;
  display: block;
}

/* 15.4.1 Category nav */
.fp-sidebar-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fp-sidebar-cat-link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--fp-text-muted);
  text-decoration: none;
  border-radius: var(--fp-radius);
  transition: background-color 150ms ease, color 150ms ease;
}

.fp-sidebar-cat-link:hover {
  background-color: var(--fp-surface-alt);
  color: var(--fp-text);
}

.fp-sidebar-cat-link.is-current {
  background-color: var(--fp-surface-alt);
  color: var(--fp-text);
  font-weight: 500;
}

/* 15.4.2 City filter (functional <select>) */
.fp-sidebar-city-form { margin: 0; }

.fp-sidebar-select-wrap { position: relative; }

.fp-sidebar-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  font-family: var(--fp-sans);
  font-size: 14px;
  color: var(--fp-text);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.fp-sidebar-select:hover { border-color: var(--fp-border-strong); }

.fp-sidebar-select:focus {
  outline: none;
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(30, 107, 138, 0.15);
}

.fp-sidebar-select-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fp-text-dim);
  display: flex;
}

.fp-sidebar-select-chev svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  display: block;
}

.fp-sidebar-clear-link {
  margin-top: var(--fp-s2);
  font-size: 12px;
  color: var(--fp-primary);
  text-decoration: underline;
  align-self: flex-start;
}

.fp-sidebar-clear-link:hover { color: var(--fp-primary-hover); }

/* 15.4.3 Min Rating buttons (display-only) */
.fp-sidebar-rating {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.fp-rating-btn {
  height: 32px;
  padding: 0 4px;
  font-family: var(--fp-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-text-muted);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-pill);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.fp-rating-btn:hover {
  border-color: var(--fp-border-strong);
  color: var(--fp-text);
}

.fp-rating-btn.is-active {
  border-color: var(--fp-primary);
  color: var(--fp-primary);
  background-color: rgba(30, 107, 138, 0.06);
}

/* 15.4.4 Verified-only checkbox (display-only) */
.fp-sidebar-verified {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.fp-sidebar-verified-input {
  width: 16px;
  height: 16px;
  accent-color: var(--fp-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.fp-sidebar-verified-label {
  font-size: 14px;
  color: var(--fp-text);
}

/* 15.5 Main column */
.fp-category-main {
  display: flex;
  flex-direction: column;
  gap: var(--fp-s5);
  min-width: 0;
}

.fp-category-main-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-s4);
  flex-wrap: wrap;
}

.fp-category-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  font-size: 14px;
  color: var(--fp-text);
  cursor: pointer;
  transition: border-color 150ms ease;
}

.fp-category-sort:hover { border-color: var(--fp-border-strong); }

.fp-category-sort-label {
  font-family: var(--fp-sans);
}

.fp-category-sort-chev {
  display: flex;
  color: var(--fp-text-dim);
}

.fp-category-sort-chev svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  display: block;
}

.fp-category-view-toggle {
  display: inline-flex;
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 3px;
  gap: 2px;
}

.fp-view-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  color: var(--fp-text-dim);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.fp-view-btn:hover {
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
}

.fp-view-btn.is-active {
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
}

.fp-view-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  display: block;
}

/* 15.6 Pro card grid */
.fp-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fp-s5);
}

/* 15.7 Pro card */
.fp-pro-card {
  display: flex;
  flex-direction: column;
  gap: var(--fp-s3);
  padding: var(--fp-s5);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.fp-pro-card:hover {
  border-color: var(--fp-border-strong);
  box-shadow: var(--fp-shadow-lg);
  transform: translateY(-2px);
}

.fp-pro-card:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 3px;
}

.fp-pro-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-s3);
}

.fp-pro-card-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffffff;
  flex-shrink: 0;
}

.fp-pro-card-text {
  flex: 1;
  min-width: 0;
}

.fp-pro-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fp-pro-card-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--fp-text);
}

.fp-pro-card-verified {
  display: inline-flex;
  align-items: center;
  color: var(--fp-primary);
}

.fp-pro-card-verified svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  display: block;
}

.fp-pro-card-tagline {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fp-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "New on FindaPro · awaiting first reviews" eyebrow pill */
.fp-pro-card-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background-color: var(--fp-surface-alt);
  border-radius: var(--fp-radius-pill);
  font-family: var(--fp-mono);
  font-size: 11px;
  color: var(--fp-text-muted);
}

.fp-pro-card-pill-icon {
  display: inline-flex;
  color: var(--fp-primary);
}

.fp-pro-card-pill-icon svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  display: block;
}

/* meta chips row (city only at this stage) */
.fp-pro-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fp-pro-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background-color: var(--fp-surface-alt);
  border-radius: var(--fp-radius-pill);
  font-family: var(--fp-mono);
  font-size: 11px;
  color: var(--fp-text-muted);
}

.fp-pro-card-chip-icon {
  display: inline-flex;
  color: var(--fp-text-dim);
}

.fp-pro-card-chip-icon svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  display: block;
}

/* 15.8 Empty state */
.fp-category-empty {
  padding: var(--fp-s9) var(--fp-s5);
  background-color: var(--fp-surface);
  border: 1px dashed var(--fp-border-strong);
  border-radius: var(--fp-radius-lg);
  text-align: center;
}

.fp-category-empty p {
  margin: 0;
  font-size: 15px;
  color: var(--fp-text-muted);
}

/* 15.9 Responsive */
@media (max-width: 1024px) {
  .fp-category-hero-inner,
  .fp-category-layout {
    padding-left: var(--fp-s6);
    padding-right: var(--fp-s6);
  }

  .fp-category-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--fp-s6);
  }

  .fp-category-h1 { font-size: 36px; }
}

@media (max-width: 768px) {
  .fp-category-hero { padding: var(--fp-s6) 0; }

  .fp-category-hero-inner,
  .fp-category-layout {
    padding-left: var(--fp-s5);
    padding-right: var(--fp-s5);
  }

  .fp-category-layout {
    grid-template-columns: 1fr;
    gap: var(--fp-s5);
  }

  .fp-category-sidebar {
    position: static;
    top: auto;
    padding: var(--fp-s4);
  }

  .fp-category-h1 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .fp-category-grid {
    grid-template-columns: 1fr;
    gap: var(--fp-s4);
  }

  /* On mobile, the category nav becomes a horizontal chip strip */
  .fp-sidebar-cat-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .fp-sidebar-cat-link {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-pill);
    font-size: 13px;
    background-color: var(--fp-surface);
  }

  .fp-sidebar-cat-link.is-current {
    border-color: var(--fp-primary);
    background-color: var(--fp-surface-alt);
    color: var(--fp-text);
  }
}

@media (max-width: 480px) {
  .fp-category-h1 { font-size: 24px; }
  .fp-pro-card { padding: var(--fp-s4); }
}

/* ============================================================
   16. SEARCH RESULTS PAGE (page-search.php — child override)
   Renders /search-results/ — Nordic Ice variant of category-detail
   layout. Reuses Section 15 selectors (.fp-category-*, .fp-pro-card-*,
   .fp-sidebar-*). This section adds: page wrapper, hero with search
   bar, functional Sort <select>, rating-pill card variant, two-line
   empty state, and pagination.
   ============================================================ */

/* 16.1 Page wrapper (mirrors .fp-category-page) */
.fp-search-page {
  background-color: var(--fp-bg);
  min-height: 100vh;
  font-family: var(--fp-sans);
  color: var(--fp-text);
}

/* 16.2 Hero — mirrors .fp-category-hero, hosts the search bar below H1 */
.fp-search-hero {
  background-color: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
  padding: var(--fp-s7) 0;
}

.fp-search-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

/* 16.3 Hero search bar */
.fp-search-bar-row {
  display: flex;
  gap: var(--fp-s2);
  margin-top: var(--fp-s5);
  max-width: 720px;
}

.fp-search-bar-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.fp-search-bar-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fp-text-dim);
  display: flex;
}

.fp-search-bar-input-icon svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  display: block;
}

.fp-search-bar-input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  font-family: var(--fp-sans);
  font-size: 15px;
  color: var(--fp-text);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.fp-search-bar-input::placeholder {
  color: var(--fp-text-dim);
}

.fp-search-bar-input:focus {
  outline: none;
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(30, 107, 138, 0.15);
}

.fp-search-bar-submit {
  height: 48px;
  padding: 0 var(--fp-s5);
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-primary-fg);
  background-color: var(--fp-primary);
  border: none;
  border-radius: var(--fp-radius);
  cursor: pointer;
  transition: background-color 150ms ease;
  white-space: nowrap;
}

.fp-search-bar-submit:hover {
  background-color: var(--fp-primary-hover);
}

.fp-search-bar-submit:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* 16.4 Sort dropdown — functional <select> sits inside .fp-category-sort */
.fp-category-sort-form {
  margin: 0;
}

.fp-category-sort-functional {
  cursor: default;
  position: relative;
}

.fp-category-sort-functional .fp-category-sort-label {
  color: var(--fp-text-muted);
  font-weight: 400;
  pointer-events: none;
}

.fp-category-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text);
  cursor: pointer;
  padding: 0 4px;
  outline: none;
}

.fp-category-sort-select:focus { outline: none; }

/* 16.5 Pro card pill — rating variant (replaces "New on FindaPro" pill when rating exists) */
.fp-pro-card-pill-rating {
  font-family: var(--fp-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-text);
  background-color: var(--fp-surface-alt);
}

.fp-pro-card-pill-rating .fp-pro-card-pill-icon { color: var(--fp-star); }

.fp-pro-card-pill-rating .fp-pro-card-pill-icon svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  display: block;
}

/* 16.6 Two-line empty state (overrides Section 15's single-paragraph empty) */
.fp-category-empty .fp-category-empty-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--fp-text);
}

.fp-category-empty .fp-category-empty-sub {
  margin: 0;
  font-size: 14px;
  color: var(--fp-text-muted);
}

/* 16.7 Pagination */
.fp-pagination {
  margin-top: var(--fp-s7);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text-muted);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.fp-pagination .page-numbers:hover {
  border-color: var(--fp-border-strong);
  color: var(--fp-text);
}

.fp-pagination .page-numbers.current {
  border-color: var(--fp-primary);
  color: var(--fp-primary);
  background-color: rgba(30, 107, 138, 0.06);
  cursor: default;
}

.fp-pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.fp-pagination .page-numbers.prev,
.fp-pagination .page-numbers.next {
  padding: 0 14px;
}

/* 16.8 sr-only utility (defensive — in case parent CSS doesn't define it) */
.fp-search-page .sr-only,
.fp-category-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 16.9 Filter form on the sidebar (groups City + Min Rating + Verified) */
.fp-sidebar-filters-form {
  display: flex;
  flex-direction: column;
  gap: var(--fp-s5);
  margin: 0;
}

.fp-sidebar-filters-form > .fp-sidebar-block { margin: 0; }

/* 16.10 Responsive */
@media (max-width: 1024px) {
  .fp-search-hero-inner {
    padding-left: var(--fp-s6);
    padding-right: var(--fp-s6);
  }
}

@media (max-width: 768px) {
  .fp-search-hero { padding: var(--fp-s6) 0; }

  .fp-search-hero-inner {
    padding-left: var(--fp-s5);
    padding-right: var(--fp-s5);
  }

  .fp-search-bar-row {
    flex-direction: column;
    margin-top: var(--fp-s4);
  }

  .fp-search-bar-submit { width: 100%; }

  .fp-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }
}

/* ============================================================
   17. ARTICLES INDEX (archive-article.php — child override)
   Renders /articles/ — Nordic Ice variant. Three display modes:
   default (grouped by category), filtered (?article_cat=<slug>),
   search (?s=<query>). Reuses Section 16's .fp-search-bar-* for
   the hero search input, .fp-pagination for pagination, and the
   two-line .fp-category-empty + -title/-sub variant for empty
   states. Card has no image — eyebrow + title only.
   Reference: handoff/screenshots/06-articles-desktop.png
   ============================================================ */

/* 17.1 Page wrapper */
.fp-articles-page {
  background-color: var(--fp-bg);
  min-height: 100vh;
  font-family: var(--fp-sans);
  color: var(--fp-text);
}

/* 17.2 Hero — eyebrow + H1 + subtitle + Nordic Ice search bar */
.fp-articles-hero {
  background-color: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
  padding: var(--fp-s7) 0;
}

.fp-articles-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

.fp-articles-eyebrow {
  font-family: var(--fp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fp-primary);
  margin: 0 0 var(--fp-s3);
}

.fp-articles-h1 {
  font-family: var(--fp-sans);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--fp-text);
  margin: 0 0 var(--fp-s3);
  max-width: 720px;
}

.fp-articles-subtitle {
  font-family: var(--fp-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fp-text-muted);
  margin: 0;
  max-width: 640px;
}

/* Hero search bar — Section 16 selectors reused; only spacing override */
.fp-articles-hero .fp-search-bar-row {
  margin-top: var(--fp-s5);
}

/* 17.3 Sticky category filter pills */
.fp-articles-filter {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--fp-bg);
  border-bottom: 1px solid var(--fp-border);
}

.fp-articles-filter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

.fp-articles-filter-row {
  display: flex;
  align-items: center;
  gap: var(--fp-s2);
  padding: var(--fp-s3) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fp-articles-filter-row::-webkit-scrollbar {
  display: none;
}

.fp-articles-filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text-muted);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.fp-articles-filter-chip:hover {
  background-color: var(--fp-surface-alt);
  color: var(--fp-text);
}

.fp-articles-filter-chip.is-active {
  color: var(--fp-primary-fg);
  background-color: var(--fp-primary);
  border-color: var(--fp-primary);
}

.fp-articles-filter-chip.is-active:hover {
  background-color: var(--fp-primary-hover);
  border-color: var(--fp-primary-hover);
  color: var(--fp-primary-fg);
}

.fp-articles-filter-count {
  font-family: var(--fp-mono);
  font-size: 12px;
  opacity: 0.7;
}

/* 17.4 Body wrapper */
.fp-articles-body {
  padding: var(--fp-s7) 0 var(--fp-s10);
}

.fp-articles-body-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fp-s8);
}

/* 17.5 Per-category section (default mode + filtered mode reuse) */
.fp-articles-cat-section {
  margin-bottom: var(--fp-s8);
}

.fp-articles-cat-section:last-child {
  margin-bottom: 0;
}

.fp-articles-cat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fp-s4);
  margin-bottom: var(--fp-s5);
}

.fp-articles-cat-h2 {
  font-family: var(--fp-sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--fp-text);
  margin: 0;
}

.fp-articles-cat-count {
  font-family: var(--fp-mono);
  font-size: 13px;
  color: var(--fp-text-dim);
  white-space: nowrap;
}

.fp-articles-cat-viewall {
  display: inline-block;
  margin-top: var(--fp-s4);
  font-family: var(--fp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

.fp-articles-cat-viewall:hover {
  color: var(--fp-primary-hover);
  text-decoration: underline;
}

/* 17.6 Grid */
.fp-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fp-s5);
}

/* 17.7 Card (no image) */
.fp-articles-card {
  display: block;
  padding: var(--fp-s5) var(--fp-s5) var(--fp-s6);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.fp-articles-card:hover {
  border-color: var(--fp-border-strong);
  box-shadow: var(--fp-shadow-sm);
  transform: translateY(-1px);
}

.fp-articles-card > article {
  margin: 0;
}

.fp-articles-card-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--fp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fp-primary);
  margin: 0 0 var(--fp-s3);
}

.fp-articles-card-cat,
.fp-articles-card-time {
  display: inline;
}

.fp-articles-card-dot {
  margin: 0 var(--fp-s2);
  color: var(--fp-text-dim);
}

.fp-articles-card-title {
  font-family: var(--fp-sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fp-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 150ms ease;
}

.fp-articles-card:hover .fp-articles-card-title {
  color: var(--fp-primary);
}

.fp-articles-card-featured {
  display: inline-block;
  margin-top: var(--fp-s4);
  padding: 2px 10px;
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-primary);
  background-color: var(--fp-surface-alt);
  border-radius: var(--fp-radius-pill);
}

/* 17.8 Search-mode results meta */
.fp-articles-search-meta {
  font-family: var(--fp-mono);
  font-size: 13px;
  color: var(--fp-text-dim);
  margin: 0 0 var(--fp-s5);
}

/* 17.9 Responsive */
@media (max-width: 1024px) {
  .fp-articles-hero-inner,
  .fp-articles-filter-inner,
  .fp-articles-body-inner {
    padding-left: var(--fp-s6);
    padding-right: var(--fp-s6);
  }

  .fp-articles-h1 { font-size: 34px; }
}

@media (max-width: 768px) {
  .fp-articles-hero { padding: var(--fp-s6) 0; }

  .fp-articles-hero-inner,
  .fp-articles-filter-inner,
  .fp-articles-body-inner {
    padding-left: var(--fp-s5);
    padding-right: var(--fp-s5);
  }

  .fp-articles-grid {
    grid-template-columns: 1fr;
    gap: var(--fp-s4);
  }

  .fp-articles-h1 {
    font-size: 28px;
    letter-spacing: -0.3px;
  }

  .fp-articles-subtitle { font-size: 16px; }

  .fp-articles-cat-h2 { font-size: 19px; }
}

@media (max-width: 480px) {
  .fp-articles-h1 { font-size: 24px; }
  .fp-articles-card { padding: var(--fp-s4); }
  .fp-articles-card-title { font-size: 17px; }
}

/* ============================================================
   18. SUPPLIERS ARCHIVE (archive-supplier.php — child override)
   Renders /suppliers/ — Nordic Ice supplier directory.
   Layout reuses Section 15's .fp-category-* (hero, breadcrumb,
   H1, two-col layout, sidebar, grid, empty state) and
   .fp-pro-card-* (avatar, name, tagline, chips). This section
   only adds: page-wrapper alias and service-tag pills inside
   cards (replacing the "New on FindaPro" pill used on pro cards).
   ============================================================ */

/* 18.1 Page wrapper alias — doubles as .fp-category-page, inherits everything */
.fp-supplier-page {
  /* No overrides — .fp-category-page on the same element provides all layout */
}

/* 18.2 Service tags (sit between .fp-pro-card-head and .fp-pro-card-chips) */
.fp-supplier-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--fp-s3);
}

.fp-supplier-tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--fp-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-text-muted);
  background-color: var(--fp-surface-alt);
  border-radius: var(--fp-radius-pill);
  white-space: nowrap;
}

.fp-supplier-tag-more {
  display: inline-block;
  padding: 3px 6px;
  font-family: var(--fp-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-text-dim);
  white-space: nowrap;
}