/**
 * ============================================================================
 * UNIFIED COMPONENTS — Final Harmonization Layer
 * Rukn Elite (NUTHUBV5) · Unified Design System v3.0.0 · RTL-first
 * ============================================================================
 * Loaded LAST (after design-tokens-rtl.css → hover.css → main.css →
 * responsive.css). Responsibilities:
 *
 *  1. Re-assert the unified token bridge ON BODY (main.css's body[mode=light]
 *     legacy palette is overridden here — this kills the 4-blues problem).
 *  2. Harmonize base typography / containers so legacy (.container) and VIPS
 *     (.vips-container) layouts share one grid.
 *  3. Ship owl.carousel core CSS (was missing entirely — every slider on the
 *     site rendered stacked & unclipped).
 *  4. Style every markup class that previously had ZERO CSS (second-generation
 *     vips-* components, legacy archive, load-more, breadcrumbs, forms…).
 *  5. Provide the small utility vocabulary (bg-surface-*, text-primary…)
 *     that templates and centerpiece.js toggle at runtime.
 *  6. Unified responsive ladder: 1023 / 767 / 560 / 400.
 * ============================================================================
 */

/* ==========================================================================
   1. TOKEN BRIDGE RE-ASSERTION (beats main.css body[mode=light] palette)
   ========================================================================== */
body,
body[mode="light"] {
  --uicolor: var(--color-primary);
  --uicolor2: var(--color-secondary);
  --uicolor3: var(--color-inverse-surface);
  --primary-text: var(--color-on-surface);
  --textcolor: var(--color-on-surface);
  --secondarytext: var(--color-on-surface-variant);
  --bgcolor: var(--color-surface-container-lowest);
  --bkground: var(--color-surface);
  --bghover: var(--color-surface-container-low);
  --diver: var(--color-outline-variant);
  --ui_color_header: var(--color-surface-container-lowest);
  --ui_footer: var(--color-inverse-surface);
  --fsize: 0.9375rem;
  --ffamily: var(--font-family-base);
  --ffamilystrong: var(--font-family-display);
  --f-number: 'Plus Jakarta Sans', var(--font-family-base);
  --miniradius: var(--radius-md);
  --largeradius: var(--radius-xl);
  --background_button: var(--color-primary);
  --button-border: 2px solid var(--color-primary);
  --main-color-rgb: 0, 74, 198;
  --box-shadow: var(--shadow-sm);
  --box-shadow-1: var(--shadow-md);
  --box-shadow-2: var(--shadow-lg);
}

/* ==========================================================================
   2. BASE TYPOGRAPHY & CANVAS (final say after main.css)
   ========================================================================== */
body {
  font-family: var(--font-family-base) !important;
  font-size: var(--fsize) !important;
  line-height: 1.75 !important;
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-on-surface);
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-headline-xl); }
h2 { font-size: var(--text-headline-lg); }
h3 { font-size: var(--text-headline-md); }
h4, h5, h6 { font-size: var(--text-headline-sm); }

p { line-height: 1.8; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-container); }

::selection {
  background: rgba(var(--main-color-rgb), 0.16);
  color: var(--color-on-surface);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

input, select, textarea {
  font-family: var(--font-family-base);
  font-size: var(--text-body-md);
}

/* Numeric UI values keep the Jakarta digits font */
.counterup-number, .box-price em, p.Service_price, .price-value,
.-rating-value, [data-price], .footer-copyright {
  font-family: var(--f-number);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. CONTAINER HARMONIZATION (one grid: 1280px)
   ========================================================================== */
.container,
.container-vips,
.vips-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  width: 100%;
}

@media (min-width: 1024px) {
  .container,
  .container-vips,
  .vips-container {
    padding-inline: var(--gutter-desktop);
  }
}

/* Section rhythm */
.vips-section { padding-block: var(--space-xl); }
@media (min-width: 1024px) {
  .vips-section { padding-block: var(--space-3xl); }
}

/* ==========================================================================
   4. OWL CAROUSEL CORE (was missing — sliders rendered stacked/unclipped)
   ========================================================================== */
.owl-carousel {
  display: none;
  position: relative;
  width: 100%;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.owl-carousel.owl-loaded { display: block; }
.owl-carousel.owl-loading { opacity: 0; display: block; }
.owl-carousel.owl-hidden { opacity: 0; }
.owl-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.owl-carousel .owl-item img { display: block; width: 100%; height: auto; }
.owl-rtl .owl-item,
.owl-carousel.owl-rtl .owl-item { float: right; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled { display: none; }
.owl-carousel .owl-nav,
.owl-carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  box-shadow: var(--shadow-xs);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.owl-carousel .owl-nav .owl-prev i,
.owl-carousel .owl-nav .owl-next i { pointer-events: none; }
.owl-carousel button.owl-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-outline-variant);
  transition: background 0.15s ease, transform 0.15s ease;
}
.owl-carousel button.owl-dot.active {
  background: var(--color-primary);
  transform: scale(1.25);
}
.owl-carousel.owl-grab { cursor: grab; }
.owl-carousel.owl-grab .owl-item { cursor: grab; }
.owl-carousel .owl-animated-in { z-index: 0; }
.owl-carousel .owl-animated-out { z-index: 1; }
.owl-carousel .fadeOut { animation-name: fadeOut; }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
.owl-height { transition: height 0.5s ease-in-out; }
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.owl-carousel .owl-item .owl-lazy[src^=""],
.owl-carousel .owl-item .owl-lazy:not([src]) { max-width: 100%; }
.owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; }

/* Owl nav arrows emitted by legacy markup (i-based buttons) */
.owl-nav > div,
.-custom-owl-Slides-prev,
.-custom-owl-Slides-next {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.owl-nav > div:hover,
.-custom-owl-Slides-prev:hover,
.-custom-owl-Slides-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ==========================================================================
   5. CATEGORY GRID (static responsive grid — must NOT be a carousel)
   ========================================================================== */
.YC-Secondery-Categoryes-continer- {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.CategoryGrid__Item {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  min-width: 0;
}
.CategoryGrid__Item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-fixed);
}
.CategoryGrid__Item .icon-cat {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  font-size: 22px;
}
.CategoryGrid__Item .CategoryName h2 {
  font-size: var(--text-headline-sm);
  margin: 0;
}
.CategoryGrid__Item .CategoryName p {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  margin: 4px 0 0;
}
.CategoryGrid__Item .more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-primary);
}

/* ==========================================================================
   6. PAGINATION (legacy .pagination wrapper + wp core markup)
   ========================================================================== */
.pagination,
.navigation.pagination {
  margin-block: var(--space-xl);
}
.pagination ul.page-numbers,
.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  font-weight: 700;
  font-size: var(--text-body-md);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
  border-color: var(--color-primary-fixed);
}
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.vips-pagination-wrap ul.page-numbers { gap: 6px; }

/* ==========================================================================
   7. BREADCRUMBS
   ========================================================================== */
.vips-breadcrumbs,
.breadcrumb-nav {
  margin-bottom: var(--space-md);
}
.breadcrumb-nav ol,
.breadcrumb-nav ul,
.vips-breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-label-md);
  color: var(--color-on-surface-variant);
}
.breadcrumb-nav a,
.vips-breadcrumbs a {
  color: var(--color-primary);
  font-weight: 600;
}
.breadcrumb-nav li[aria-current="page"],
.vips-breadcrumbs li[aria-current="page"],
.breadcrumb-nav .breadcrumb-current {
  color: var(--color-on-surface);
  font-weight: 700;
}

/* ==========================================================================
   8. ARCHIVE SYSTEM (default archive was completely naked)
   ========================================================================== */
.archive-section,
.default-archive-wrapper {
  padding-block: var(--space-xl);
  min-height: 40vh;
}
@media (min-width: 1024px) {
  .archive-section,
  .default-archive-wrapper { padding-block: var(--space-2xl); }
}
.archive-header { margin-bottom: var(--space-xl); }
.archive-title {
  font-size: var(--text-headline-xl);
  font-weight: 800;
  color: var(--color-on-surface);
  margin: 0 0 var(--space-sm);
}
.archive-description {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-lg);
  line-height: 1.8;
  max-width: 75ch;
}
.archive-posts-grid,
.-Posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-lg);
}
.archive-pagination-wrap { margin-top: var(--space-xl); }
.no-posts-found {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  background: var(--color-surface-container-lowest);
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-xl);
}
.no-posts-found > i,
.no-posts-found .material-symbols-outlined {
  font-size: 48px;
  color: var(--color-outline);
  margin-bottom: var(--space-md);
  display: inline-block;
}
.no-posts-found h3 {
  font-size: var(--text-headline-sm);
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   9. BUTTONS (unified vocabulary)
   ========================================================================== */
.btn,
.btn-primary,
.price_Alniks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  border: none;
  background: var(--color-primary);
  color: var(--color-on-primary) !important;
  font-weight: 700;
  font-size: var(--text-body-md);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.btn:hover,
.btn-primary:hover,
.price_Alniks:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
  background: var(--color-surface-container-low);
  border-color: var(--color-primary-fixed);
}
.ButtonConcept a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.1s ease;
}
.ButtonConcept a:hover {
  background: var(--color-primary-container);
  transform: translateY(-1px);
}

/* ==========================================================================
   10. ARTICLE / SINGLE POST (vips-article-view family)
   ========================================================================== */
.vips-article-view { width: 100%; }
.article-hero {
  background: linear-gradient(180deg, var(--color-surface-container-lowest) 0%, var(--color-surface) 100%);
  border-bottom: 1px solid var(--color-outline-variant);
}
.article-featured-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.article-featured-image img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}
.article-tags-wrap {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-outline-variant);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.article-tags-wrap a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.article-tags-wrap a:hover {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}
.author-bio-card {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-container-high);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.author-bio-card img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-primary-fixed);
}
.sidebar-widget,
.sidebar-cta-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
.sidebar-cta-card {
  background: linear-gradient(160deg, var(--color-primary-fixed-dim), var(--color-surface-container-lowest) 60%);
  border-color: var(--color-primary-fixed);
  text-align: center;
}
.sidebar-widget + .sidebar-widget,
.sidebar-cta-card + .sidebar-widget,
.sidebar-widget + .sidebar-cta-card { margin-top: var(--space-lg); }
.single-blog { width: 100%; }

/* ==========================================================================
   11. CASE STUDY (vips-case-study family)
   ========================================================================== */
.vips-case-study { width: 100%; }
.vips-hero-article {
  background: linear-gradient(180deg, var(--color-surface-container-low) 0%, var(--color-surface) 100%);
}
.vips-report-strip {
  background: var(--color-surface-container-low);
  border-block: 1px solid var(--color-surface-container-high);
}
.case-study-content {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.vips-visual-evidence img,
.vips-visual-evidence .evidence-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-sm);
  width: 100%;
  height: auto;
  object-fit: cover;
}
.vips-tech-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-container-lowest);
}
.vips-tech-table thead th {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  font-weight: 700;
  padding: 12px 16px;
  text-align: start;
  font-size: var(--text-body-md);
}
.vips-tech-table tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--color-outline-variant);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
}
.vips-phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .vips-phases { grid-template-columns: repeat(3, 1fr); }
}
.vips-case-cta {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.vips-case-cta h2,
.vips-case-cta h3 { color: var(--color-inverse-on-surface); }
.vips-case-cta p { color: var(--dark-band-text); }

/* ==========================================================================
   12. CITY HUB (vips-city-hub family)
   ========================================================================== */
.vips-city-hub { width: 100%; }
.telemetry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}
.telemetry-pill .material-symbols-outlined { font-size: 15px; color: var(--color-secondary); }
.district-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-lg);
  font-weight: 600;
  text-decoration: none;
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.district-badge:hover,
.district-badge.active {
  background: var(--color-inverse-surface);
  border-color: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
}
.vips-services-section { padding-block: var(--space-xl); }
.vips-service-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vips-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.vips-service-card .price-block,
.vips-service-card .service-price {
  font-family: var(--f-number);
  font-weight: 800;
  color: var(--color-primary);
}
.vips-geo-silo {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}
.vips-authority-branch {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
}
.vips-city-cta {
  background: var(--dark-band);
  color: var(--color-inverse-on-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl) var(--space-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vips-city-cta::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--main-color-rgb), 0.25), transparent 70%);
  filter: blur(48px);
  z-index: -1;
}
.vips-city-cta h2,
.vips-city-cta h3 { color: var(--color-inverse-on-surface); }
.vips-city-cta p { color: var(--dark-band-text); }
.cities-list__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* ==========================================================================
   13. BLOG / CATEGORY HEROES & GRIDS
   ========================================================================== */
.vips-blog-view,
.vips-category-view { width: 100%; }
.blog-hero,
.category-hero {
  background: linear-gradient(180deg, var(--color-surface-container-low) 0%, var(--color-surface) 100%);
  border-bottom: 1px solid var(--color-outline-variant);
}
.postgrid-boxed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-lg);
}

/* ==========================================================================
   14. FAQ SYSTEM (unified accordion look for all 4 implementations)
   ========================================================================== */
.vips-faq-hub { width: 100%; }
.vips-faq-hero {
  background: linear-gradient(180deg, var(--color-surface-container-low) 0%, var(--color-surface) 100%);
  border-bottom: 1px solid var(--color-outline-variant);
}
.vips-faq-body { padding-block: var(--space-xl); }
.vips-faq-cta {
  background: var(--dark-band);
  color: var(--color-inverse-on-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl) var(--space-lg);
}
.vips-faq-cta h2, .vips-faq-cta h3 { color: var(--color-inverse-on-surface); }
.faq-category-group {
  margin-bottom: var(--space-2xl);
}
.faq-category-group > h2,
.faq-category-group > h3 {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary-fixed);
}
.faq-card,
.faq_section .-faqs-singlebox,
.head-faq-body {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-card + .faq-card,
.faq_section .-faqs-singlebox + .-faqs-singlebox { margin-top: var(--space-sm); }
.faq-card:hover,
.faq_section .-faqs-singlebox:hover {
  border-color: var(--color-primary-fixed);
  box-shadow: var(--shadow-sm);
}
.faq-card > summary,
.faq-card .faq-question,
.faq-card h3 {
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  font-weight: 700;
  font-size: var(--text-headline-sm);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.faq-card > summary::-webkit-details-marker { display: none; }
.faq-card[open] > summary,
.faq-card.is-open > summary { color: var(--color-primary); }
.faq-card .faq-answer,
.faq-card > p {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-on-surface-variant);
  line-height: 1.8;
}

/* ==========================================================================
   15. 404 / SEARCH / AUTHOR
   ========================================================================== */
.vips-404-view {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
}
.category-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.project-archive,
.project {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-lg);
}
.blog_shap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-lg);
}

/* ==========================================================================
   16. HOME METRICS / COUNTERS GRID
   ========================================================================== */
.metrics-grid-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .metrics-grid-wrap { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   17. FORMS (white surface + hairline border, per design spec)
   ========================================================================== */
.form-contact,
.contact-info_page {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.form-contact input[type="text"],
.form-contact input[type="tel"],
.form-contact input[type="email"],
.form-contact input[type="search"],
.form-contact select,
.form-contact textarea,
textarea.textarea_form,
input.line,
select.line,
.Comment_lise input,
.Comment_lise textarea,
.contact-info_page input,
.contact-info_page textarea,
.contact-info_page select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  font-size: var(--text-body-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-contact textarea,
textarea.textarea_form,
.Comment_lise textarea,
.contact-info_page textarea { min-height: 120px; resize: vertical; }
.form-contact input:focus,
.form-contact select:focus,
.form-contact textarea:focus,
textarea.textarea_form:focus,
input.line:focus,
select.line:focus,
.Comment_lise input:focus,
.Comment_lise textarea:focus,
.contact-info_page input:focus,
.contact-info_page textarea:focus,
.contact-info_page select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), 0.12);
}
.form-contact input::placeholder,
textarea::placeholder,
input::placeholder { color: var(--color-outline); opacity: 1; }
.form-contact label,
.contact-info_page label {
  display: block;
  font-weight: 700;
  font-size: var(--text-label-lg);
  margin-bottom: 6px;
  color: var(--color-on-surface);
}

/* ==========================================================================
   18. LOAD MORE / INFINITE SCROLL UI
   ========================================================================== */
.LoadMore--InpuArea {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}
.LoadMorePostsBTN,
.loadmore-btn,
button.loadmore,
.loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  min-width: 200px;
  padding: var(--space-sm) var(--space-2xl);
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: var(--text-body-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.LoadMorePostsBTN:hover,
button.loadmore:hover,
.loadmore:hover {
  background: var(--color-primary-container);
  transform: translateY(-1px);
}
.LoadMorePostsBTN[disabled],
.loadmore[disabled],
.loadmore.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.PostsScrollLoader {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}
.PostsScrollLoader::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface-container-high);
  border-top-color: var(--color-primary);
  animation: gc-spin 0.8s linear infinite;
}
@keyframes gc-spin { to { transform: rotate(360deg); } }
.-ScrollerCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ToggleContentValue { cursor: pointer; }

/* ==========================================================================
   19. SHARE / SOCIAL / MISC UI
   ========================================================================== */
.socialTips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.socialTips a,
.blogs-box-social-share li a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.socialTips a:hover,
.blogs-box-social-share li a:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-2px);
}
.is-sale-product {
  position: relative;
  display: inline-block;
}
.is-sale-product::after {
  content: "خصم";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: var(--color-error);
  color: var(--color-on-error);
  font-size: var(--text-label-micro);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.hoverable { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.activable { cursor: pointer; }

/* ==========================================================================
   20. HEADER (logo link + desktop nav + control buttons)
   --------------------------------------------------------------------------
   NOTE: the mobile menu toggle (.menu_bar icon swap + .menu-nav.open) is
   owned by main.css/responsive.css legacy rules — do not duplicate here.
   ========================================================================== */
.logo a.logo-link,
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-on-surface);
  font-family: var(--font-display);
  font-weight: 800;
}
.logo a.logo-link img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* Header controls are real buttons now (were divs) — neutralize UA chrome
   so the legacy .menu_bar / .btn-search skins keep rendering identically. */
button.menu_bar,
button.btn-search {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

/* Desktop nav layout only — mobile stacking/positioning is legacy-owned. */
@media (min-width: 1024px) {
  .menu-nav ul,
  ul.header-menu {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
.menu-nav a {
  color: var(--color-on-surface);
  font-weight: 600;
  font-size: var(--text-label-lg);
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.15s ease;
}
.menu-nav a:hover,
.menu-nav .current-menu-item > a,
.menu-nav .current_page_item > a,
.menu-nav .current-menu-ancestor > a {
  color: var(--color-primary);
}

/* ==========================================================================
   21. FOOTER (unified dark band)
   ========================================================================== */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a {
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.footer-links a:hover { opacity: 1; }
.foot-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}

/* ==========================================================================
   22. UTILITY VOCABULARY (used by templates + centerpiece.js)
   ========================================================================== */
.w-full { width: 100%; }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-inverse-surface { background-color: var(--color-inverse-surface); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-inverse-on-surface { color: var(--color-inverse-on-surface); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 2000;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ==========================================================================
   23. RESPONSIVE LADDER (unified: 1023 / 767 / 560 / 400)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Mobile menu toggle + off-canvas nav are owned by legacy
     responsive.css (.menu_bar / .menu-nav.open) — intentionally not
     duplicated here. Only touch targets are reinforced below. */
  .menu-nav a { width: 100%; }
  .archive-posts-grid,
  .-Posts-grid,
  .postgrid-boxed,
  .project-archive,
  .project,
  .blog_shap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .archive-posts-grid,
  .-Posts-grid,
  .postgrid-boxed,
  .project-archive,
  .project,
  .blog_shap { grid-template-columns: 1fr; }
  .cities-list__inner { grid-template-columns: repeat(2, 1fr); }
  .vips-city-cta,
  .vips-faq-cta,
  .vips-case-cta { padding: var(--space-xl) var(--space-md); }
  .metrics-grid-wrap { grid-template-columns: repeat(2, 1fr); }
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next,
  .owl-nav > div,
  .-custom-owl-Slides-prev,
  .-custom-owl-Slides-next { width: 40px; height: 40px; }
}

@media (max-width: 560px) {
  .cities-list__inner { grid-template-columns: 1fr; }
  .case-study-content { padding: var(--space-lg); }
  .form-contact,
  .contact-info_page { padding: var(--space-lg); }
  .author-bio-card { flex-direction: column; }
}

@media (max-width: 400px) {
  .metrics-grid-wrap { grid-template-columns: 1fr 1fr; }
  .pagination .page-numbers,
  .navigation.pagination .page-numbers {
    min-width: 38px;
    min-height: 38px;
    padding: 4px 10px;
  }
}

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

/* ==========================================================================
   25. ACCESSIBILITY — hide decorative Material Symbols from AT when the
   font fails (ligature text would be read aloud)
   ========================================================================== */
span.material-symbols-outlined[aria-hidden="true"] {
  speak: none;
}

/* ==========================================================================
   27. HEADER SEARCH OVERLAY (JS-generated: .search_header > .search_overlay
   + .search_body). Previously rendered with NO styles — unstyled block with
   a broken JS selector. Full overlay per design spec (scrim + blur + card).
   ========================================================================== */
.search_header {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 8vh, 96px) var(--space-md) var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.search_header.searchopen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.search_overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.search_body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  transform: translateY(-12px) scale(0.98);
  transition: transform 0.25s ease;
}
.search_header.searchopen .search_body {
  transform: translateY(0) scale(1);
}
.search_body h2 {
  font-size: var(--text-headline-md);
  font-weight: 800;
  margin-bottom: var(--space-lg);
  text-align: center;
}
/* JS renders a visible label duplicating the input placeholder — keep it
   for screen readers, remove the visual duplication. */
.search_body label.-yc--searching--input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.search_body form {
  position: relative;
  display: flex;
  gap: var(--space-sm);
}
.search_body input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  font-size: var(--text-body-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.search_body input[type="search"]:focus {
  outline: none;
  background: var(--color-surface-container-lowest);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), 0.12);
}
.search_body input[type="search"]::placeholder { color: var(--color-outline); }
.search_body button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  min-width: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: var(--text-body-md);
  cursor: pointer;
  transition: background 0.15s ease;
}
.search_body button[type="submit"]:hover {
  background: var(--color-primary-container);
}
.search_closse {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.search_closse:hover {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}
.search_closse i { font-size: 18px; }
/* Decorative JS shadow div — real shadows already applied above. */
.search_body .input_search_shadwo { display: none; }

@media (max-width: 560px) {
  .search_header { padding-inline: var(--space-sm); }
  .search_body { padding: var(--space-lg) var(--space-md); }
  .search_body form { flex-direction: column; }
  .search_body button[type="submit"] { width: 100%; }
}

/* ==========================================================================
   26. CENTERPIECE ESTIMATOR (class-based rebuild — zero inline styles)
   Vocabulary: .cpe-* (estimator + dispatch chip). State classes toggled by
   js/centerpiece.js reuse the §22 utilities (bg-surface-container-lowest,
   text-primary, font-bold, shadow-sm…); the .active overrides below carry
   the same values at higher specificity so state never depends on order.
   ========================================================================== */

/* Header */
.cpe-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.cpe-header-title {
  margin: 0;
  font-size: var(--text-headline-md);
  font-weight: 800;
  color: var(--color-on-surface);
}
.cpe-header-sub {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}
.cpe-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-fixed);
  color: var(--color-primary);
  font-size: var(--text-body-lg);
}

/* Form layout */
.cpe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cpe-step-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface);
}

/* Service select (custom caret) */
.cpe-select-wrap { position: relative; }
.cpe-service-select {
  width: 100%;
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.cpe-select-caret {
  position: absolute;
  inset-inline-end: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--text-label-md);
  color: var(--color-on-surface-variant);
}

/* Step 1 — city selector (4-up desktop, 2-up mobile; no overflow at 360px) */
.cpe-city-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  max-width: 100%;
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-md);
}
@media (max-width: 767px) {
  .cpe-city-selector { grid-template-columns: repeat(2, 1fr); }
}

/* Step 3 — property selector (2-up mobile, 4-up desktop: 4 items) */
.cpe-property-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
  max-width: 100%;
}
@media (min-width: 768px) {
  .cpe-property-selector { grid-template-columns: repeat(4, 1fr); }
}

/* Segmented tabs + property buttons.
   Neutral look lives on the base class; the .active override (and the §22
   utilities centerpiece.js toggles alongside it) paints the raised state. */
.cpe-city-tab,
.cpe-prop-btn {
  cursor: pointer;
  font-size: var(--text-label-micro);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cpe-city-tab {
  display: block;
  width: 100%;
  padding: var(--space-2xs);
  border: none;
  background-color: transparent;
  color: var(--color-on-surface-variant);
}
.cpe-prop-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--space-xs);
  border: 1px solid var(--color-surface-container-high);
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  text-align: start;
}
.cpe-city-tab.active,
.cpe-prop-btn.active {
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.cpe-prop-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Calculation output matrix */
.cpe-matrix {
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.cpe-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-body-sm);
}
.cpe-price-row--total {
  align-items: baseline;
  margin-bottom: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--color-outline-variant);
}
.cpe-price-label {
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface);
}
.cpe-price-value {
  font-size: var(--text-headline-md);
  font-weight: 800;
  color: var(--color-primary);
}
.cpe-trust-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-label-micro);
  color: var(--color-on-surface-variant);
}
.cpe-trust-row i,
.cpe-note i {
  vertical-align: -0.125em;
  margin-inline-end: var(--space-2xs);
}

/* CTA stack */
.cpe-cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.cpe-cta {
  width: 100%;
  font-size: var(--text-label-lg);
  text-decoration: none;
  border-radius: var(--radius-lg);
}
.cpe-cta-call {
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
}
.cpe-cta-call:hover {
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary);
}

/* Trust note */
.cpe-note {
  margin-top: var(--space-2xs);
  text-align: center;
  font-size: var(--text-label-micro);
  color: var(--color-on-surface-variant);
}

/* Dispatch tracker chip */
.cpe-dispatch-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  max-width: 100%;
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-outline-variant);
}
.cpe-dispatch-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background-color: var(--color-secondary-fixed);
  color: var(--color-on-secondary-container);
  font-size: var(--text-body-lg);
}
.cpe-dispatch-chip-text {
  display: flex;
  flex-direction: column;
  text-align: start;
}
.cpe-dispatch-chip-label {
  font-size: var(--text-label-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.cpe-dispatch-chip-city {
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface);
}
.cpe-dispatch-badge {
  margin-inline-start: auto;
  padding: 0.125rem var(--space-xs);
  font-size: var(--text-label-micro);
}