/**
 * KineticUltra — Kinetic Command "Comparateur de produits".
 * Adapted from .stitch/designs/06-comparator-v3-kinetic-ultra.html.
 * Loaded after kinetic.css; consumes its tokens.
 */

/* ---------- Layout shell ---------- */
.k-compare {
  /* Sticky offset = real header height. The header is fixed via .k-header
     and its mega menu opens at top:63px → header itself is ~63px tall. */
  --k-header-h: 63px;
  /* Card-head height — drives the spec-rail spacer + product card minimum
     so each spec row aligns horizontally with its rail label. Measured
     against the rendered .k-prod-card (1:1 media + body + ATC). */
  --k-compare-head-h: 724px;
  /* Group-head height (GÉNÉRAL / PERFORMANCE / CONNECTIVITÉ banner).
     Same value drives the rail's group-head height, the rows' padding-top
     (so cell-1 lines up with row-1 below the first rail group-head) and
     the inter-group cell spacer height. */
  --k-compare-group-head-h: 52px;

  position: relative;
  padding: calc(var(--k-header-h) + 2rem) clamp(1.5rem, 3vw, 4rem) 9rem;
  overflow-x: hidden;
  background: var(--k-background);
}
.k-compare::before,
.k-compare::after {
  content: "";
  position: absolute;
  width: 1200px;
  height: 1200px;
  pointer-events: none;
  z-index: 0;
  filter: blur(160px);
  opacity: 0.35;
}
.k-compare::before {
  top: -300px; left: -300px;
  background: radial-gradient(circle, rgba(0,212,255,0.35) 0%, transparent 70%);
}
.k-compare::after {
  bottom: -300px; right: -300px;
  background: radial-gradient(circle, rgba(123,97,255,0.35) 0%, transparent 70%);
}
.k-compare > * { position: relative; z-index: 1; }

/* ---------- Breadcrumb ---------- */
.k-compare__crumbs {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--k-muted);
  margin-bottom: 2.5rem;
}
.k-compare__crumbs a { color: inherit; transition: color 200ms; }
.k-compare__crumbs a:hover { color: var(--k-cyan); }
.k-compare__crumbs-sep { opacity: 0.3; }
.k-compare__crumb-current { color: var(--k-cyan); }

/* ---------- Hero strip ---------- */
.k-compare__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .k-compare__hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }
}
.k-compare__hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--k-text);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}
.k-compare__hero-title-accent {
  background: linear-gradient(90deg, var(--k-violet), var(--k-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.k-compare__hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--k-muted);
  max-width: 56ch;
  margin: 0;
}
.k-compare__hero-stat {
  background: rgba(var(--k-glass-rgb), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  width: 100%;
}
@media (min-width: 768px) {
  .k-compare__hero-stat { padding: 1.5rem; min-width: 360px; width: auto; }
}
.k-compare__hero-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.k-compare__hero-stat-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--k-cyan);
}
.k-compare__hero-stat-bar { display: flex; gap: 4px; }
.k-compare__hero-stat-seg {
  width: 28px; height: 6px;
  background: var(--k-surface-2);
}
.k-compare__hero-stat-seg.is-filled { background: var(--k-cyan); }
.k-compare__hero-stat-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.k-compare__hero-action {
  flex: 1;
  padding: 0.75rem 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--k-text);
  background: var(--k-surface-2);
  border: 0;
  cursor: pointer;
  transition: background 200ms;
}
.k-compare__hero-action:hover { background: rgba(0,212,255,0.12); color: var(--k-cyan); }

/* ---------- Rail toggle (mobile) ---------- */
.k-compare__rail-toggle {
  /* Hidden on desktop — the rail is always expanded there. The mobile media
     query below flips it on. */
  display: none;
  align-items: center; gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-cyan);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
.k-compare__rail-toggle:hover { background: rgba(0, 212, 255, 0.14); }
.k-compare__rail-toggle-icon { transition: transform 200ms ease-out; }
.k-compare__rail-toggle[aria-expanded="true"] .k-compare__rail-toggle-icon { transform: rotate(180deg); }

/* ---------- Comparator grid ---------- */
.k-compare__grid {
  display: grid;
  grid-template-columns: 220px repeat(4, minmax(0, 1fr));
}

/* ----- Column 1: Spec rail ----- */
.k-compare__rail {
  /* No painted background — the rail has nothing scrolling under it (the
     spec rows flow with the page) and a solid fill would block the
     ::before/::after light-leaks. Sticky group-heads paint their own bg. */
  z-index: 5;
  position: relative;
}
.k-compare__rail-spacer {
  /* Aligns the first label row with the bottom of the sticky product card heads.
     Transparent in both themes — the parent .k-compare__rail already paints the
     background, and overlapping the cards' tinted glass area would create a
     visible seam in light mode. */
  height: var(--k-compare-head-h);
  background: transparent;
}
.k-compare__rail-group { margin-bottom: 1.5rem; }
.k-compare__rail-group-head {
  position: sticky;
  /* Group headers stick just below the product card heads when scrolling
     through their group's rows, keeping the category label visible. */
  top: calc(var(--k-header-h) + var(--k-compare-head-h));
  z-index: 4;
  height: var(--k-compare-group-head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  background: var(--k-background);
  background-image: linear-gradient(90deg, rgba(0,212,255,0.08) 0%, transparent 100%);
}
.k-compare__rail-group--violet .k-compare__rail-group-head {
  background-image: linear-gradient(90deg, rgba(123,97,255,0.08) 0%, transparent 100%);
}
.k-compare__rail-group--green .k-compare__rail-group-head {
  background-image: linear-gradient(90deg, rgba(0,255,136,0.08) 0%, transparent 100%);
}
.k-compare__rail-group-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--k-cyan), transparent);
  opacity: 0.45;
}
.k-compare__rail-group--violet .k-compare__rail-group-head::after {
  background: linear-gradient(90deg, var(--k-violet), transparent);
}
.k-compare__rail-group--green .k-compare__rail-group-head::after {
  background: linear-gradient(90deg, var(--k-green), transparent);
}
.k-compare__rail-group-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--k-cyan);
}
.k-compare__rail-group--violet .k-compare__rail-group-label { color: var(--k-violet); }
.k-compare__rail-group--green .k-compare__rail-group-label { color: var(--k-green); }

/* Additional accents — picked from the Dashboard "Comparateur" admin page. */
.k-compare__rail-group--amber .k-compare__rail-group-head {
  background-image: linear-gradient(90deg, rgba(255,176,32,0.08) 0%, transparent 100%);
}
.k-compare__rail-group--amber .k-compare__rail-group-head::after {
  background: linear-gradient(90deg, #FFB020, transparent);
}
.k-compare__rail-group--amber .k-compare__rail-group-label { color: #FFB020; }

.k-compare__rail-group--red .k-compare__rail-group-head {
  background-image: linear-gradient(90deg, rgba(255,59,92,0.08) 0%, transparent 100%);
}
.k-compare__rail-group--red .k-compare__rail-group-head::after {
  background: linear-gradient(90deg, var(--k-danger), transparent);
}
.k-compare__rail-group--red .k-compare__rail-group-label { color: var(--k-danger); }
.k-compare__rail-group-icon {
  width: 16px; height: 16px;
  color: inherit;
  stroke: currentColor;
}
.k-compare__rail-list { display: flex; flex-direction: column; }
.k-compare__rail-row {
  height: 64px;
  display: flex; align-items: center;
  padding: 0 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--k-muted);
}
.k-compare__rail-row + .k-compare__rail-row { background: rgba(255,255,255,0.015); }

/* ----- Columns 2-5: products & empty slot ----- */
.k-compare__col {
  position: relative;
  background: var(--k-background);
}
.k-compare__col--alt { background: var(--k-surface); }
.k-compare__col--winner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--k-cyan), var(--k-violet));
  box-shadow: 0 0 22px rgba(0,212,255,0.45);
  z-index: 3;
}

/* Sticky card head — wraps the existing .k-prod-card component so the
   comparator stays visually consistent with the catalog grid. */
.k-compare__head-card {
  position: sticky;
  top: var(--k-header-h);
  z-index: 3;
  display: flex;
  padding: 0.75rem;
  background: var(--k-background);
  /* Height driven by JS compare-layout.js which measures actual rendered height
     and updates --k-compare-head-h so the rail spacer aligns perfectly. */
  height: var(--k-compare-head-h);
  overflow: hidden;
}
.k-compare__head-card .k-prod-card {
  flex: 1;
  width: 100%;
  max-width: 350px;
  height: 100%;
}
/* Featured "winner" — slight lift + cyan halo on the inner card. */
.k-compare__col--winner .k-prod-card {
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.18);
}
/* Non-winner columns get a soft mute. */
.k-compare__col--dim .k-prod-card { opacity: 0.78; }
.k-compare__col--dim .k-prod-card:hover { opacity: 1; }

/* "★ Winner" pill — injected inside .k-prod-card__media (which is
   position: relative) and pinned to its bottom-left corner. Uses the
   primary cyan token so it reads as the lead-state accent. */
.k-compare__head-winner {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--k-cyan);
  background: rgba(var(--k-glass-rgb), 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 9999px;
  pointer-events: none;
}
.k-compare__head-winner svg { width: 11px; height: 11px; color: var(--k-cyan); }

/* Spec rows */
.k-compare__rows {
  display: flex; flex-direction: column;
  /* Padding-top must equal the rail's first group-head height so cell-1
     drops into the same vertical track as rail row-1 (which sits below
     the first sticky group-head). */
  padding-top: var(--k-compare-group-head-h);
}
.k-compare__cell {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}
.k-compare__col--dim .k-compare__cell { color: var(--k-muted); }
.k-compare__cell:nth-child(odd) { background: rgba(255,255,255,0.015); }
.k-compare__cell-group-spacer {
  /* Mirrors the rail's group-head height + group margin-bottom so cell-N+1
     realigns with row-N+1 after each category break. */
  height: var(--k-compare-group-head-h);
  margin-bottom: 1.5rem;
}
.k-compare__cell-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 4px 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 9999px;
}
.k-compare__cell-tag--best { background: rgba(0,255,136,0.12); color: var(--k-green); }
.k-compare__cell-tag--worst { background: rgba(255,59,92,0.12); color: var(--k-danger); }
.k-compare__cell-tag--equal { background: rgba(123,97,255,0.12); color: var(--k-violet); }
.k-compare__cell--best-value { color: var(--k-green); font-weight: 600; }
.k-compare__cell--worst-value { color: var(--k-danger); font-weight: 600; }

/* Empty slot column */
.k-compare__empty {
  /* Inherit the .k-compare__col background — adding a hard-coded dark fill
     here would be wrong in light mode. */
  position: relative;
  background: transparent;
}
.k-compare__empty-card {
  position: sticky;
  top: var(--k-header-h);
  height: calc(var(--k-compare-head-h) - 1.5rem);
  margin: 0.75rem;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: color-mix(in srgb, var(--k-text) 2%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--k-text) 12%, transparent);
  outline-offset: -2px;
  border-radius: 12px;
  transition: outline-color 200ms, background 200ms;
  overflow: visible;
}
.k-compare__empty-card:hover,
.k-compare__empty-card.is-searching {
  outline-color: rgba(0,212,255,0.45);
  background: rgba(0,212,255,0.03);
}

/* Intro block (icon + label) */
.k-compare__empty-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.k-compare__empty-icon {
  width: 40px;
  height: 40px;
  color: var(--k-muted);
  transition: color 200ms;
}
.k-compare__empty-card.is-searching .k-compare__empty-icon,
.k-compare__empty-card:hover .k-compare__empty-icon { color: var(--k-cyan); }
.k-compare__empty-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-muted);
}

/* Search input wrapper */
.k-compare__empty-search-wrap {
  position: relative;
  width: 100%;
}
.k-compare__empty-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--k-muted);
  pointer-events: none;
  transition: color 180ms;
}
.k-compare__empty-search-wrap:focus-within .k-compare__empty-search-icon {
  color: var(--k-cyan);
}

.k-compare__empty-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  background: rgba(var(--k-glass-rgb), 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 232, 237, 0.1);
  border-radius: 8px;
  color: var(--k-text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: border-color 180ms, box-shadow 180ms;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.k-compare__empty-search::placeholder { color: var(--k-muted); }
.k-compare__empty-search:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08), inset 0 0 0 1px rgba(0,212,255,0.08);
}
.k-compare__empty-search::-webkit-search-cancel-button { display: none; }

/* Results dropdown */
.k-compare__empty-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--k-surface-2, #19191f);
  border: 1px solid rgba(232, 232, 237, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0,212,255,0.05);
  overflow: hidden;
  z-index: 50;
  max-height: 340px;
  overflow-y: auto;
}

.k-compare__result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.875rem;
  cursor: pointer;
  transition: background 140ms;
  border-bottom: 1px solid rgba(232, 232, 237, 0.05);
}
.k-compare__result-item:last-child { border-bottom: none; }
.k-compare__result-item:hover,
.k-compare__result-item.is-active {
  background: rgba(0, 212, 255, 0.06);
}
.k-compare__result-item.is-already-added {
  opacity: 0.5;
  cursor: default;
}

.k-compare__result-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(var(--k-glass-rgb), 0.4);
  flex-shrink: 0;
}
.k-compare__result-img--placeholder {
  background: rgba(var(--k-glass-rgb), 0.3);
}

.k-compare__result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.k-compare__result-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-compare__result-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--k-cyan);
}
.k-compare__result-tag {
  font-size: 0.65rem;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--k-muted);
  white-space: nowrap;
}
.k-compare__result-add {
  width: 18px;
  height: 18px;
  color: var(--k-muted);
  flex-shrink: 0;
  transition: color 140ms;
}
.k-compare__result-item:hover .k-compare__result-add { color: var(--k-cyan); }

.k-compare__result-empty {
  padding: 1rem;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: var(--k-muted);
}

/* Browse link */
.k-compare__empty-browse {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--k-muted);
  text-decoration: none;
  transition: color 160ms;
}
.k-compare__empty-browse svg { width: 12px; height: 12px; }
.k-compare__empty-browse:hover { color: var(--k-cyan); }

/* ---------- Mobile layout ---------- */
@media (max-width: 768px) {
  /* Hide spec rail — labels are not readable at column widths < ~100px */
  .k-compare__rail { display: none; }
  /* Hide empty slot — the .k-compare__add-cta banner replaces it on mobile */
  .k-compare__col--empty { display: none; }

  /* Override the 5-track grid to only use filled product columns */
  .k-compare__grid[data-count="1"] { grid-template-columns: 1fr; }
  .k-compare__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .k-compare__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .k-compare__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

  /* Card fills the full column — no desktop max-width cap */
  .k-compare__head-card .k-prod-card { max-width: 100%; }
}

/* ── Narrow mobile — horizontal scroll for multi-product grid ─────── */
@media (max-width: 480px) {
    /* Wrap the grid in a scrollable container.
       The grid itself uses min-width per column so each product
       stays readable instead of being squashed to ~75px. */
    .k-compare__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--k-hairline) transparent;
    }

    /* Each product column gets a full-card width (260px) so every element —
       specs, price + rating, stock bar, compare + buy actions — renders
       correctly instead of being squashed. The grid scrolls horizontally on
       narrow phones (iPhone 12 etc.), which is fine for a comparison surface. */
    .k-compare__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
    .k-compare__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
    .k-compare__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(260px, 1fr)); }

    /* Hero section — vertical stack */
    .k-compare__hero {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Action buttons in compare head — 44px touch target */
    .k-compare__hero-action,
    .k-compare__remove-btn,
    .k-compare__add-btn {
        min-height: 44px;
        touch-action: manipulation;
    }
}