/* Owner: company page team.
 *
 * Om DINO, Forhandlere, Prøv en DINO, Kontakt (not its hero), Reservedele landing, the
 * legal pages and Splittegning, in all languages. This file loads site-wide, so every rule
 * is scoped to IDs/classes that only exist on those pages: Bricks element IDs
 * (#dc-om-*, #dc-kontakt-*, …) are copied unchanged into the WPML translations, the legal
 * pages are recognised by their table of contents, and Splittegning by its page IDs.
 * Hover lifts/zooms only run on hover devices without prefers-reduced-motion.
 * Type, links, card frames, focus rings and tap targets come from the tokens in
 * site-design.css / ux.css; H1s and card titles have no per-page overrides here.
 */

:root {
  --dino-co-sticky-top: 61px; /* height of the sticky header once scrolled */
  --dino-co-radius: var(--dino-card-radius, 8px);
  --dino-co-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
  --dino-co-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --dino-co-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --dino-co-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --dino-co-icon-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Heroes: WebP backgrounds (same gradients as the Bricks page CSS).   */
/* The Kontakt hero is owned elsewhere and deliberately not touched.   */
/* ------------------------------------------------------------------ */
main #dino-about-hero {
  background-image:
    linear-gradient(90deg, rgb(8 9 9 / 88%), rgb(8 9 9 / 35%)),
    image-set(url("../company/about-hero.webp") type("image/webp"), url("../company/about-hero.jpg") type("image/jpeg"));
}
main #dino-dealers-hero {
  background-image:
    linear-gradient(90deg, rgb(8 9 9 / 88%), rgb(8 9 9 / 35%)),
    image-set(url("../company/dealers.webp") type("image/webp"), url("../company/dealers.jpg") type("image/jpeg"));
}
@media (max-width: 767px) {
  main #dino-about-hero {
    background-image:
      linear-gradient(90deg, rgb(8 9 9 / 88%), rgb(8 9 9 / 35%)),
      image-set(url("../company/about-hero-960.webp") type("image/webp"), url("../company/about-hero.jpg") type("image/jpeg"));
  }
  main #dino-dealers-hero {
    background-image:
      linear-gradient(90deg, rgb(8 9 9 / 88%), rgb(8 9 9 / 35%)),
      image-set(url("../company/dealers-960.webp") type("image/webp"), url("../company/dealers.jpg") type("image/jpeg"));
  }
}

/* Hero H1s use the global h1 token (42px at 390): long compound words (de/sv/no) break
   instead of widening the page. The Kontakt hero is owned elsewhere. */
section:not(#dino-contact-hero) h1.dino-company-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ------------------------------------------------------------------ */
/* Shared: contact icons and card treatment on the company pages.      */
/* ------------------------------------------------------------------ */
:is(#dc-kontakt-8, #dc-kontakt-27, #dc-forhandlere-8, #dc-reservedele-10, .dino-country-section) .dino-company-card {
  position: relative;
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  background: var(--dino-white, #fff);
}
/* Red accent bar that grows in on hover/focus (prod's icon boxes had a hover state too). */
:is(#dc-kontakt-8, #dc-forhandlere-8, .dino-country-section) .dino-company-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  border-radius: var(--dino-co-radius) var(--dino-co-radius) 0 0;
  background: var(--dino-red, #c00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dino-card-speed) ease;
}
:is(#dc-kontakt-8, #dc-forhandlere-8, .dino-country-section) .dino-company-card:is(:hover, :focus-within)::after {
  transform: scaleX(1);
}

/* Phone / e-mail / website / address glyphs before the links. */
:is(#dc-kontakt-27, #dc-forhandlere-8, .dino-country-section) :is(a[href^="tel:"], a[href^="mailto:"], a[href^="http"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dino-tap);
}
/* Contact-card links are touch targets too. */
#dc-kontakt-8 a { display: inline-flex; align-items: center; min-height: var(--dino-tap); }
:is(#dc-kontakt-8, #dc-kontakt-27, #dc-forhandlere-8, .dino-country-section) .dino-company-card { gap: 4px; }
:is(#dc-kontakt-27, #dc-forhandlere-8, .dino-country-section) :is(a[href^="tel:"], a[href^="mailto:"], a[href^="http"])::before,
.dino-country-section address::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--dino-co-icon-phone) center / contain no-repeat;
  mask: var(--dino-co-icon-phone) center / contain no-repeat;
}
:is(#dc-kontakt-27, #dc-forhandlere-8, .dino-country-section) a[href^="mailto:"]::before {
  -webkit-mask-image: var(--dino-co-icon-mail);
  mask-image: var(--dino-co-icon-mail);
}
:is(#dc-kontakt-27, #dc-forhandlere-8, .dino-country-section) a[href^="http"]::before {
  -webkit-mask-image: var(--dino-co-icon-web);
  mask-image: var(--dino-co-icon-web);
}
.dino-country-section address {
  position: relative;
  padding-left: 28px;
  color: var(--dino-muted, #555b60);
  font-style: normal;
}
.dino-country-section address::before {
  position: absolute;
  top: 3px;
  left: 0;
  -webkit-mask-image: var(--dino-co-icon-pin);
  mask-image: var(--dino-co-icon-pin);
}

/* ------------------------------------------------------------------ */
/* Om DINO                                                              */
/* ------------------------------------------------------------------ */
#brx-content :is(#dc-om-19, #dc-om-33) {
  aspect-ratio: 1;
  height: auto;
  border-radius: var(--dino-co-radius);
  box-shadow: 0 18px 40px rgb(8 9 9 / 14%);
}

/* 1958 story + key facts side by side. */
#dc-om-7 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.dino-about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dino-about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  box-shadow: inset 3px 0 0 var(--dino-red, #c00);
  background: var(--dino-surface, #f3f4f4);
}
.dino-about-fact-num {
  color: var(--dino-red, #c00);
  font-size: var(--dino-stat);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dino-about-fact-label { font-size: var(--dino-body); line-height: 1.5; }

/* Driving experience: copy + guarantee list in a white panel on a tinted band. */
#dc-om-20 { background: var(--dino-surface, #f3f4f4); }
#dc-om-21 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.dino-about-points {
  padding: 32px !important;
  border-radius: var(--dino-co-radius);
  background: var(--dino-white, #fff);
  box-shadow: 0 10px 30px rgb(8 9 9 / 8%);
  gap: 14px !important;
}
#dc-om-22, #dc-om-29 { display: grid; gap: 20px; }

/* Closing CTA with the kart cutout. */
#dc-om-35 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: 48px;
  row-gap: 20px;
  align-items: center;
}
#dc-om-35 > :not(.dino-about-cta-kart) { grid-column: 1; justify-self: start; }
#dc-om-35 { align-content: center; }
#dc-om-35 { grid-template-rows: 1fr auto auto auto 1fr; }
#dc-om-35 > :nth-child(1) { grid-row: 2; }
#dc-om-35 > :nth-child(2) { grid-row: 3; }
#dc-om-35 > :nth-child(3) { grid-row: 4; }
#dc-om-35 > .dino-about-cta-kart {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #dc-om-34:hover .dino-about-cta-kart { transform: translateX(12px) rotate(-1deg); }
}

@media (max-width: 991px) {
  #dc-om-7, #dc-om-21 { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  #dc-om-35 { grid-template-columns: 1fr; grid-template-rows: none; }
  #dc-om-35 > * { grid-row: auto !important; }
  #dc-om-35 > .dino-about-cta-kart { grid-column: 1; grid-row: auto; max-width: 420px; }
  .dino-about-fact { padding: 18px 16px; }
  .dino-about-points { padding: 24px 20px !important; }
}

/* ------------------------------------------------------------------ */
/* Kontakt (cards, hours, team; the hero is not ours)                  */
/* ------------------------------------------------------------------ */
#dc-kontakt-8 .dino-company-card { padding-top: 84px !important; }
#dc-kontakt-8 .dino-company-card::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dino-red, #c00); /* red disc; the white glyph is the h2::before below */
  box-shadow: 0 6px 14px rgb(204 0 0 / 25%);
}
#dc-kontakt-8 .dino-company-card > h2::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 38px;
  width: 20px;
  height: 20px;
  background: var(--dino-white, #fff);
  -webkit-mask: var(--dino-co-icon-phone) center / contain no-repeat;
  mask: var(--dino-co-icon-phone) center / contain no-repeat;
}
#dc-kontakt-13 > h2::before { -webkit-mask-image: var(--dino-co-icon-mail) !important; mask-image: var(--dino-co-icon-mail) !important; }
#dc-kontakt-17 > h2::before { -webkit-mask-image: var(--dino-co-icon-pin) !important; mask-image: var(--dino-co-icon-pin) !important; }
#dc-kontakt-8 .dino-contact-link {
  font-size: var(--dino-card-title);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 5px;
}
#dc-kontakt-8 .dino-contact-link:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 2px; }
#dc-kontakt-19 { font-style: normal; }

/* Team: rounded photos; a neutral monogram tile where no approved photo exists yet. */
#dc-kontakt-27 .dino-company-card { overflow: hidden; }
#dc-kontakt-27 img { border-radius: calc(var(--dino-co-radius) - 2px); }
#dc-kontakt-38 { justify-content: flex-start; }
#dc-kontakt-38::before {
  content: "JP" / "";
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  aspect-ratio: 6 / 7;
  margin-bottom: 8px;
  border-radius: calc(var(--dino-co-radius) - 2px);
  background:
    repeating-linear-gradient(135deg, rgb(8 9 9 / 3%) 0 12px, transparent 12px 24px),
    var(--dino-surface, #f3f4f4);
  color: var(--dino-muted-2);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 2px;
}

/* ------------------------------------------------------------------ */
/* Forhandlere                                                          */
/* ------------------------------------------------------------------ */
#dc-forhandlere-8 .dino-company-card { padding-top: 76px !important; }
#dc-forhandlere-8 .dino-company-card::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 32px;
  height: 32px;
  background: var(--dino-red, #c00);
  -webkit-mask: var(--dino-co-icon-globe) center / contain no-repeat;
  mask: var(--dino-co-icon-globe) center / contain no-repeat;
}
#dc-forhandlere-8 .dino-company-card > p { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Prøv en DINO: sticky country bar, compact country sections          */
/* ------------------------------------------------------------------ */
#brx-content > #dc-prov-en-dino-10 {
  position: sticky;
  top: var(--dino-co-sticky-top);
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px max(40px, calc((100% - 1200px) / 2));
  overflow-x: auto;
  /* A Tab-focused link is scrolled clear of the edge (ux-functions.php, dino-country-bar). */
  scroll-padding-inline: max(40px, calc((100% - 1200px) / 2));
  border-top: 1px solid var(--dino-line, #dadddd);
  border-bottom: 1px solid var(--dino-line, #dadddd);
  background: rgb(255 255 255 / 96%);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#dc-prov-en-dino-10 > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--dino-btn-min-h);
  padding: 0 16px;
  border: var(--dino-card-border);
  border-radius: var(--dino-radius);
  background: var(--dino-white, #fff);
  color: var(--dino-ink, #080909) !important;
  font-size: var(--dino-body);
  text-decoration: none !important;
  white-space: nowrap;
  transition: var(--dino-transition);
}
#dc-prov-en-dino-10 > a:is(:hover, :focus-visible) {
  border-color: var(--dino-red, #c00);
  background: var(--dino-red, #c00);
  color: var(--dino-white, #fff) !important;
}
#dc-prov-en-dino-6 { padding-bottom: 40px !important; }
#brx-content .dino-country-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  scroll-margin-top: calc(var(--dino-co-sticky-top) + 72px) !important;
}
.dino-country-section .dino-company-card { gap: 10px; }

@media (max-width: 767px) {
  #brx-content > #dc-prov-en-dino-10 { padding: 10px 20px; scroll-padding-inline: 20px; }
  #brx-content .dino-country-section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ------------------------------------------------------------------ */
/* Reservedele landing                                                  */
/* ------------------------------------------------------------------ */
.dino-parts-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  width: 100%;
}
.dino-parts-teaser-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  background: var(--dino-white, #fff);
  transition: transform var(--dino-card-speed) ease, box-shadow var(--dino-card-speed) ease;
}
.dino-parts-teaser .dino-eyebrow { margin: 0; }
#dc-reservedele-10 .dino-company-card { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dino-parts-teaser:hover .dino-parts-teaser-img {
    transform: var(--dino-card-lift);
    box-shadow: var(--dino-card-shadow-hover);
  }
}
@media (max-width: 767px) {
  .dino-parts-teaser-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------------------------------ */
/* Legal pages: sticky table of contents + anchored headings           */
/* ------------------------------------------------------------------ */
.dino-legal-toc {
  padding: 20px 24px;
  border-radius: var(--dino-co-radius);
  background: var(--dino-surface, #f3f4f4);
  font-size: var(--dino-body);
  line-height: 1.45;
}
/* Same look as .dino-label (the class is not in the translated rich-text HTML). */
.dino-prose .dino-legal-toc-title {
  margin: 0 0 10px;
  color: var(--dino-muted, #555b60);
  font-size: var(--dino-label);
  font-weight: 600;
  letter-spacing: var(--dino-label-ls);
  line-height: 1.45;
  text-transform: uppercase;
}
.dino-prose .dino-legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dino-toc;
}
.dino-prose .dino-legal-toc li { margin: 0; counter-increment: dino-toc; }
.dino-prose .dino-legal-toc a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: var(--dino-tap);
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--dino-line, #dadddd);
  color: var(--dino-ink, #080909);
  text-decoration: none;
  hyphens: auto;
  overflow-wrap: anywhere;
  transition: var(--dino-transition);
}
.dino-prose .dino-legal-toc a::before {
  content: counter(dino-toc) ".";
  min-width: 1.4em;
  color: var(--dino-muted, #555b60);
  font-variant-numeric: tabular-nums;
}
.dino-prose .dino-legal-toc a:is(:hover, :focus-visible) {
  border-left-color: var(--dino-red, #c00);
  color: var(--dino-red, #c00);
}
.dino-prose h2[id] { scroll-margin-top: calc(var(--dino-co-sticky-top) + 24px); }
.dino-container:has(> .dino-prose > .dino-legal-toc) > .dino-prose:not(:has(> .dino-legal-toc)) {
  padding-top: 8px;
}
.dino-container:has(> .dino-prose > .dino-legal-toc) > .dino-prose:has(> h2[id]) {
  border-top: 1px solid var(--dino-line, #dadddd);
}
.dino-container:has(> .dino-prose > .dino-legal-toc) .dino-prose > h2[id] { margin-top: 0.9em; }
.dino-container:has(> .dino-prose > .dino-legal-toc) .dino-prose { text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .dino-prose h2[id]:target { animation: dino-co-target 1.6s ease-out; }
}
@keyframes dino-co-target {
  0% { background: #ffe8a3; box-shadow: 0 0 0 8px #ffe8a3; }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
@media (min-width: 1024px) {
  #brx-content .dino-container:has(> .dino-prose > .dino-legal-toc) {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 760px);
    column-gap: 64px;
    row-gap: 0; /* beats Bricks' #brxe-… gap:24px */
    align-items: start;
  }
  .dino-container:has(> .dino-prose > .dino-legal-toc) > * { grid-column: 2; }
  /* The TOC spans 40 implicit rows; a row-gap would add 24px for every empty one (~600px
     before the footer), so the column-2 blocks are spaced with margins instead. */
  .dino-container:has(> .dino-prose > .dino-legal-toc) > :not(:has(> .dino-legal-toc)) ~ :not(:has(> .dino-legal-toc)) {
    margin-top: 24px;
  }
  .dino-container:has(> .dino-prose > .dino-legal-toc) > .dino-prose:has(> .dino-legal-toc) {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--dino-co-sticky-top) + 24px);
    max-height: calc(100vh - var(--dino-co-sticky-top) - 48px);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Splittegning: drawing beside the parts list, sticky list header      */
/* ------------------------------------------------------------------ */
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:not(.dino-parts-head) {
  position: relative;
  transition: background-color var(--dino-speed) ease, box-shadow var(--dino-speed) ease;
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:not(.dino-parts-head):hover,
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:not(.dino-parts-head):focus-within {
  background: #fff1f1;
  box-shadow: inset 4px 0 0 var(--dino-red, #c00);
}
/* The whole row opens the product, not just the label. */
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li > a {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: var(--dino-tap);
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li > a:focus-visible { outline: none; }
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:has(> a:focus-visible) {
  outline: 3px solid var(--dino-focus-ring, var(--dino-focus));
  outline-offset: -3px;
  box-shadow: inset 0 0 0 7px var(--dino-focus-halo, var(--dino-white, #fff));
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:has(> a) .dino-parts-sku::after {
  content: " →";
  color: var(--dino-red, #c00);
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dino-ink, #080909);
  color: var(--dino-white, #fff);
  font-size: var(--dino-small);
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li:has(> a):hover .dino-parts-pos { background: var(--dino-red, #c00); }
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li.dino-parts-head {
  position: sticky;
  top: var(--dino-co-sticky-top);
  z-index: 2;
}
:is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) a.bricks-lightbox img {
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  background: var(--dino-white, #fff);
}

@media (min-width: 1200px) {
  /* Drawing + list share the 1200px content column (outer tracks are the 40px+ gutters),
     aligned with the header and the hero above. */
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content {
    display: grid;
    grid-template-columns: minmax(40px, 1fr) minmax(0, 615px) minmax(0, 585px) minmax(40px, 1fr);
    align-items: start;
  }
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:first-child { grid-column: 1 / -1; }
  /* Drawing stays in view while the list scrolls. */
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:nth-child(2) {
    grid-column: 2;
    position: sticky;
    top: var(--dino-co-sticky-top);
    padding: 32px 24px 32px 0 !important;
  }
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:nth-child(2) a.bricks-lightbox,
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:nth-child(2) .brxe-image {
    max-width: none !important;
    margin: 0 !important;
  }
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:nth-child(2) img {
    width: 100%;
    max-height: calc(100vh - var(--dino-co-sticky-top) - 110px);
    object-fit: contain;
  }
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) #brx-content > section:nth-child(3) {
    grid-column: 3;
    padding: 32px 0 88px 24px !important;
    background: var(--dino-white, #fff) !important;
  }
}
@media (max-width: 767px) {
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts > li {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px;
  }
  :is(.page-id-7531, .page-id-7543, .page-id-7547, .page-id-7551, .page-id-7555) .dino-parts-pos { width: 32px; height: 32px; font-size: var(--dino-small); }
}

/* Kontakt: phone-hour cards (generated by the brochure content build) match the contact cards. */
:is(.page-id-61, .page-id-454, .page-id-739, .page-id-761, .page-id-784) #brx-content article.dino-card:not(.dino-company-card) {
  box-shadow: inset 3px 0 0 var(--dino-red, #c00);
  background: var(--dino-white, #fff) !important;
  font-variant-numeric: tabular-nums;
}

/* Forhandlere: fallback note under the regional cards. */
.dino-dealers-note {
  margin-top: 8px;
  padding: 20px 24px;
  border-radius: var(--dino-co-radius);
  background: var(--dino-surface, #f3f4f4);
}
.dino-dealers-note p { margin: 0; }
.dino-dealers-note a { white-space: nowrap; }