/*
 * Vibben — fidelity-first desktop comparison (draft only).
 * Uses the user-approved *exact* desktop composition (1672 x 445).
 * Original semantic headings and links remain in the DOM; invisible
 * live anchor hit areas align with visual CTA/card positions.
 * Smaller screens still use the full HTML/CSS product-card layout.
 * This is a deliberate fidelity/editability trade-off for review.
 */
@media (min-width: 1400px) {
  body.home .vref-hero {
    position: relative !important;
    width: 100% !important;
    height: calc(100vw * 445 / 1672) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #20101c !important;
    background-image: url('https://vibben.se/wp-content/uploads/2026/10/Vibben-Mix-Match-–-exakt-godkand-desktopkomposition.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
  body.home .vref-hero__photo,
  body.home .vref-hero__veil {
    display:none !important;
  }
  body.home .vref-hero__inner {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
  }
  body.home .vref-copy,
  body.home .vref-offers {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* The underlying real text is preserved for the document structure
     and assistive technology. The desktop *image* supplies its pixels. */
  body.home .vref-copy > :not(.vref-maincta) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body.home .vref-maincta {
    position: absolute !important;
    z-index: 4 !important;
    top: 62.5% !important;
    left: 11.9% !important;
    width: 17.3% !important;
    height: 12.5% !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transform: none !important;
  }
  body.home .vref-maincta > * {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body.home .vref-maincta:hover {
    background:rgba(255,219,229,.10) !important;
    box-shadow:inset 0 0 0 2px rgba(255,220,232,.50) !important;
  }
  body.home .vref-maincta:focus-visible {
    outline: 3px solid #fff1f7 !important;
    outline-offset:3px !important;
  }
  body.home .vref-offer {
    position: absolute !important;
    top: 12.05% !important;
    z-index: 4 !important;
    display: block !important;
    width: 16.7% !important;
    height: 80.2% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.home .vref-offer--1 {left:43.1% !important;}
  body.home .vref-offer--2 {left:60.8% !important;}
  body.home .vref-offer--3 {left:78.55% !important;}
  body.home .vref-offer::before,
  body.home .vref-offer::after {
    display: none !important;
    content: none !important;
  }
  body.home .vref-offer > * {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body.home .vref-offer:hover {
    background:rgba(255,218,232,.07) !important;
    box-shadow: inset 0 0 0 2px rgba(255,213,229,.70) !important;
  }
  body.home .vref-offer:focus-visible {
    outline:3px solid #ffe5ee !important;
    outline-offset:3px !important;
  }
}