.pl-grid {
  width: 100%;
  background: #fff;
  overflow: hidden;
  margin-bottom: 24px;
}

.pl-scroll-wrap { position: relative; margin-bottom: 24px; }
.pl-scroll > .pl-grid { margin-bottom: 0; }

@media screen and (min-width: 1021px) {
  .pl-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .pl-scroll > .pl-grid {
    min-width: var(--pl-min, auto);
  }
}

.pl-scroll-wrap::before,
.pl-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 4;
}

.pl-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

.pl-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

.pl-scroll-wrap.pl-show-left::before { opacity: 1; }
.pl-scroll-wrap.pl-show-right::after { opacity: 1; }

@media screen and (max-width: 1020px) {
  .pl-scroll-wrap.pl-show-left::before { opacity: 0; }
}

.pl-head {
  display: grid;
  grid-template-columns: var(--pl-cols);
  gap: 6px 8px;
  align-items: center;
  padding: 12px 16px;
  background: var(--secondary, #000);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}

.pl-head-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}

.pl-head-name {
  align-items: flex-start;
  text-align: left;
  font-size: 16px;
}

.pl-head-cta { min-width: 0; }

.pl-head-sub {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

.pl-row {
  display: grid;
  grid-template-columns: var(--pl-cols);
  gap: 6px 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ececee;
  cursor: pointer;
  transition: background 0.15s linear;
}

.pl-row:last-child { border-bottom: none; }

.pl-row:hover {
  background: var(--tableHighlight, rgba(121, 111, 110, 0.1));
}

.pl-cell {
  min-width: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
}

.pl-name {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.pl-thumb {
  width: 64px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.pl-name-text { font-weight: 600; }

.pl-name-model { display: none; }

.pl-mdlname { font-weight: 600; }

/* Prices */
.pl-price { line-height: 1.25; }

.pl-price-now {
  font-weight: 600;
  color: var(--primary, #000);
  white-space: nowrap;
}

.pl-price-was {
  display: block;
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Highlight discounted price in red, mirroring the car list cards */
.pl-price:has(.pl-price-was) .pl-price-now { color: #d32f2f; }

/* EE registration / annual fee */
.pl-fee {
  font-size: 12px;
  color: #555;
}

.pl-fee-line { display: block; white-space: nowrap; }

/* Lease */
.pl-lease-now {
  font-weight: 600;
  color: var(--primary, #000);
  white-space: nowrap;
}

.pl-lease-terms {
  display: block;
  font-size: 11px;
  color: #777;
  line-height: 1.2;
}

/* Action / CTA — colours come from the brand .red / .cta-button class;
   here we only handle placement inside the grid cell. */
.pl-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-cta .red,
.pl-cta .cta-button,
.pl-cta .pl-btn {
  float: none;
  margin: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding:10px;
}

.pl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pl-remove img { width: 16px; height: 16px; }

@media screen and (max-width: 1020px) {
  .pl-grid {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }


  .pl-head { display: none; }

  .pl-name-model { display: inline; }

  /* Each row → card */
  .pl-row {
    display: block;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 8px 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .pl-compare-stickybar-label{
    background:
  }

  .pl-row:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .pl-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
  }

  .compare-extra-section .pl-row > .pl-cell:nth-last-child(2) {
    border-bottom: none;
  }

  .pl-cell::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #666;
  }

  .pl-name {
    justify-content: flex-start;
    text-align: left;
    border-bottom: 2px solid #f1f1f1;
    padding: 8px 0 12px;
    margin-bottom: 4px;
  }

  .pl-name::before { content: none; }

  .pl-name-text { font-size: 16px; font-weight: 700; }

  .pl-thumb { width: 84px; max-height: 56px; }

  .pl-grid:not(.pl-compare) .pl-cell.pl-price,
  .pl-grid:not(.pl-compare) .pl-cell.pl-lease {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    text-align: right;
  }

  .pl-grid:not(.pl-compare) .pl-cell.pl-price::before,
  .pl-grid:not(.pl-compare) .pl-cell.pl-lease::before { grid-column: 1; grid-row: 1; }

  .pl-grid:not(.pl-compare) .pl-price-now,
  .pl-grid:not(.pl-compare) .pl-price-was,
  .pl-grid:not(.pl-compare) .pl-lease-now,
  .pl-grid:not(.pl-compare) .pl-lease-terms { grid-column: 2; text-align: right; }


  .pl-grid:not(.pl-compare) .pl-cell.pl-fee {
    display: grid;
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    text-align: left;
  }

  .pl-grid:not(.pl-compare) .pl-cell.pl-fee::before { grid-column: 1; grid-row: 1; }

  .pl-grid:not(.pl-compare) .pl-fee-line {
    grid-column: 2;
    text-align: right;
    white-space: normal;
  }

  .pl-grid:not(.pl-compare) .pl-cell.pl-fee:not(:has(.pl-fee-line)) { display: none; }

  .pl-cta {
    display: block;
    padding-top: 12px;
    border-bottom: none;
  }

  .pl-cta::before { content: none; }

  .pl-cta .red,
  .pl-cta .cta-button,
  .pl-cta .pl-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

body.hc .pl-grid,
body.hc .pl-head,
body.hc .pl-row {
  background: #000 !important;
  color: #ff0 !important;
  border-color: #ff0 !important;
}

body.hc .pl-row:hover { background: #000 !important; }

body.hc .pl-head-sub,
body.hc .pl-price-now,
body.hc .pl-price-was,
body.hc .pl-lease-now,
body.hc .pl-lease-terms,
body.hc .pl-fee,
body.hc .pl-cell::before {
  color: #ff0 !important;
}

@media screen and (max-width: 1020px) {
  body.hc .pl-row { border: 1px solid #ff0 !important; }
  body.hc .pl-cell { border-bottom-color: #ff0 !important; }
}