/*
 * Product compare strip + compare matrix (compare route).
 * Matrix chrome aligns with .custom-table in web/css/common.css (thead/tbody striping, typography).
 * Tokens: :root + body.as overrides from common.css (--primary1, --title-font-color, --bs-body-color, etc.).
 */

/* ----- Compare queue bar (all pages) ----- */
body.ad .product-compare-strip,
body.as .product-compare-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(var(--bs-body-color));
  background-color: var(--nav-active-bg);
  border-top: 1px solid rgba(var(--title-font-color), 0.08);
  box-shadow: 0 -6px 28px rgba(var(--title-font-color), 0.1);
}

body.ad.product-compare-strip-open #wrapper,
body.as.product-compare-strip-open #wrapper {
  padding-bottom: 5.5rem;
}

body.ad .product-compare-strip-scroll,
body.as .product-compare-strip-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (pointer: fine) {
  body.ad .product-compare-strip-scroll,
  body.as .product-compare-strip-scroll {
    cursor: grab;
  }

  body.ad .product-compare-strip-scroll.product-compare-strip-scroll--dragging,
  body.as .product-compare-strip-scroll.product-compare-strip-scroll--dragging {
    cursor: grabbing;
  }
}

body.ad .product-compare-strip-scroll.product-compare-strip-scroll--dragging,
body.ad .product-compare-strip-scroll.product-compare-strip-scroll--dragging *,
body.as .product-compare-strip-scroll.product-compare-strip-scroll--dragging,
body.as .product-compare-strip-scroll.product-compare-strip-scroll--dragging * {
  user-select: none;
}

body.ad .product-compare-strip-item,
body.as .product-compare-strip-item {
  min-width: 12rem;
  max-width: 14rem;
}

body.ad .product-compare-strip-item .product-compare-strip-thumb,
body.as .product-compare-strip-item .product-compare-strip-thumb {
  width: 2.75rem;
  height: 2.75rem;
}

body.ad .product-compare-strip-item .product-compare-strip-thumb:not(img),
body.as .product-compare-strip-item .product-compare-strip-thumb:not(img) {
  flex-shrink: 0;
}

body.ad .product-compare-strip-item img.product-compare-strip-thumb,
body.as .product-compare-strip-item img.product-compare-strip-thumb {
  object-fit: cover;
}

/* ----- Compare route layout ----- */
html:has(body.ad.compare-page),
html:has(body.as.compare-page),
body.ad.compare-page,
body.as.compare-page {
  overflow-x: hidden;
  max-width: 100%;
}

body.ad.compare-page .compare-page-root,
body.as.compare-page .compare-page-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-color: rgba(var(--title-font-color), 0.12) !important;
}

body.ad.compare-page .compare-highlight-switch__label,
body.as.compare-page .compare-highlight-switch__label {
  min-width: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(var(--bs-body-color));
}

body.ad.compare-page .compare-highlight-switch,
body.as.compare-page .compare-highlight-switch {
  padding-left: 0;
}

body.ad.compare-page .compare-highlight-switch .form-check-input,
body.as.compare-page .compare-highlight-switch .form-check-input {
  float: none;
  margin-left: 0;
  position: relative;
}

body.ad.compare-page .compare-matrix-x-clip,
body.as.compare-page .compare-matrix-x-clip {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.ad.compare-page .compare-matrix-scroll,
body.as.compare-page .compare-matrix-scroll {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.ad.compare-page .compare-matrix-inner,
body.as.compare-page .compare-matrix-inner {
  --compare-label-width: clamp(140px, 26vw, 260px);
  --compare-product-width: 13rem;
  --compare-product-count: 2;
  --compare-matrix-border: rgba(var(--title-font-color), 0.12);
  box-sizing: border-box;
  width: 100%;
  min-width: max(100%, calc(var(--compare-label-width) + var(--compare-product-count) * var(--compare-product-width)));
  font-family: var(--bs-font-sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(var(--bs-body-color));
}

body.ad.compare-page .compare-matrix-line,
body.as.compare-page .compare-matrix-line {
  min-width: 100%;
  width: 100%;
  border-bottom: 1px solid var(--compare-matrix-border);
}

body.ad.compare-page .compare-matrix-label--sticky,
body.as.compare-page .compare-matrix-label--sticky {
  position: sticky;
  left: 0;
  z-index: 6;
  flex: 0 0 var(--compare-label-width);
  width: var(--compare-label-width);
  max-width: var(--compare-label-width);
  border-right: 1px solid var(--compare-matrix-border);
  box-shadow: 6px 0 14px -8px rgba(var(--title-font-color), 0.12);
}

/* ----- Header row (.custom-table thead th alignment) ----- */
body.ad.compare-page .compare-matrix-line--header,
body.as.compare-page .compare-matrix-line--header {
  border-bottom: none;
}

body.ad.compare-page .compare-matrix-line--header .compare-matrix-label--sticky.compare-matrix-label--header-label,
body.as.compare-page .compare-matrix-line--header .compare-matrix-label--sticky.compare-matrix-label--header-label {
  background-color: rgb(var(--title-font-color), 0.1);
  z-index: 8;
}

body.ad.compare-page .compare-matrix-heading-label,
body.as.compare-page .compare-matrix-heading-label {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--primary1));
}

body.ad.compare-page .compare-matrix-line--header .compare-matrix-product--header,
body.as.compare-page .compare-matrix-line--header .compare-matrix-product--header {
  position: relative;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  vertical-align: middle;
  background-color: rgb(var(--title-font-color), 0.1);
  border-inline-start: 1px solid var(--compare-matrix-border);
}

/* Alternate header columns */
body.ad.compare-page .compare-matrix-line--header .compare-matrix-product--header:nth-child(2n + 2),
body.as.compare-page .compare-matrix-line--header .compare-matrix-product--header:nth-child(2n + 2) {
  background-color: rgb(var(--title-font-color), 0.14);
}

body.ad.compare-page .compare-matrix-product-title,
body.as.compare-page .compare-matrix-product-title {
  font-size: 0.95rem;
  font-weight: 500;
}

body.ad.compare-page .compare-matrix-product-title-link,
body.as.compare-page .compare-matrix-product-title-link {
  color: rgb(var(--title-font-color));
  text-decoration: none;
}

body.ad.compare-page .compare-matrix-product-title-link:hover,
body.as.compare-page .compare-matrix-product-title-link:hover {
  color: rgb(var(--primary1));
}

/* ----- Section / group band ----- */
body.ad.compare-page .compare-matrix-line--section.compare-matrix-line--section-full,
body.as.compare-page .compare-matrix-line--section.compare-matrix-line--section-full {
  border-bottom: 1px solid var(--compare-matrix-border);
}

/* Full-width group band (not confined to sticky label column); spans matrix scroll width */
body.ad.compare-page .compare-matrix-section-banner,
body.as.compare-page .compare-matrix-section-banner {
  flex: 1 1 auto;
  width: 100%;
  min-width: max(100%, calc(var(--compare-label-width) + var(--compare-product-count) * var(--compare-product-width)));
  box-sizing: border-box;
  background-color: rgba(var(--primary1), 0.07);
}

body.ad.compare-page .compare-matrix-group-label,
body.as.compare-page .compare-matrix-group-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--primary1));
}

/* ----- Data rows (.custom-table tbody td alignment) ----- */
body.ad.compare-page .compare-matrix-line--data .compare-matrix-label--sticky.compare-matrix-label--spec,
body.ad.compare-page .compare-matrix-line--data .compare-matrix-product--cell,
body.as.compare-page .compare-matrix-line--data .compare-matrix-label--sticky.compare-matrix-label--spec,
body.as.compare-page .compare-matrix-line--data .compare-matrix-product--cell {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  vertical-align: middle;
  background-color: rgb(var(--title-font-color), 0.05);
  border-inline-start: 1px solid var(--compare-matrix-border);
}

body.ad.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-label--sticky.compare-matrix-label--spec,
body.ad.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-product--cell,
body.as.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-label--sticky.compare-matrix-label--spec,
body.as.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-product--cell {
  background-color: rgb(var(--title-font-color), 0.1);
}

body.ad.compare-page .compare-matrix-label--spec,
body.as.compare-page .compare-matrix-label--spec {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(var(--bs-body-color));
}

/* Alternate product columns on data rows */
body.ad.compare-page .compare-matrix-line--data .compare-matrix-product--cell:nth-child(2n + 2),
body.as.compare-page .compare-matrix-line--data .compare-matrix-product--cell:nth-child(2n + 2) {
  background-color: rgb(var(--title-font-color), 0.05);
  box-shadow: inset 0 0 0 9999px rgba(var(--primary1), 0.045);
}

body.ad.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-product--cell:nth-child(2n + 2),
body.as.compare-page .compare-matrix-line--data.compare-matrix-line--stripe-alt .compare-matrix-product--cell:nth-child(2n + 2) {
  background-color: rgb(var(--title-font-color), 0.1);
  box-shadow: inset 0 0 0 9999px rgba(var(--primary1), 0.055);
}

/* ----- Composite rows ----- */
body.ad.compare-page .compare-matrix-line--composite-heading .compare-matrix-label--sticky,
body.ad.compare-page .compare-matrix-line--composite-heading .compare-matrix-product--cell,
body.as.compare-page .compare-matrix-line--composite-heading .compare-matrix-label--sticky,
body.as.compare-page .compare-matrix-line--composite-heading .compare-matrix-product--cell {
  background-color: rgb(var(--title-font-color), 0.08);
  border-inline-start: 1px solid var(--compare-matrix-border);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

body.ad.compare-page .compare-matrix-label--composite-heading,
body.as.compare-page .compare-matrix-label--composite-heading {
  font-weight: 600;
  color: rgb(var(--title-font-color));
}

body.ad.compare-page .compare-matrix-line--composite-block .compare-matrix-label--sticky,
body.ad.compare-page .compare-matrix-line--composite-block .compare-matrix-product--cell,
body.as.compare-page .compare-matrix-line--composite-block .compare-matrix-label--sticky,
body.as.compare-page .compare-matrix-line--composite-block .compare-matrix-product--cell {
  background-color: rgb(var(--title-font-color), 0.06);
  border-inline-start: 1px solid var(--compare-matrix-border);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

body.ad.compare-page .compare-matrix-label--composite-block,
body.as.compare-page .compare-matrix-label--composite-block {
  font-weight: 400;
  color: rgba(var(--bs-body-color));
}

body.ad.compare-page .compare-matrix-line--composite-heading .compare-matrix-product--cell:nth-child(2n + 2),
body.as.compare-page .compare-matrix-line--composite-heading .compare-matrix-product--cell:nth-child(2n + 2) {
  box-shadow: inset 0 0 0 9999px rgba(var(--primary1), 0.04);
}

body.ad.compare-page .compare-matrix-line--composite-block .compare-matrix-product--cell:nth-child(2n + 2),
body.as.compare-page .compare-matrix-line--composite-block .compare-matrix-product--cell:nth-child(2n + 2) {
  box-shadow: inset 0 0 0 9999px rgba(var(--primary1), 0.03);
}

/* ----- Shared flex widths ----- */
body.ad.compare-page .compare-matrix-product,
body.as.compare-page .compare-matrix-product {
  flex: 1 1 var(--compare-product-width);
  min-width: var(--compare-product-width);
  box-sizing: border-box;
}

/* ----- Column reorder ----- */
body.ad.compare-page .compare-matrix-col-drag,
body.as.compare-page .compare-matrix-col-drag {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 3;
  cursor: grab;
  touch-action: none;
}

body.ad.compare-page .compare-matrix-col-drag:active,
body.as.compare-page .compare-matrix-col-drag:active {
  cursor: grabbing;
}

body.ad.compare-page .compare-matrix-scroll.compare-matrix-scroll--col-drag,
body.as.compare-page .compare-matrix-scroll.compare-matrix-scroll--col-drag {
  cursor: grabbing;
  user-select: none;
  touch-action: none;
}

body.ad.compare-page .compare-matrix--column-drag-active,
body.as.compare-page .compare-matrix--column-drag-active {
  user-select: none;
}

body.ad.compare-page .compare-matrix-col-placeholder,
body.as.compare-page .compare-matrix-col-placeholder {
  flex: 0 0 var(--compare-product-width);
  min-width: var(--compare-product-width);
  box-sizing: border-box;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    rgba(var(--primary1), 0.14),
    rgba(var(--primary1), 0.06)
  );
  border-inline-start: 2px dashed rgba(var(--primary1), 0.65) !important;
  border-inline-end: 2px dashed rgba(var(--primary1), 0.65) !important;
  outline: 1px solid rgba(var(--primary1), 0.35);
  outline-offset: -3px;
}

body.ad.compare-page .compare-matrix--column-drag-active .compare-matrix-col-placeholder,
body.as.compare-page .compare-matrix--column-drag-active .compare-matrix-col-placeholder {
  opacity: 0;
  animation: compare-matrix-placeholder-in 0.28s linear forwards;
}

@keyframes compare-matrix-placeholder-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ad.compare-page .compare-matrix-col-placeholder,
  body.as.compare-page .compare-matrix-col-placeholder {
    opacity: 1;
    animation: none;
  }

  body.ad.compare-page .compare-matrix--column-drag-active .compare-matrix-col-placeholder,
  body.as.compare-page .compare-matrix--column-drag-active .compare-matrix-col-placeholder {
    animation: none;
    opacity: 1;
  }
}

body.ad.compare-page .compare-matrix-floating-col-outline,
body.as.compare-page .compare-matrix-floating-col-outline {
  position: fixed;
  z-index: 1050;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgb(var(--primary1));
  border-radius: 0.375rem;
  background: rgba(var(--primary1), 0.09);
  box-shadow: 0 0.35rem 1.25rem rgba(var(--title-font-color), 0.12);
}

body.ad.compare-page .compare-matrix-product .product-compare-image-cell,
body.ad.compare-page .compare-matrix-inner .product-compare-image-cell,
body.as.compare-page .compare-matrix-product .product-compare-image-cell,
body.as.compare-page .compare-matrix-inner .product-compare-image-cell {
  width: 80px;
  height: 80px;
}

body.ad.compare-page .compare-matrix-inner .product-compare-image-placeholder,
body.as.compare-page .compare-matrix-inner .product-compare-image-placeholder {
  width: 80px;
  height: 80px;
  vertical-align: top;
}

body.ad.compare-page .compare-matrix-line--header .product-compare-image-remove,
body.as.compare-page .compare-matrix-line--header .product-compare-image-remove {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  padding: 0.4rem;
  box-sizing: content-box;
  background-color: var(--nav-active-bg);
}

body.ad.compare-page .compare-matrix-line--header .product-compare-image-remove:focus,
body.as.compare-page .compare-matrix-line--header .product-compare-image-remove:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary1), 0.28);
}

body.ad.compare-page .compare-matrix-inner .object-fit-cover,
body.as.compare-page .compare-matrix-inner .object-fit-cover {
  object-fit: cover;
}

/* Highlight differences: primary accent + readable body text */
body.ad.compare-page .compare-matrix-product.compare-matrix-cell--diff,
body.as.compare-page .compare-matrix-product.compare-matrix-cell--diff {
  background-color: rgba(var(--primary1), 0.16) !important;
  box-shadow: inset 4px 0 0 rgb(var(--primary1)), inset 0 0 0 9999px rgba(var(--primary1), 0.08) !important;
  color: rgb(var(--title-font-color));
}

body.ad.compare-page .compare-matrix-product.compare-matrix-cell--diff a,
body.as.compare-page .compare-matrix-product.compare-matrix-cell--diff a {
  color: rgb(var(--primary1));
}