/* =========================================================
   TRUE CARE TECHNOLOGY — Product Detail Page · Sample 3
   Sticky Sidebar + Scrolling Content (Datasheet Style)
   ========================================================= */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --blue:        #0d5cf5;
  --blue-dark:   #0b1e3f;
  --blue-mid:    #1a3a6e;
  --blue-light:  #e8f0fe;
  --accent:      #1ea7ff;
  --white:       #ffffff;
  --off-white:   #f8fafc;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --gray-900:    #0f172a;
  --fe-color:    #ef4444;
  --nonfe-color: #f59e0b;
  --ss-color:    #8b5cf6;
  --multi-color: #0d5cf5;

  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Archivo', sans-serif;
  --font-body:    'Inter', sans-serif;

  --sidebar-w:    260px;
  --header-h:     72px;
  --topbar-h:     40px;
  --sticky-top:   90px;

  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:       0 4px 16px rgba(0,0,0,.10);
  --shadow-md:    0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.16);

  --transition:   0.25s ease;
}

/* ── Reset & Base ───────────────────────────────────────── */

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  text-transform: none; /* resets shared.css's Family-A uppercase */
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

.btn--white:hover {
  background: var(--blue-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,255,255,.25);
}

.btn--download {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue-light);
  flex-shrink: 0;
}
.btn--download:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,92,245,.3);
}

/* =================== TOPBAR =================== */
/* .topbar { background: #0b1e3f; font-size: 0.8rem; color: rgba(255,255,255,0.75); }

.topbar i { color: #1ea7ff; margin-right: 6px; } */

.topbar__social a:hover { background: #0d5cf5; color: #ffffff; }

/* =================== HEADER =================== */
/* .site-header / .brand__name / .brand__sub / .nav a / .brand--light: shared.css owns
   these now (were byte-identical duplicates that risked drifting from the header on
   every other page if only edited here). */
.header__cta { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: 0.82rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; border: none; background: #0d5cf5; color: #ffffff; cursor: pointer; }

.menu-toggle span { width: 24px; height: 2px; background: #0b1e3f; transition: all .3s cubic-bezier(.65,.05,.36,1); }

/* ── Product Hero ───────────────────────────────────────── */
.product-hero {
  position: relative;
  background: var(--blue-dark);
  padding: 80px 0 90px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.product-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(13,92,245,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(30,167,255,.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Grid pattern overlay */
.product-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.product-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: rgba(255,255,255,.55);
  transition: color var(--transition);
}

.breadcrumb i {
  font-size: 0.55rem;
  color: rgba(255,255,255,.3);
}

/* Hero content layout */
.product-hero__content {
  display: flex;
  align-items: center;
  gap: 56px;
  justify-content: space-between;
}

.product-hero__left {
  flex: 1;
  min-width: 0;
}

.product-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.product-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.0;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 16px;
}

.product-hero__desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,.7);
  max-width: 540px;
  margin-bottom: 22px;
  line-height: 1.7;
}

/* Tags */
.product-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* Hero actions */
.product-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hero Visual */
.product-hero__visual {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-hero__device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,92,245,.3) 0%, transparent 70%);
  pointer-events: none;
}

.device-frame {
  position: relative;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.device-aperture {
  width: 200px;
  height: 130px;
  background: linear-gradient(160deg, var(--blue-mid) 0%, #0d2657 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(13,92,245,.4);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

.device-aperture::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(13,92,245,.5);
  border-radius: var(--radius);
}

.device-aperture__inner {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
}

.device-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scan 2.5s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent);
}

@keyframes scan {
  0%   { top: 10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

.device-icon {
  font-size: 2rem;
  color: rgba(30,167,255,.6);
  animation: icon-pulse 3s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.device-belt {
  width: 200px;
  height: 36px;
  background: linear-gradient(180deg, #1a2a45 0%, #0d1d35 100%);
  border: 2px solid rgba(13,92,245,.4);
  border-top: 1px solid rgba(13,92,245,.2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.device-belt__track {
  display: flex;
  gap: 24px;
  padding: 0 16px;
  animation: belt-move 2s linear infinite;
}

@keyframes belt-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-48px); }
}

.device-belt__item {
  width: 16px;
  height: 8px;
  background: rgba(30,167,255,.4);
  border-radius: 2px;
  flex-shrink: 0;
}

.device-screen {
  position: absolute;
  top: 8px;
  right: -14px;
  background: #0a1628;
  border: 1px solid rgba(13,92,245,.5);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 0.65rem;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 5px;
}

.screen-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: blink 1.2s ease-in-out infinite;
}

.screen-dot--green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Page Body (Sidebar + Main) ─────────────────────────── */

/* ── Sidebar ────────────────────────────────────────────── */

/* Product Card */
.sidebar-card--product {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  border-color: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.sidebar-product__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(13,92,245,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--accent);
  flex-shrink: 0;
  border: 1px solid rgba(30,167,255,.3);
}

.sidebar-product__info {
  min-width: 0;
}

.sidebar-product__model {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.sidebar-product__category {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(30,167,255,.2);
  border: 1px solid rgba(30,167,255,.3);
  border-radius: 12px;
  font-size: 0.68rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Nav Card */
.sidebar-card__heading {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--gray-600);
  transition: all var(--transition);
  border-left: 2px solid transparent;
}

/* Quick Specs Card */
.sidebar-card--specs {
  padding-bottom: 14px;
}

.quick-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 8px;
}
.quick-spec:last-child { border-bottom: none; }

.quick-spec__label {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-family: var(--font-body);
}

.quick-spec__value {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--gray-800);
  text-align: right;
}

/* CTA Card */

/* ── Content Main ───────────────────────────────────────── */
.content-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Content Section ────────────────────────────────────── */
.content-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 100px;
}

.section-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 60%, transparent 100%);
  border-radius: 2px;
  margin-bottom: 24px;
}

.section-body {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 16px;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

/* ── Mini Stats ─────────────────────────────────────────── */

.mini-stat__label {
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.5px;
}

/* ── Spec Table ─────────────────────────────────────────── */

.spec-table thead th:first-child { border-radius: var(--radius-lg) 0 0 0; }

.spec-table tbody td:first-child {
  font-weight: 600;
  color: var(--gray-800);
  width: 48%;
}

/* Group header rows */
.spec-group-header td {
  background: var(--gray-800) !important;
  color: var(--white) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px !important;
}
.spec-group-header td i { margin-right: 8px; color: var(--accent); }

/* ── Spec Model Tabs (per-model spec table switcher) ──────── */

.spec-model-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 24px;
}

.spec-model-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

.spec-model-tab span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray-800);
  letter-spacing: 0.01em;
}

.spec-model-tab small {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-weight: 500;
}

.spec-model-tab:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}

.spec-model-tab.active {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 6px 20px rgba(13,92,245,.25);
}

.spec-model-tab.active span,
.spec-model-tab.active small {
  color: var(--white);
}

@media (max-width: 640px) {
  .spec-model-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .spec-model-tabs::-webkit-scrollbar { display: none; }

  .spec-model-tab {
    flex: 0 0 auto;
  }
}

/* ── Detection Capability Grid ──────────────────────────── */
.detection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.detection-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.detection-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.detection-card__header {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detection-card__header--fe    { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.detection-card__header--nonfe { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.detection-card__header--ss    { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.detection-card__header--multi { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); }

.detection-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--white);
}

.detection-card__badge {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: rgba(255,255,255,.25);
}

.detection-card__body {
  padding: 16px 20px 20px;
  background: var(--white);
}

.detection-card__type {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.detection-card__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 8px;
}

.detection-card__desc {
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.6;
}

/* ── Applications Grid ──────────────────────────────────── */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.app-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app-card:hover {
  background: var(--white);
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.app-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.app-card__name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.3;
}

.app-card__use {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.55;
}

/* ── Certifications ─────────────────────────────────────── */
.cert-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.cert-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: all var(--transition);
}
.cert-item:hover {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.cert-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--white);
  flex-shrink: 0;
}
.cert-item__icon--ce  { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.cert-item__icon--gmp { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.cert-item__icon--ip  { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }

.cert-item__body { flex: 1; min-width: 0; }

.cert-item__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
}

.cert-item__desc {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.65;
}

.cert-item__badge {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--gray-200);
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
}

/* ── Downloads ──────────────────────────────────────────── */
.download-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all var(--transition);
}
.download-item:hover {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.download-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--white);
  flex-shrink: 0;
}
.download-item__icon--pdf  { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.download-item__icon--doc  { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.download-item__icon--cert { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

.download-item__info {
  flex: 1;
  min-width: 0;
}

.download-item__name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 3px;
}

.download-item__meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin-bottom: 5px;
}

.download-item__size {
  font-size: 0.72rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── CTA Section ────────────────────────────────────────── */

.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 100% at 90% 50%, rgba(13,92,245,.3) 0%, transparent 70%),
    radial-gradient(ellipse 30% 80% at 10% 50%, rgba(30,167,255,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────── */
/* Matches home.css's footer (the site's reference design) — overrides shared.css's "Family B"
   footer block, which uses a different grid ratio, smaller social icons, and uppercase column
   headings. Literal colors instead of var(--accent) etc: this page redefines --accent to a
   lighter highlight (#1ea7ff) for its own unrelated content, which isn't the true brand blue
   home.css's footer uses for its underline/hover accents. */
.footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.75);
  padding-top: 90px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 50px;
  padding-bottom: 70px;
}
.footer__brand { flex: 0 1 240px; min-width: 200px; }
.footer__col { flex: 1 1 160px; min-width: 140px; }
.footer__brand p { color: rgba(255,255,255,0.65); margin: 22px 0; font-size: 0.95rem; line-height: 1.7; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--white);
  transition: all .3s var(--transition);
}
.footer__social a:hover { background: var(--blue); color: var(--white); transform: translateY(-4px); }
.footer__col h5 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  color: var(--white);
  position: relative;
  padding-bottom: 12px;
}
.footer__col h5::after { background: var(--blue); }
.footer__col ul li a {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  transition: all .25s var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer__contact p { color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 16px; line-height: 1.7; }
.footer__contact a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  margin-bottom: 10px;
  transition: none;
}
.footer__contact a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0;
}
.footer__bottom-inner {
  display: flex; justify-content: space-between;
  align-items: normal;
  flex-wrap: wrap; gap: 12px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* ── Back To Top ────────────────────────────────────────── */

.back-to-top:hover {
  background: #0b4fd9;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,92,245,.5);
}

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Responsive ─────────────────────────────────────────── */

/* 1024px — Sidebar collapses to top */
@media (max-width: 1024px) {
  .page-body__inner {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-height: none;
    overflow-y: visible;
  }

  .sidebar-card--product {
    grid-column: 1 / -1;
  }

  .sidebar-card--cta {
    grid-column: 1 / -1;
  }

  .product-hero__visual { display: none; }

  .product-hero__content { gap: 0; }

  .footer__grid { flex-wrap: wrap; gap: 40px; }
  .footer__brand { flex: 1 1 100%; }
  .footer__col { flex: 1 1 calc(50% - 20px); min-width: 200px; }

  /* Header/nav collapse moved here from the old 768px breakpoint to match the
     threshold every other page (home.css, about.css, contact.css, event_detail.css)
     collapses its nav at — below 768px the full desktop nav bar was overflowing
     the header on tablet-width viewports (769px–1024px) with no hamburger shown. */
  .nav, .header__cta { display: none; }
  .menu-toggle { display: flex; }
  .nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #ffffff; border-top: 1px solid var(--gray-200);
    padding: 20px; box-shadow: 0 10px 30px rgba(11, 30, 63, 0.08);
  }
  .nav.open ul { flex-direction: column; gap: 0; }
  .nav.open a { display: flex; width: 100%; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--gray-200); border-radius: 0; }
  .mega { display: none; }
}

/* 768px — Tablet */
@media (max-width: 768px) {
  .product-hero { padding: 48px 0 56px; }
  .content-section { padding: 32px 28px; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .detection-grid { grid-template-columns: 1fr 1fr; }
  .applications-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { grid-template-columns: 1fr; }
}
/* 640px — Mobile */
@media (max-width: 640px) {
  .product-hero { padding: 36px 0 44px; }
  .product-hero__title { font-size: 2.2rem; }
  .product-hero__actions { flex-direction: column; }
  .product-hero__actions .btn { justify-content: center; }

  .content-section { padding: 24px 20px; }

  .mini-stats { grid-template-columns: 1fr; }

  .detection-grid { grid-template-columns: 1fr; }

  .applications-grid { grid-template-columns: 1fr; }

  .cert-item { flex-wrap: wrap; }
  .cert-item__badge { display: none; }

  .download-item { flex-wrap: wrap; }
  .download-item .btn--download { width: 100%; justify-content: center; }

  .footer { padding-top: 44px; }
  .footer__grid { flex-direction: column; }
  .footer__brand, .footer__col { flex: 1 1 auto; width: 100%; min-width: 0; }

  .cta-section__actions { flex-direction: column; align-items: center; }

  .cta-section__stats { gap: 24px; }

}
@media (max-width: 480px) {
  .product-hero__title { font-size: 2rem; }
  .content-section { padding: 18px 14px; }
  .detection-card__value { font-size: 1.15rem; }
  .cert-item { padding: 14px 16px; }
}
@media (max-width: 480px) {
  .product-hero__title { font-size: 2rem; }
  .content-section { padding: 18px 14px; }
  .detection-card__value { font-size: 1.15rem; }
  .cert-item { padding: 14px 16px; }
}
@media (max-width: 480px) {
  .product-hero__title { font-size: 2rem; }
  .content-section { padding: 18px 14px; }
  .detection-card__value { font-size: 1.15rem; }
  .cert-item { padding: 14px 16px; }
}

/* =================== HERO IMAGE CAROUSEL ===================
   Base styles (.product-hero__carousel, .hero-carousel*, .slide-visual*, .carousel-btn*,
   .carousel-dot*) now live in pages/shared.css, loaded on every page — only this page's own
   responsive overrides stay here. */

/* Responsive
   Same fix as the featured-image fallback below: .product-hero__left is `flex: 1`
   (flex-basis: 0%), so a carousel at `width: 100%` resolves to the same basis as
   the row itself — the two hypothetical sizes (0 + 100%) never overflow the line,
   the row never wraps, and .product-hero__left silently gets squeezed to ~0 width
   (word-by-word wrapping). Keeping the carousel at a fixed, shrinking pixel width
   instead — same 380px it already uses on desktop (shared.css), just smaller —
   keeps it beside the text with room to spare all the way down to the 640px
   breakpoint, where it still hides entirely (unchanged: the arrows/dots need more
   room than a mobile viewport gives them). */
@media (max-width: 1024px) {
  .product-hero__carousel { width: 260px; }
}
@media (max-width: 768px) {
  .product-hero__carousel { width: 220px; }
}
@media (max-width: 640px) {
  .product-hero__carousel { display: none; }
}

/* The single-image fallback (no media slides — rendered from the product's own
   featured_image_url) has no slide-switching UI to declutter, so unlike the
   multi-slide carousel above it stays visible at every breakpoint instead of
   hiding at 640px, and it stays beside the text down to tablet widths instead of
   dropping below it immediately at 1024px.

   Sizing note: the image keeps its `aspect-ratio: 4/3` + `object-fit: contain` from
   shared.css at every breakpoint below — do NOT clamp it with a fixed-pixel
   `max-height`. A fluid width combined with a fixed max-height breaks the
   aspect-ratio (the box stops being 4:3), which would letterbox the photo by a
   different amount at every viewport width. Giving the container a fixed/capped
   *width* instead lets aspect-ratio derive a consistent height from that width, so
   the framing looks identical at every size — only the overall scale changes.

   Layout note: .product-hero__left uses `flex: 1` (flex-basis: 0%). As long as the
   carousel keeps an explicit pixel-ish width (not `width: 100%`), the two
   hypothetical sizes (0 + a few hundred px) stay well under the row's width, so the
   row never needs to wrap and .product-hero__left simply grows into whatever space
   is left — same mechanism that already works at full desktop width with the
   380px carousel in shared.css. Only below 640px, once the carousel is stretched
   to `width: 100%` for a full-width mobile image, does the row need to be forced
   onto separate lines (see the flex-direction: column rule below) — otherwise the
   0% + 100% basis sum never overflows the line and the wrap never triggers, which
   silently squeezes .product-hero__left to ~0 and wraps every word onto its own
   line (min-width: 0 allows it to shrink that far). */
.product-hero__content:has(.product-hero__carousel--featured) {
  gap: 32px;
}
.product-hero__carousel.product-hero__carousel--featured {
  width: 600px;
}
@media (max-width: 1024px) {
  .product-hero__carousel.product-hero__carousel--featured {
    display: block;
    width: 440px;
    flex-shrink: 0;
  }
}
@media (max-width: 768px) {
  .product-hero__carousel.product-hero__carousel--featured {
    width: 340px;
  }
}
@media (max-width: 640px) {
  .product-hero__carousel.product-hero__carousel--featured {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .product-hero__content:has(.product-hero__carousel--featured) {
    flex-direction: column;
    align-items: stretch;
    /* Override the base rule's `justify-content: space-between` (shared.css) —
       in row layout it just spaces text/image apart with no visible gap, but once
       this stacks to a column here, space-between stretches the two children to
       the far top/bottom of .product-hero's 560px min-height (shared.css), leaving
       a huge blank gap between the description and the image below it. flex-start
       lets the image sit right after the text, with the explicit margin-top above
       as the only spacing between them. */
    justify-content: flex-start;
  }
  /* `.product-hero__left { flex: 1 }` (flex-grow:1) makes sense in the desktop row
     layout — it grows to fill leftover *width* next to the fixed-width image. Once
     the column override above stacks them, flex's main axis becomes vertical, so
     that same flex-grow:1 makes the text block grow to fill leftover *height*
     inside .product-hero's 560px min-height (shared.css) instead — pushing the
     image down and reintroducing the large blank gap the justify-content fix
     above was meant to remove. Neutralize the grow in this stacked context. */
  .product-hero__content:has(.product-hero__carousel--featured) .product-hero__left {
    flex: none;
  }
}

/* =================== STANDARD FEATURES LIST =================== */
.features-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  margin-top: 28px;
}

.features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.5;
}

.features-list li i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  margin-top: 1px;
}

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

/* -----------------------------------------------------------------
   Local overrides for selectors shared.css intentionally omits: these
   names (.btn--primary, .section-title, .breadcrumb a:hover) are also
   used by the "Family A" listing pages with different values under
   the same specificity — keeping
   both versions in shared.css would let source order decide the
   winner on every page. Defining them here instead, after shared.css
   loads, restores this page's intended look regardless of file order.
   (.container used to be duplicated here too, identically to shared.css's
   version — harmless on its own, but because .topbar__inner/.header__inner
   also carry the "container" class, this file's later-loaded .container
   rule was winning the padding shorthand over shared.css's topbar/header
   padding, collapsing the topbar and header to 0 vertical padding on
   every "Family B" detail page. Removed; shared.css's .container is
   identical in value, so nothing here actually needed it.)
   ----------------------------------------------------------------- */
.section-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -0.02em; }
.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: #0b4fd9; border-color: #0b4fd9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,92,245,.35); }
.breadcrumb a:hover { color: var(--accent); }

.back-to-top { border: none; cursor: pointer; font-size: .9rem; visibility: hidden; }

a { transition: none; }
body { overflow-x: clip; }