.elementor-13880 .elementor-element.elementor-element-8351c50{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;}/* Start custom CSS for html, class: .elementor-element-e5a1c91 *//* =========================================================
   NOVINDERM — FRACTIONAL CO2 COMPARISON
   Premium Clinical / Medical Beauty / Med-Tech
   Responsive: Desktop / Tablet / Mobile
   ========================================================= */

#nd-co2-compare {

  --nd-navy: #071A25;
  --nd-teal: #0B5F63;
  --nd-teal-2: #2C6970;
  --nd-cyan: #35C9C3;
  --nd-cyan-light: #6DE5DF;

  --nd-ivory: #FCFAF6;
  --nd-cream: #F3EEE5;
  --nd-sand: #E6E0D6;

  --nd-gold: #A97845;

  --nd-text: #18343A;
  --nd-muted: #668087;

  --nd-border: rgba(11,95,99,.13);
  --nd-border-strong: rgba(11,95,99,.23);

  --nd-shadow:
    0 18px 55px rgba(7,26,37,.08);

  --nd-shadow-soft:
    0 8px 28px rgba(7,26,37,.06);

  --nd-radius-xl: 28px;
  --nd-radius-lg: 22px;
  --nd-radius-md: 16px;

  width: 100%;
  color: var(--nd-text);

  font-family:
    inherit;

  box-sizing: border-box;

}


#nd-co2-compare *,
#nd-co2-compare *::before,
#nd-co2-compare *::after {

  box-sizing: border-box;

}


#nd-co2-compare button,
#nd-co2-compare input {

  font: inherit;

}


/* =========================================================
   SHELL
   ========================================================= */

#nd-co2-compare .nd-co2-shell {

  width: 100%;
  max-width: 1440px;

  margin-inline: auto;

  position: relative;

}


/* =========================================================
   HEADER
   ========================================================= */

#nd-co2-compare .nd-co2-header {

  position: relative;

  padding:
    18px 0 34px;

}


#nd-co2-compare .nd-co2-header-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

}


/* COUNT */

#nd-co2-compare .nd-co2-count-box {

  min-width: 154px;

  padding:
    13px 18px;

  border:
    1px solid var(--nd-border);

  border-radius:
    15px;

  background:
    rgba(252,250,246,.76);

  box-shadow:
    var(--nd-shadow-soft);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

}


#nd-co2-compare .nd-co2-count-number {

  display: block;

  color:
    var(--nd-teal);

  font-size: 25px;

  font-weight: 800;

  line-height: 1;

}


#nd-co2-compare .nd-co2-count-label {

  display: block;

  margin-top: 6px;

  color:
    var(--nd-muted);

  font-size: 12px;

  font-weight: 500;

}


/* BRAND */

#nd-co2-compare .nd-co2-brand {

  text-align: left;

  direction: ltr;

}


#nd-co2-compare .nd-co2-brand span {

  display: block;

  color:
    var(--nd-navy);

  font-size: 16px;

  font-weight: 800;

  letter-spacing:
    .18em;

}


#nd-co2-compare .nd-co2-brand small {

  display: block;

  margin-top: 5px;

  color:
    var(--nd-teal);

  font-size: 8px;

  font-weight: 700;

  letter-spacing:
    .28em;

}


/* TITLE */

#nd-co2-compare .nd-co2-title-wrap {

  max-width: 960px;

  margin:
    32px auto 0;

  text-align: center;

}


#nd-co2-compare .nd-co2-eyebrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-bottom: 12px;

  color:
    var(--nd-teal);

  font-size: 11px;

  font-weight: 700;

  letter-spacing:
    .06em;

}


#nd-co2-compare .nd-co2-eyebrow::before {

  content: "";

  width: 25px;

  height: 1px;

  background:
    var(--nd-cyan);

}


#nd-co2-compare .nd-co2-eyebrow::after {

  content: "";

  width: 25px;

  height: 1px;

  background:
    var(--nd-cyan);

}


#nd-co2-compare .nd-co2-title-wrap h1 {

  margin: 0;

  color:
    var(--nd-navy);

  font-size:
    clamp(27px, 3vw, 43px);

  line-height: 1.3;

  font-weight: 800;

  letter-spacing:
    -.025em;

}


#nd-co2-compare .nd-co2-title-wrap p {

  max-width: 850px;

  margin:
    16px auto 0;

  color:
    var(--nd-muted);

  font-size:
    clamp(13px, 1.1vw, 15px);

  line-height: 2;

}


/* =========================================================
   CONTROLS
   ========================================================= */

#nd-co2-compare .nd-co2-controls {

  padding:
    18px;

  border:
    1px solid var(--nd-border);

  border-radius:
    var(--nd-radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(252,250,246,.94),
      rgba(243,238,229,.72)
    );

  box-shadow:
    var(--nd-shadow-soft);

  margin-bottom:
    26px;

}


/* SEARCH */

#nd-co2-compare .nd-co2-search {

  position: relative;

  width: 100%;

}


#nd-co2-compare .nd-co2-search svg {

  position: absolute;

  right: 17px;

  top: 50%;

  width: 19px;

  height: 19px;

  transform:
    translateY(-50%);

  fill: none;

  stroke:
    var(--nd-teal);

  stroke-width: 1.7;

  pointer-events: none;

}


#nd-co2-compare .nd-co2-search input {

  width: 100%;

  height: 52px;

  padding:
    0 50px 0 18px;

  border:
    1px solid var(--nd-border);

  border-radius:
    14px;

  outline: none;

  background:
    rgba(255,255,255,.72);

  color:
    var(--nd-navy);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;

}


#nd-co2-compare .nd-co2-search input::placeholder {

  color:
    #8AA0A4;

}


#nd-co2-compare .nd-co2-search input:focus {

  border-color:
    rgba(53,201,195,.62);

  background:
    #fff;

  box-shadow:
    0 0 0 4px rgba(53,201,195,.08);

}


/* FILTER GROUPS */

#nd-co2-compare .nd-co2-filter-groups {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 14px;

}


#nd-co2-compare .nd-co2-filter-group {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  padding:
    7px;

  border:
    1px solid rgba(11,95,99,.08);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.48);

}


#nd-co2-compare .nd-co2-filter-title {

  padding:
    0 8px;

  color:
    var(--nd-teal);

  font-size: 11px;

  font-weight: 800;

}


#nd-co2-compare .nd-co2-filter {

  min-height: 32px;

  padding:
    5px 12px;

  border:
    1px solid transparent;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--nd-muted);

  font-size: 11px;

  cursor: pointer;

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-filter:hover {

  color:
    var(--nd-teal);

  background:
    rgba(53,201,195,.07);

}


#nd-co2-compare .nd-co2-filter.active {

  color:
    #fff;

  background:
    var(--nd-teal);

  box-shadow:
    0 5px 14px rgba(11,95,99,.16);

}


/* NOTE */

#nd-co2-compare .nd-co2-filter-note {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 13px;

  color:
    var(--nd-muted);

  font-size: 11px;

  line-height: 1.8;

}


#nd-co2-compare .nd-co2-note-dot {

  flex: 0 0 auto;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--nd-cyan);

  box-shadow:
    0 0 0 4px rgba(53,201,195,.09);

}


/* =========================================================
   DEVICE GRID
   ========================================================= */

#nd-co2-compare .nd-co2-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

}


/* CARD */

#nd-co2-compare .nd-co2-card {

  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid var(--nd-border);

  border-radius:
    var(--nd-radius-lg);

  background:
    rgba(252,250,246,.91);

  box-shadow:
    0 9px 30px rgba(7,26,37,.055);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


#nd-co2-compare .nd-co2-card:hover {

  border-color:
    rgba(53,201,195,.34);

  box-shadow:
    0 18px 44px rgba(7,26,37,.095);

}


#nd-co2-compare .nd-co2-card.is-selected {

  border-color:
    rgba(53,201,195,.72);

  box-shadow:
    0 18px 48px rgba(11,95,99,.13);

}


/* IMAGE */

#nd-co2-compare .nd-co2-card-image-wrap {

  position: relative;

  height: 250px;

  padding:
    25px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(53,201,195,.075),
      transparent 68%
    );

}


#nd-co2-compare .nd-co2-card-glow {

  position: absolute;

  width: 170px;

  height: 170px;

  border-radius: 50%;

  background:
    rgba(109,229,223,.08);

  filter:
    blur(25px);

  pointer-events: none;

}


#nd-co2-compare .nd-co2-card-image-wrap img {

  position: relative;

  z-index: 2;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  display: block;

}


/* SELECT BUTTON */

#nd-co2-compare .nd-co2-select {

  position: absolute;

  z-index: 5;

  top: 13px;

  right: 13px;

  width: 31px;

  height: 31px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid rgba(11,95,99,.18);

  border-radius: 50%;

  background:
    rgba(252,250,246,.87);

  color:
    var(--nd-teal);

  cursor: pointer;

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-select:hover {

  border-color:
    var(--nd-cyan);

  background:
    rgba(255,255,255,.96);

}


#nd-co2-compare .nd-co2-card.is-selected
.nd-co2-select {

  color:
    #fff;

  border-color:
    var(--nd-teal);

  background:
    var(--nd-teal);

}


#nd-co2-compare .nd-co2-select span {

  font-size: 14px;

  font-weight: 800;

}


/* CARD BODY */

#nd-co2-compare .nd-co2-card-body {

  display: flex;

  flex-direction: column;

  flex: 1;

  padding:
    18px 18px 16px;

}


#nd-co2-compare .nd-co2-card-brand {

  color:
    var(--nd-teal);

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    .07em;

}


#nd-co2-compare .nd-co2-card h2 {

  margin:
    5px 0 9px;

  color:
    var(--nd-navy);

  font-size: 19px;

  line-height: 1.35;

  font-weight: 800;

}


#nd-co2-compare .nd-co2-card-description {

  min-height: 70px;

  margin: 0;

  color:
    var(--nd-muted);

  font-size: 11.5px;

  line-height: 1.9;

}


/* BADGES */

#nd-co2-compare .nd-co2-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin:
    12px 0;

}


#nd-co2-compare .nd-co2-badge {

  padding:
    5px 8px;

  border:
    1px solid rgba(11,95,99,.10);

  border-radius:
    7px;

  background:
    rgba(11,95,99,.035);

  color:
    var(--nd-teal);

  font-size: 9px;

  font-weight: 700;

}


/* HIGHLIGHTS */

#nd-co2-compare .nd-co2-highlights {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:
    6px 8px;

  margin-top: 3px;

}


#nd-co2-compare .nd-co2-highlights span {

  display: flex;

  align-items: flex-start;

  gap: 6px;

  color:
    #567177;

  font-size: 9.5px;

  line-height: 1.55;

}


#nd-co2-compare .nd-co2-highlights i {

  flex: 0 0 auto;

  width: 5px;

  height: 5px;

  margin-top: 5px;

  border-radius: 50%;

  background:
    var(--nd-cyan);

}


/* FOOTER */

#nd-co2-compare .nd-co2-card-footer {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: auto;

  padding-top:
    16px;

}


#nd-co2-compare .nd-co2-card-compare {

  flex: 1;

  min-width: 0;

  min-height: 39px;

  padding:
    7px 9px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border:
    1px solid rgba(11,95,99,.17);

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--nd-teal);

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-card-compare:hover {

  color:
    #fff;

  background:
    var(--nd-teal);

}


#nd-co2-compare .nd-co2-check-mini {

  width: 18px;

  height: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid currentColor;

  border-radius: 50%;

  font-size: 9px;

}


#nd-co2-compare .nd-co2-card-link {

  flex: 0 0 auto;

  min-height: 39px;

  padding:
    8px 9px;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  border:
    1px solid rgba(11,95,99,.10);

  border-radius:
    10px;

  color:
    var(--nd-muted);

  font-size: 9px;

  text-decoration: none;

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-card-link:hover {

  color:
    var(--nd-teal);

  border-color:
    rgba(53,201,195,.35);

}


/* =========================================================
   EMPTY
   ========================================================= */

#nd-co2-compare .nd-co2-empty {

  padding:
    70px 20px;

  text-align: center;

  border:
    1px dashed rgba(11,95,99,.18);

  border-radius:
    var(--nd-radius-lg);

  background:
    rgba(252,250,246,.7);

}


#nd-co2-compare .nd-co2-empty-icon {

  width: 48px;

  height: 48px;

  margin:
    0 auto 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    rgba(53,201,195,.08);

}


#nd-co2-compare .nd-co2-empty-icon svg {

  width: 22px;

  height: 22px;

  fill: none;

  stroke:
    var(--nd-teal);

  stroke-width: 1.6;

}


#nd-co2-compare .nd-co2-empty strong {

  display: block;

  color:
    var(--nd-navy);

  font-size: 16px;

}


#nd-co2-compare .nd-co2-empty span {

  display: block;

  margin-top: 6px;

  color:
    var(--nd-muted);

  font-size: 11px;

}


/* =========================================================
   STICKY BAR
   ========================================================= */

#nd-co2-compare .nd-co2-sticky-bar {

  position: fixed;

  z-index: 99990;

  right: 20px;

  left: 20px;

  bottom: 18px;

  transform:
    translateY(150%);

  opacity: 0;

  pointer-events: none;

  transition:
    transform .3s ease,
    opacity .3s ease;

}


#nd-co2-compare .nd-co2-sticky-bar.is-visible {

  transform:
    translateY(0);

  opacity: 1;

  pointer-events: auto;

}


#nd-co2-compare .nd-co2-sticky-inner {

  max-width: 1100px;

  margin-inline: auto;

  min-height: 70px;

  padding:
    10px 13px 10px 16px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  border:
    1px solid rgba(109,229,223,.28);

  border-radius:
    20px;

  background:
    rgba(7,26,37,.94);

  box-shadow:
    0 20px 65px rgba(7,26,37,.25);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


#nd-co2-compare .nd-co2-selected-info {

  display: flex;

  align-items: center;

  gap: 10px;

}


#nd-co2-compare .nd-co2-selected-icon {

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color:
    var(--nd-navy);

  background:
    var(--nd-cyan-light);

  font-weight: 900;

}


#nd-co2-compare .nd-co2-selected-info strong {

  display: block;

  color:
    #fff;

  font-size: 12px;

}


#nd-co2-compare .nd-co2-selected-info small {

  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.56);

  font-size: 9px;

}


#nd-co2-compare .nd-co2-sticky-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}


#nd-co2-compare .nd-co2-clear-btn,
#nd-co2-compare .nd-co2-compare-btn {

  min-height: 40px;

  padding:
    8px 15px;

  border-radius:
    10px;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-clear-btn {

  border:
    1px solid rgba(255,255,255,.12);

  background:
    transparent;

  color:
    rgba(255,255,255,.72);

}


#nd-co2-compare .nd-co2-clear-btn:hover {

  color:
    #fff;

  border-color:
    rgba(255,255,255,.3);

}


#nd-co2-compare .nd-co2-compare-btn {

  border:
    1px solid var(--nd-cyan);

  background:
    var(--nd-cyan);

  color:
    var(--nd-navy);

}


#nd-co2-compare .nd-co2-compare-btn:hover:not(:disabled) {

  background:
    var(--nd-cyan-light);

}


#nd-co2-compare .nd-co2-compare-btn:disabled {

  opacity: .38;

  cursor: not-allowed;

}


/* =========================================================
   MODAL
   ========================================================= */

body.nd-co2-modal-open {

  overflow: hidden;

}


#nd-co2-compare .nd-co2-modal {

  position: fixed;

  z-index: 999999;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;

}


#nd-co2-compare .nd-co2-modal.is-open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


#nd-co2-compare .nd-co2-modal-backdrop {

  position: absolute;

  inset: 0;

  background:
    rgba(7,26,37,.76);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


#nd-co2-compare .nd-co2-modal-panel {

  position: relative;

  z-index: 2;

  width: min(1400px, 100%);

  max-height: min(900px, 92vh);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(109,229,223,.18);

  border-radius:
    25px;

  background:
    var(--nd-ivory);

  box-shadow:
    0 35px 100px rgba(0,0,0,.30);

  transform:
    translateY(15px) scale(.985);

  transition:
    transform .3s ease;

}


#nd-co2-compare .nd-co2-modal.is-open
.nd-co2-modal-panel {

  transform:
    translateY(0) scale(1);

}


/* MODAL HEADER */

#nd-co2-compare .nd-co2-modal-header {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    22px 25px;

  border-bottom:
    1px solid var(--nd-border);

  background:
    linear-gradient(
      135deg,
      #FCFAF6,
      #F3EEE5
    );

}


#nd-co2-compare .nd-co2-modal-eyebrow {

  color:
    var(--nd-teal);

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    .12em;

}


#nd-co2-compare .nd-co2-modal-header h2 {

  margin:
    6px 0 3px;

  color:
    var(--nd-navy);

  font-size:
    clamp(19px, 2vw, 26px);

  font-weight: 800;

}


#nd-co2-compare .nd-co2-modal-header p {

  margin: 0;

  color:
    var(--nd-muted);

  font-size: 10px;

}


#nd-co2-compare .nd-co2-modal-close {

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--nd-border);

  border-radius: 12px;

  background:
    rgba(255,255,255,.65);

  color:
    var(--nd-teal);

  cursor: pointer;

  transition:
    .2s ease;

}


#nd-co2-compare .nd-co2-modal-close:hover {

  background:
    var(--nd-teal);

  color:
    #fff;

}


#nd-co2-compare .nd-co2-modal-close svg {

  width: 19px;

  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

}


/* TABLE SCROLL */

#nd-co2-compare .nd-co2-comparison-scroll {

  flex: 1 1 auto;

  min-height: 0;

  overflow: auto;

  overscroll-behavior:
    contain;

}


#nd-co2-compare .nd-co2-table-wrap {

  width: max-content;

  min-width: 100%;

}


/* TABLE */

#nd-co2-compare .nd-co2-table {

  width: max-content;

  min-width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  table-layout: fixed;

}


#nd-co2-compare .nd-co2-table th,
#nd-co2-compare .nd-co2-table td {

  padding:
    14px 15px;

  border-left:
    1px solid var(--nd-border);

  border-bottom:
    1px solid var(--nd-border);

  vertical-align: middle;

}


#nd-co2-compare .nd-co2-table thead th {

  min-width: 225px;

  position: sticky;

  top: 0;

  z-index: 4;

  background:
    #F3EEE5;

}


#nd-co2-compare .nd-co2-table thead
.nd-co2-feature-head {

  position: sticky;

  right: 0;

  z-index: 7;

  width: 190px;

  min-width: 190px;

  text-align: right;

  background:
    var(--nd-navy);

  color:
    #fff;

}


#nd-co2-compare .nd-co2-table tbody th {

  position: sticky;

  right: 0;

  z-index: 5;

  width: 190px;

  min-width: 190px;

  text-align: right;

  background:
    #FCFAF6;

  color:
    var(--nd-teal);

  font-size: 10px;

  font-weight: 800;

}


#nd-co2-compare .nd-co2-table tbody tr.is-even td {

  background:
    rgba(243,238,229,.35);

}


#nd-co2-compare .nd-co2-table tbody tr.is-even th {

  background:
    #F7F3EC;

}


#nd-co2-compare .nd-co2-table td {

  width: 225px;

  min-width: 225px;

  color:
    #435D63;

  font-size: 10px;

  line-height: 1.85;

  text-align: right;

}


#nd-co2-compare .nd-co2-table-device {

  display: flex;

  align-items: center;

  gap: 10px;

  text-align: right;

}


#nd-co2-compare .nd-co2-table-image {

  flex: 0 0 auto;

  width: 57px;

  height: 57px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--nd-border);

  border-radius: 10px;

  background:
    rgba(255,255,255,.65);

}


#nd-co2-compare .nd-co2-table-image img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}


#nd-co2-compare .nd-co2-table-device span {

  display: block;

  color:
    var(--nd-teal);

  font-size: 8px;

  font-weight: 800;

}


#nd-co2-compare .nd-co2-table-device strong {

  display: block;

  margin-top: 3px;

  color:
    var(--nd-navy);

  font-size: 12px;

  line-height: 1.35;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  #nd-co2-compare .nd-co2-grid {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

  }

}


@media (max-width: 850px) {

  #nd-co2-compare .nd-co2-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px;

  }


  #nd-co2-compare .nd-co2-card-image-wrap {

    height: 220px;

  }


  #nd-co2-compare .nd-co2-title-wrap {

    padding-inline: 15px;

  }


  #nd-co2-compare .nd-co2-controls {

    padding: 14px;

  }


  #nd-co2-compare .nd-co2-filter-groups {

    display: grid;

    grid-template-columns:
      1fr;

  }


  #nd-co2-compare .nd-co2-filter-group {

    width: 100%;

  }


  #nd-co2-compare .nd-co2-sticky-inner {

    max-width: 100%;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #nd-co2-compare .nd-co2-header {

    padding-top: 10px;

  }


  #nd-co2-compare .nd-co2-header-top {

    align-items: center;

  }


  #nd-co2-compare .nd-co2-count-box {

    min-width: 125px;

    padding:
      10px 12px;

  }


  #nd-co2-compare .nd-co2-count-number {

    font-size: 21px;

  }


  #nd-co2-compare .nd-co2-count-label {

    font-size: 9px;

  }


  #nd-co2-compare .nd-co2-brand span {

    font-size: 13px;

  }


  #nd-co2-compare .nd-co2-brand small {

    font-size: 6px;

  }


  #nd-co2-compare .nd-co2-title-wrap {

    margin-top: 25px;

  }


  #nd-co2-compare .nd-co2-title-wrap h1 {

    font-size: 24px;

  }


  #nd-co2-compare .nd-co2-title-wrap p {

    font-size: 11px;

    line-height: 1.9;

  }


  #nd-co2-compare .nd-co2-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap: 10px;

  }


  #nd-co2-compare .nd-co2-card {

    border-radius: 16px;

  }


  #nd-co2-compare .nd-co2-card-image-wrap {

    height: 165px;

    padding: 14px;

  }


  #nd-co2-compare .nd-co2-card-body {

    padding:
      13px 12px 12px;

  }


  #nd-co2-compare .nd-co2-card h2 {

    font-size: 15px;

  }


  #nd-co2-compare .nd-co2-card-description {

    min-height: 76px;

    font-size: 9.5px;

    line-height: 1.75;

  }


  #nd-co2-compare .nd-co2-highlights {

    grid-template-columns:
      1fr;

  }


  #nd-co2-compare .nd-co2-highlights span {

    font-size: 8.5px;

  }


  #nd-co2-compare .nd-co2-card-footer {

    flex-direction: column;

    align-items: stretch;

  }


  #nd-co2-compare .nd-co2-card-link {

    justify-content: center;

  }


  #nd-co2-compare .nd-co2-sticky-bar {

    right: 9px;

    left: 9px;

    bottom: 9px;

  }


  #nd-co2-compare .nd-co2-sticky-inner {

    min-height: auto;

    padding: 9px;

    flex-direction: column;

    align-items: stretch;

    border-radius: 16px;

  }


  #nd-co2-compare .nd-co2-selected-info {

    padding-inline: 4px;

  }


  #nd-co2-compare .nd-co2-selected-info small {

    font-size: 8px;

  }


  #nd-co2-compare .nd-co2-sticky-actions {

    width: 100%;

  }


  #nd-co2-compare .nd-co2-clear-btn,
  #nd-co2-compare .nd-co2-compare-btn {

    flex: 1;

    min-height: 42px;

  }


  #nd-co2-compare .nd-co2-modal {

    padding: 0;

  }


  #nd-co2-compare .nd-co2-modal-panel {

    width: 100%;

    height: 100%;

    max-height: 100%;

    border-radius: 0;

  }


  #nd-co2-compare .nd-co2-modal-header {

    padding:
      16px;

  }


  #nd-co2-compare .nd-co2-modal-header h2 {

    font-size: 17px;

  }


  #nd-co2-compare .nd-co2-modal-header p {

    font-size: 8px;

  }


  #nd-co2-compare .nd-co2-modal-close {

    width: 36px;

    height: 36px;

  }


  #nd-co2-compare .nd-co2-table thead th {

    min-width: 190px;

  }


  #nd-co2-compare .nd-co2-table thead
  .nd-co2-feature-head,
  #nd-co2-compare .nd-co2-table tbody th {

    width: 135px;

    min-width: 135px;

  }


  #nd-co2-compare .nd-co2-table td {

    width: 190px;

    min-width: 190px;

    padding:
      12px;

    font-size: 9px;

  }


  #nd-co2-compare .nd-co2-table th {

    padding:
      12px;

  }


  #nd-co2-compare .nd-co2-table-device {

    gap: 7px;

  }


  #nd-co2-compare .nd-co2-table-image {

    width: 43px;

    height: 43px;

  }


  #nd-co2-compare .nd-co2-table-device strong {

    font-size: 10px;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  #nd-co2-compare .nd-co2-grid {

    grid-template-columns:
      1fr;

  }


  #nd-co2-compare .nd-co2-card-image-wrap {

    height: 210px;

  }


  #nd-co2-compare .nd-co2-card-description {

    min-height: auto;

  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

#nd-co2-compare button:focus-visible,
#nd-co2-compare input:focus-visible,
#nd-co2-compare a:focus-visible {

  outline:
    2px solid var(--nd-cyan);

  outline-offset:
    3px;

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #nd-co2-compare *,
  #nd-co2-compare *::before,
  #nd-co2-compare *::after {

    transition: none !important;

    scroll-behavior: auto !important;

  }

}/* End custom CSS */