/* Loaded via pdp.css. Breaks at 992 rather than the usual content tier of 768, because
   the 400px buy box stops fitting next to the gallery well before that. */

/* The tight value is for the two image-led cards, whose picture runs edge-to-edge. */
/* Anchor jumps inside the page glide instead of cutting, and stop doing so for anyone who
   asked the system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.pdp-layout {
  --pdp-card-padding: 20px;
  --pdp-card-padding-tight: 12px;

  position: relative;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 8px var(--padding-desktop) 48px;
  flex: 1;
}

/* A display declaration outranks the UA's `[hidden] { display: none }`, so without this
   every flex or grid element on the page ignores the attribute. Bit the message form
   before it was here. */
[hidden] {
  display: none !important;
}

/* One ring for every control on the page rather than relying on the UA default, which our
   own backgrounds and borders swallow. #E84E0F clears the 1.4.11 threshold at 3.8:1; the
   controls on the dark image overlay get white further down. */
.pdp-layout :is(a, button, [tabindex="0"], summary):focus-visible,
.breadcrumb-link:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Prefixed with .pdp-layout so the rule outranks the shared one above. */
.pdp-layout .pdp-gallery-nav:focus-visible,
.pdp-layout .pdp-gallery-zoom:focus-visible,
.pdp-layout .pdp-gallery-consent-play:focus-visible {
  outline-color: #fff;
}

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: 20px;
}

.pdp-main,
.pdp-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The aside is written first so the h1 opens the heading outline; these two put the
   columns back in reading order. Without them the buy box takes the wide left column. */
.pdp-main {
  order: 1;
}

.pdp-aside {
  order: 2;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.pdp-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--pdp-card-padding);
}

.pdp-card-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* Without a description this sentence takes the text's place and needs the same distance
   from the heading as .pdp-description-body. */
.pdp-description > .pdp-muted {
  margin-top: 12px;
}

.pdp-inline-link {
  color: var(--color-primary-text);
  font-weight: 600;
  text-decoration: underline;
}

.pdp-inline-link:hover {
  text-decoration: none;
}

/* The second selector is needed because the badge also carries .pdp-tooltip, whose rule
   further down the stylesheet sets a colour of its own. */
.pdp-verified,
.pdp-tooltip.pdp-verified {
  color: var(--color-primary);
  flex: 0 0 auto;
  /* Above the stretched link area of the seller row, or the tooltip is unreachable. */
  position: relative;
  z-index: 1;
}

.pdp-gallery {
  padding: var(--pdp-card-padding-tight);
}

.pdp-gallery-stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-input);
  aspect-ratio: 5 / 3;
}

.pdp-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.pdp-gallery-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-placeholder);
}

/* Under the glyph, which is 60px tall and centred: the offset counts from the centre, not
   from the placeholder's edge. */
.pdp-gallery-missing {
  display: none;
  position: absolute;
  top: calc(50% + 46px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pdp-gallery-stage:has(.pdp-gallery-image.is-image-fallback) .pdp-gallery-missing {
  display: block;
}

.pdp-gallery-frame {
  position: absolute;
  inset: 0;
}

.pdp-gallery-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.pdp-gallery-zoom,
.pdp-gallery-counter {
  position: absolute;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: rgb(0 0 0 / 70%);
  color: #fff;
}

.pdp-gallery-zoom {
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.pdp-gallery-zoom:disabled {
  cursor: default;
  opacity: 0.75;
}

.pdp-gallery-counter {
  bottom: 12px;
  right: 12px;
}

.pdp-gallery-consent {
  position: absolute;
  inset: 0;
}

.pdp-gallery-consent-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery-consent-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  /* Dark enough for the 12px notice to keep 4.5:1 over the brightest poster, white included. */
  background: rgb(0 0 0 / 60%);
}

.pdp-gallery-consent-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary-strong);
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 700;
  cursor: pointer;
}

.pdp-gallery-consent-play:hover {
  background: var(--color-primary-strong-hover);
}

.pdp-gallery-consent-text {
  max-width: 46ch;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.pdp-gallery-consent-text a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.pdp-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 70%);
  color: #fff;
  cursor: pointer;
}

.pdp-gallery-nav:hover {
  background: rgb(0 0 0 / 80%);
}

.pdp-gallery-nav-prev {
  left: 12px;
}

.pdp-gallery-nav-next {
  right: 12px;
}

.pdp-gallery-thumbs {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: var(--pdp-card-padding-tight) 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pdp-gallery-thumb {
  width: 96px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-input);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery-thumb-active {
  border-color: var(--color-primary);
}

.pdp-gallery-thumb-video {
  position: relative;
  color: #fff;
  background: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Over the black tile, under the play glyph — the order comes from the DOM, both being
   positioned. A video without a poster keeps the plain tile instead of showing a broken
   image. */
.pdp-gallery-thumb-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery-thumb-video svg {
  position: relative;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 70%));
}

.pdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.pdp-chip {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-input);
  color: var(--color-text-muted);
}

.pdp-chip-offer {
  background: var(--color-primary-light);
  color: var(--color-primary-text);
}

.pdp-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-dark);
}

.pdp-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
}

.pdp-price-value {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--color-text-dark);
}

/* A sentence instead of an amount: at 28px it wraps inside the 400px buy box. */
.pdp-price-request {
  font-size: var(--font-size-2xl);
}

.pdp-price-type {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-primary-text);
}

.pdp-price-tax {
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Room above the card when the buy box jumps here, so it does not touch the viewport edge. */
.pdp-seller {
  scroll-margin-top: 20px;
}

.pdp-seller-line {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
}

.pdp-seller-jump {
  color: inherit;
  text-decoration: none;
}

/* Stretches the name's link over the whole row, so a click anywhere on it lands on the
   seller card. Only the anchor stays focusable, which keeps one tab stop instead of making
   every part of the row a target. */
.pdp-seller-jump::after {
  content: '';
  position: absolute;
  inset: 0;
}

.pdp-seller-line:hover .pdp-seller-jump {
  text-decoration: underline;
}

.pdp-seller-icon {
  flex: 0 0 auto;
  display: flex;
  /* Sitzt auf der Namenszeile, nicht zwischen beiden Zeilen: gleiche Kante wie das
     Telefon-Icon darunter. */
  margin-top: 3px;
  color: var(--color-primary);
}

.pdp-seller-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-seller-avatar-lg {
  width: 44px;
  height: 44px;
}

.pdp-seller-identity {
  min-width: 0;
}

.pdp-seller-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-dark);
}

.pdp-seller-meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pdp-seller-phone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pdp-seller-phone-link,
.pdp-seller-phone-masked {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-dark);
}

.pdp-seller-phone-link {
  text-decoration: none;
}

.pdp-seller-phone-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
}

/* Only the dots are tracked out: the visible digits of the prefix should be set like a
   normal number. */
.pdp-seller-phone-dots {
  letter-spacing: 0.12em;
}

.pdp-seller-phone-reveal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary-text);
  font-weight: 700;
  text-decoration: none;
}

.pdp-seller-phone-reveal:hover {
  text-decoration: underline;
}

/* The click has to land on the link itself: GTM reads the classes of whatever was hit, and
   an icon click would carry none of them. */
.pdp-seller-phone-reveal svg {
  pointer-events: none;
}

.pdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.pdp-btn-primary {
  background: var(--color-primary-strong);
  color: #fff;
}

.pdp-btn-primary:hover {
  background: var(--color-primary-strong-hover);
}

.pdp-btn-ghost {
  background: var(--color-bg-white);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.pdp-btn-ghost:hover {
  border-color: var(--color-primary-text);
  color: var(--color-primary-text);
}

.pdp-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.pdp-summary .pdp-btn-primary {
  margin-top: 16px;
}

.pdp-summary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* On your own listing the message button is missing, so the action pair follows the seller
   line directly and has to bring that spacing itself. */
.pdp-seller-phone + .pdp-summary-actions,
.pdp-seller-line + .pdp-summary-actions {
  margin-top: 16px;
}

.pdp-btn-ghost.is-noted {
  color: var(--color-primary-text);
  border-color: var(--color-primary-text);
}

.pdp-btn-ghost.is-noted svg {
  fill: currentcolor;
}

.pdp-btn-ghost:disabled {
  cursor: default;
}

.pdp-report {
  text-align: center;
  font-size: var(--font-size-xs);
}

.pdp-report-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.pdp-report-link:hover {
  color: var(--color-primary-text);
}

/* Column gap is 0 on purpose: the tiles' own padding spaces them, which keeps the
   dividing rule centred between two tiles. */
.pdp-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 24px;
  border-left: 1px solid var(--color-border-subtle);
}

.pdp-highlight:nth-child(3n+1) {
  padding-left: 0;
  border-left: none;
}

.pdp-highlight-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  display: flex;
}

.pdp-highlight-text {
  min-width: 0;
}

.pdp-highlight-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pdp-highlight-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-dark);
}

.pdp-description-body {
  --pdp-description-lines: 6;

  margin-top: 12px;
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: var(--color-text);
}

/* Rendered Markdown has block children; their UA margins would push the text off
   the card's padding and double the gap before the toggle. */
.pdp-description-body > :first-child {
  margin-top: 0;
}

.pdp-description-body > :last-child {
  margin-bottom: 0;
}

.pdp-description-body ul,
.pdp-description-body ol {
  margin: 0.75em 0;
  padding-inline-start: 1.5em;
}

.pdp-description-body a {
  color: var(--color-primary-text);
  text-decoration: underline;
}

/* max-height, not -webkit-line-clamp: clamp appends its own ellipsis, which would sit
   inside the fade and read as a glitch. */
.pdp-description-body.pdp-collapsed {
  position: relative;
  max-height: calc(var(--pdp-description-lines) * 1.65em);
  overflow: hidden;
}

.pdp-description-body.pdp-collapsed::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /* Transparent for the first quarter, so the last line starts legible. */
  height: 2.4em;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 25%, var(--color-bg-white) 100%);
  pointer-events: none;
}

.pdp-more {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-primary-text);
  text-decoration: underline;
  cursor: pointer;
}

.pdp-details-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.pdp-details-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-md);
}

/* No rule under the bottom of either column: the card's padding already ends the list.
   The two last items are always the two column ends, whichever parity the list has — with
   an even count they share the last row, with an odd count the right column stops one row
   earlier. */
.pdp-details-row:last-child,
.pdp-details-row:nth-last-child(2) {
  border-bottom: 0;
}

.pdp-details-row dt {
  color: var(--color-text-muted);
}

.pdp-details-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-dark);
  text-align: right;
}

.pdp-seller-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-seller-facts {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pdp-seller-fact {
  background: var(--color-bg-subtle);
  padding: 12px 14px;
}

.pdp-seller-fact-label {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.pdp-seller-fact-value {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-dark);
}

.pdp-seller-fact-unit {
  font-weight: 400;
}

.pdp-seller-warranty {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pdp-seller-login {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px 24px;
}

/* Label and list belong together and must not land on two grid rows: the first row is as
   tall as the login button in column 1, which would push the list a button-height down. */
.pdp-seller-login-note {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: 6px;
}

.pdp-seller-login-eyebrow {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-text);
}

.pdp-seller-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.pdp-seller-perks li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-seller-perks svg {
  flex: 0 0 auto;
  color: var(--color-primary);
}

.pdp-seller-login .pdp-btn-primary {
  grid-column: 1;
  grid-row: 1;
}

.pdp-seller-login .pdp-muted {
  grid-column: 1;
  grid-row: 2;
}

.pdp-trust {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pdp-trust-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  display: flex;
  /* Level with the eyebrow, not centred on the whole block. */
  margin-top: 2px;
}

.pdp-trust-body {
  min-width: 0;
}

.pdp-trust .pdp-trust-eyebrow {
  margin-top: 0;
}

.pdp-trust-eyebrow,
.pdp-promo-eyebrow {
  margin-top: 8px;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-text);
}

.pdp-trust-title {
  margin-top: 2px;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-dark);
}

.pdp-trust-text,
.pdp-promo-text {
  margin-top: 6px;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pdp-promo-logo {
  height: 28px;
  width: auto;
}

.pdp-promo .pdp-btn {
  margin-top: 14px;
}

.pdp-sticky-bar {
  display: none;
}

/* Overrides the UA's own centring so the card can cap its height on short screens. */
.pdp-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px;
  inset: 0;
  background: transparent;
  border: 0;
  color: inherit;
}

.pdp-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-modal::backdrop {
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(2px);
}

.pdp-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.pdp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pdp-modal-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-dark);
}

.pdp-modal-title {
  margin: 0;
  padding-right: 40px;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-dark);
}

.pdp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdp-modal-label {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.pdp-modal-textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

/* Not left to the UA default: placeholder text is text and needs 4.5:1. */
.pdp-modal-textarea::placeholder,
.pdp-modal-input::placeholder {
  color: var(--color-text-placeholder);
}

.pdp-modal-textarea:focus-visible,
.pdp-modal-select:focus-visible,
.pdp-modal-input:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pdp-modal-select,
.pdp-modal-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--font-size-md);
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.pdp-modal-hint {
  margin-top: -4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* The form's flat flex column has no notion of field groups, so a uniform gap would space
   a label from its own control exactly as far as from the previous one. Only labels that
   follow a control get the larger distance, which is what separates the groups. */
.pdp-modal-form > :is(.pdp-modal-select, .pdp-modal-input, .pdp-modal-textarea, .pdp-modal-hint) + .pdp-modal-label {
  margin-top: 14px;
}

/* Google renders a fixed-width iframe in here and has no responsive mode; narrow dialogs
   get the compact widget (report_form_controller), the sideways scroll is only the last
   resort. The inline iframe inside Google's own box leaves an empty 4px descender below it,
   and with overflow-x set that made the box scroll vertically too: a scroll area no
   keyboard can reach (2.1.1). */
.pdp-modal-captcha {
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
}

.pdp-modal-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text);
}

/* The box would otherwise stretch to the line height of a wrapped label. */
.pdp-modal-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.pdp-share-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.pdp-share-item:hover {
  border-color: var(--color-text-muted);
}

.pdp-share-whatsapp svg { color: #25d366; }
.pdp-share-facebook svg { color: #1877f2; }
.pdp-share-x svg { color: var(--color-text-dark); }
.pdp-share-linkedin svg { color: #0a66c2; }
.pdp-share-email svg,
.pdp-share-copy svg { color: var(--color-text-muted); }

.pdp-share-copy.is-copied {
  border-color: var(--color-primary-text);
  color: var(--color-primary-text);
}

.pdp-share-copy.is-copied svg {
  color: var(--color-primary);
}

.pdp-modal-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* display: none while hidden, not visibility: a hidden box keeps its max-content width
   in layout and can push the page scroll past the right edge on narrow viewports. */
.pdp-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  cursor: help;
}

.pdp-tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  background: #1f2937;
  color: #fff;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  z-index: 20;
}

.pdp-tooltip::before {
  content: "";
  display: none;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  z-index: 20;
}

.pdp-tooltip:hover::after,
.pdp-tooltip:hover::before,
.pdp-tooltip:focus-visible::after,
.pdp-tooltip:focus-visible::before {
  display: block;
}

/* Esc hides it until pointer or focus leave (tooltip_controller, 1.4.13). */
.pdp-tooltip.is-dismissed:is(:hover, :focus-visible)::after,
.pdp-tooltip.is-dismissed:is(:hover, :focus-visible)::before {
  display: none;
}

.pdp-modal-error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-primary-text);
}

.pdp-modal-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.pdp-modal-note {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pdp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.pdp-modal-success-text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.55;
  color: var(--color-text);
}

/* The two billboards sit outside .pdp-grid, so they get none of its 20px gap and would
   otherwise touch the gallery card above and the columns below. */
.pdp-ad-bb {
  margin-bottom: 20px;
}

.pdp-ad-bb-2 {
  margin-top: 20px;
}

/* Half of what symplr's list says. The right column is sticky and capped to the viewport
   with its own scrollbar, so a 600px banner in it pushes the seller box and the trust card
   out of reach on a laptop screen. The number here only sizes the placeholder; the real cap
   is symplr's to configure. */
.pdp-ad-sitebar-1 {
  --pdp-ad-height: 300px;
}

/* Rides above the header and only appears with the mobile one, so it belongs to the
   navigation tier (1200), not to the content tier this page reflows at (992). The
   z-index matches the header's own stacking so the off-canvas menu still covers it. */
.pdp-ad-header-mobile {
  --pdp-ad-height: 50px;

  display: none;
  position: sticky;
  top: 0;
  /* Above the page it scrolls over, below the off-canvas menu and its overlay (1000 and 999
     in header.css). The 1002 taken from the Shopware pages put the strip over both, so the
     menu opened underneath the ad. */
  z-index: 900;
  /* The gap belongs inside the sticky box. As a margin it would be transparent and the page
     scrolling past would show through it, which is what made the strip look unfinished. */
  padding-bottom: 8px;
  background: var(--color-bg-white);
}

@media (max-width: 1200px) {
  .pdp-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .pdp-ad-header-mobile {
    display: block;
  }

  /* 2.4.11: the strip is pinned to the top, so the browser must not scroll a tabbed-to
     element (Shift+Tab, anchor jumps) up under it. The strip's height plus some air. */
  html:has(.pdp-ad-header-mobile) {
    scroll-padding-top: 72px;
  }
}

@media (max-width: 992px) {
  /* display: contents on the wrappers is what allows the design's mobile order (gallery,
     buy box, rest): no wrapper-level `order` can interleave two columns' children. */
  .pdp-grid {
    display: flex;
    flex-direction: column;
    /* Undoes the desktop grid's align-items: start — on a flex column that is the cross
       axis, sizing each card to its content width instead of the viewport. */
    align-items: stretch;
  }

  .pdp-main,
  .pdp-aside {
    display: contents;
  }

  /* Tens, so anything added later fits between two cards without renumbering. Every new
     child of .pdp-main / .pdp-aside needs a value here: without one it falls to order 0
     and jumps ahead of the gallery. */
  .pdp-gallery { order: 10; }
  .pdp-summary { order: 20; }
  .pdp-report { order: 30; }
  .pdp-highlights { order: 40; }
  /* Below the key facts rather than above them: a 600px ad between the contact button and
     the year, power and mileage would push the three numbers people came for off screen. */
  .pdp-ad-incontent-1 { order: 45; }
  .pdp-trust { order: 50; }
  .pdp-description { order: 60; }
  .pdp-ad-incontent-2 { order: 65; }
  .pdp-details { order: 70; }
  .pdp-seller { order: 80; }
  .pdp-promo { order: 90; }

  /* No mobile counterpart in symplr's layout: the phone gets the two incontent slots and
     the billboards instead. */
  .pdp-ad-sitebar-1 {
    display: none;
  }

  .pdp-ad-incontent-1,
  .pdp-ad-incontent-2 {
    --pdp-ad-height: 600px;
  }
}

@media (max-width: 768px) {
  /* Cards run edge to edge: the layout drops its side padding and every element that is
     not a card puts it back on itself. */
  .pdp-layout {
    padding: 0 0 24px;
  }

  .pdp-card {
    border-radius: var(--radius-md);
  }

  /* Descendant, not child: the column wrappers are display: contents here, which changes
     the box tree but not the DOM the selector matches against. */
  .pdp-grid .pdp-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .pdp-report {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }

  /* Same reason as .pdp-report: not cards, so the edge-to-edge rule above skips them and
     they would otherwise sit flush against the screen. Named one by one rather than excluded,
     because only these three are in the content flow: the header strip is a full-width banner
     and the two rails sit beside the page, where a gutter would only give them a width they
     are not supposed to have. */
  .pdp-grid .pdp-ad,
  .pdp-ad-bb,
  .pdp-ad-bb-2 {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }

  .pdp-title {
    font-size: var(--font-size-xl);
  }

  .pdp-price-value {
    font-size: var(--font-size-2xl);
  }

  .pdp-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* At two columns the every-third-tile rule would land in the wrong places. Both
     selectors are listed to outrank the nth-child rule above. */
  .pdp-highlight,
  .pdp-highlight:nth-child(3n+1) {
    padding: 0;
    border-left: none;
  }

  .pdp-details-list {
    grid-template-columns: 1fr;
  }

  /* One column again, so only the very last row is a column end. */
  .pdp-details-row:nth-last-child(2) {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .pdp-seller-facts {
    grid-template-columns: 1fr;
  }

  .pdp-seller-login {
    grid-template-columns: 1fr;
  }

  .pdp-seller-login-note,
  .pdp-seller-login .pdp-btn-primary,
  .pdp-seller-login .pdp-muted {
    grid-column: 1;
    grid-row: auto;
  }

  .pdp-seller-perks {
    flex-direction: column;
  }

  /* 2.4.11: the bar is pinned to the bottom, so the browser must not scroll a tabbed-to
     element behind it. The bar's height plus some air. */
  html {
    scroll-padding-bottom: 76px;
  }

  .pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--padding-mobile);
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    transform: translateY(100%);
    transition: transform 0.2s ease;
  }

  /* Set by the sticky-bar controller; without JS the bar stays out of the way and the buy
     box remains the only place to act, which it is anyway. */
  .pdp-sticky-bar.is-visible {
    transform: translateY(0);
  }

  .pdp-sticky-price {
    min-width: 0;
  }

  .pdp-sticky-price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-dark);
    white-space: nowrap;
  }

  .pdp-sticky-price-value .pdp-price-type {
    font-size: var(--font-size-sm);
  }

  .pdp-sticky-price-meta {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdp-sticky-bar .pdp-btn {
    width: auto;
    flex: 1;
    white-space: nowrap;
  }

  /* Keep the fixed bar from covering the end of the page. */
  body {
    padding-bottom: 68px;
  }
}

@media (max-width: 576px) {
  .pdp-gallery-thumb {
    width: 72px;
    height: 56px;
  }

  .pdp-modal-full {
    padding: 0;
  }

  .pdp-modal-full[open] {
    align-items: stretch;
  }

  .pdp-modal-full .pdp-modal-dialog {
    max-width: none;
    height: 100%;
    max-height: 100%;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 0;
    box-shadow: none;
  }

  /* Takes the leftover height so the footer's margin-top: auto reaches the bottom edge. */
  .pdp-modal-full .pdp-modal-form {
    flex: 1;
  }

  .pdp-modal-full .pdp-modal-footer {
    margin-top: auto;
    padding-top: 16px;
  }

  /* Only the form needs the whole screen. The confirmation is three lines, so it shrinks
     back to a centred card once the form is gone. */
  .pdp-modal-full[open]:has(.pdp-modal-success:not([hidden])) {
    align-items: center;
    padding: 16px;
  }

  .pdp-modal-full .pdp-modal-dialog:has(> .pdp-modal-success:not([hidden])) {
    height: auto;
    border-radius: var(--radius-lg);
    padding-bottom: 20px;
  }

  /* Fullscreen leaves no backdrop to tap, so closing rests entirely on this button. */
  .pdp-modal-full .pdp-modal-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text-dark);
  }

  .pdp-modal-full .pdp-modal-title {
    padding-right: 52px;
  }
}

/* Thumbnail strip inside the lightbox — PhotoSwipe has no such element, so it is injected
   via its UI API and styled here. Sits above the bottom edge on desktop; on phones the
   swipe gesture is the primary control, so it only wastes height and is hidden. */
.pswp-strip {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: 8px;
  max-width: min(92vw, 900px);
  /* Padding without a background: it only keeps the active border off the scroll edge. */
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pswp-strip::-webkit-scrollbar {
  display: none;
}

.pswp-strip-item {
  flex: 0 0 auto;
  width: 84px;
  height: 63px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-input);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The frame is an inset shadow, not a border: a transparent border would still show the
   background image repeating underneath it (background-origin is the padding box), which
   reads as a mismatched edge around the thumbnail. */
.pswp-strip-item:hover {
  box-shadow: inset 0 0 0 2px var(--color-border-input);
}

.pswp-strip-item-active,
.pswp-strip-item-active:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

@media (max-width: 768px) {
  .pswp-strip {
    bottom: 12px;
    gap: 6px;
    max-width: 96vw;
  }

  .pswp-strip-item {
    width: 60px;
    height: 45px;
  }
}

/* Landscape phones: the strip would eat a quarter of the available height, so the swipe
   gesture is left as the only way to page. Height, not width, is what runs out here. */
@media (max-height: 420px) {
  .pswp-strip {
    display: none;
  }
}