/* Dobre Audio Variants. Unlayered on purpose: normal declarations of unlayered CSS beat any layered theme rule. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

  /* Look ported 1:1 from the approved selector mock (chips 2, thumbnail chips for colour, plain chips for length) */
  .dav-wrap { container-type: inline-size; font-size: 13.5px; color: #111; margin: 12px 0 14px; }
  .dav-axis { margin-bottom: 10px; }
  .dav-label { font-size: 13px; color: #6b7280; margin-bottom: 6px; line-height: 1.3; }
  .dav-opts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .dav-opt { margin: 0; padding: 0; }

  .dav-opt a {
    position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box;
    padding: 6px 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #fff; color: #111;
    font-weight: 600; line-height: 1.25; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .dav-opt a:hover { border-color: #9ca3af; }
  .dav-opt a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
  .dav-opt.is-selected a { border-color: #0b69f6; background: #eef4ff; color: #0b4fc4; cursor: default; }
  /* Combination that does not exist for the current choice: clearly grey, diagonal strike-through, still clickable (goes to the nearest variant) */
  .dav-opt.is-alt a { border: 1.5px dashed #b4bbc6; color: #858d99; background: #eceff3; font-weight: 500; overflow: hidden; }
  .dav-opt.is-alt a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - 0.75px), #aab2be calc(50% - 0.75px), #aab2be calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
  .dav-opt.is-alt a:hover { border-color: #8f98a6; color: #5d6573; background: #e4e8ee; }
  .dav-opt.is-alt .dav-pr { color: #98a0ac; }
  .dav-opt.is-alt .dav-th { filter: grayscale(1); opacity: .5; }
  .dav-pr { font-weight: 500; color: #6b7280; font-size: 12.5px; }
  .dav-opt.is-selected .dav-pr { color: #0b4fc4; }
  .dav-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* thumbnail chip */
  .dav-style-thumb .dav-opt a { padding: 4px 12px 4px 5px; text-align: left; }
  .dav-th { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #f5f5f7; flex: none; }

  /* colour swatch: bare circle */
  .dav-style-swatch .dav-opt a { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 3px #fff; background: transparent; justify-content: center; }
  .dav-style-swatch .dav-opt a .dav-sw { position: absolute; inset: 3px; border-radius: 50%; }
  .dav-style-swatch .dav-opt.is-selected a { outline: 2px solid #0b69f6; outline-offset: 2px; background: transparent; }
  .dav-style-swatch .dav-opt.is-alt a { border: 1.5px dashed #b4bbc6; box-shadow: inset 0 0 0 3px #eceff3; background: #eceff3; overflow: hidden; }
  .dav-style-swatch .dav-opt.is-alt .dav-sw { filter: grayscale(1); opacity: .45; }

  /* select */
  .dav-select { width: 100%; padding: 8px 10px; border: 1.5px solid #e5e7eb; border-radius: 10px; font: 600 13.5px inherit; background: #fff; color: #111; }

  @container (max-width: 360px) { .dav-opts { gap: 6px; } }