/* === SOURCE: css/208-v5566-base-track-muted.css === */

/* v5.5.66 · Bring the calm Match-mode rail treatment into Base mode.
   Purchased colour remains crisp; only the passive rail is muted. */

@media(min-width:761px){
  body:not(.attribute-match-mode) #attributes .mini-slider .visual-track{
    background:
      color-mix(in srgb,var(--pc-beyond) 38%,transparent)!important;
    transition:background-color .16s ease!important;
  }

  body:not(.attribute-match-mode) #attributes .mini-slider .track-seg.affordable{
    background:
      color-mix(in srgb,var(--pc-affordable) 38%,transparent)!important;
  }

  body:not(.attribute-match-mode) #attributes .mini-slider .track-seg.unavailable{
    background:
      color-mix(in srgb,var(--pc-unavailable) 38%,transparent)!important;
  }

  /* Purchased segment keeps the existing value-state colour at full strength. */
  body:not(.attribute-match-mode) #attributes .mini-slider .track-seg.purchased{
    opacity:1!important;
  }

  /* A little more information appears only while the user is examining the rail. */
  body:not(.attribute-match-mode) #attributes .range-shell:hover .visual-track{
    background:
      color-mix(in srgb,var(--pc-beyond) 58%,transparent)!important;
  }

  body:not(.attribute-match-mode) #attributes .range-shell:hover .track-seg.affordable{
    background:
      color-mix(in srgb,var(--pc-affordable) 58%,transparent)!important;
  }

  body:not(.attribute-match-mode) #attributes .range-shell:hover .track-seg.unavailable{
    background:
      color-mix(in srgb,var(--pc-unavailable) 58%,transparent)!important;
  }

  /* Safe fallback for older browsers without color-mix. */
  @supports not (background:color-mix(in srgb,red 50%,transparent)){
    body:not(.attribute-match-mode) #attributes .mini-slider .visual-track{
      opacity:.55!important;
    }
    body:not(.attribute-match-mode) #attributes .mini-slider .track-seg.purchased{
      opacity:1!important;
    }
    body:not(.attribute-match-mode) #attributes .range-shell:hover .visual-track{
      opacity:.72!important;
    }
  }
}

/* === SOURCE: css/209-v5567-archetype-ux-state-polish.css === */

/* v5.5.67 · AP help popover, eyebrow eye-state, two-tone value modes,
   and a stronger archetype-switch affordance. */

@media(min-width:761px){
  /* ---------- 1. AP Price help: cursor-side 2 × 2 popover ---------- */
  #attributeDesktopToolbar .attribute-price-body{
    position:fixed!important;
    z-index:2147482500!important;
    left:var(--ap-price-pop-x,50%)!important;
    top:var(--ap-price-pop-y,120px)!important;
    width:310px!important;
    max-width:calc(100vw - 20px)!important;
    padding:10px!important;
    margin:0!important;
    transform:none!important;
  }

  #attributeDesktopToolbar .attribute-price-body .cost-legend{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0!important;
  }

  #attributeDesktopToolbar .attribute-price-body .cost-legend-item{
    min-width:0!important;
    min-height:52px!important;
    padding:8px 9px!important;
    border-radius:9px!important;
  }

  #attributeDesktopToolbar .attribute-price-body .cost-help-note{
    grid-column:1 / -1!important;
    margin-top:7px!important;
    padding-top:8px!important;
  }

  /* ---------- 2. Filtered eye = eye + eyebrow, not slash ---------- */
  #attributeDesktopToolbar .attribute-eye-off .attribute-eye-brow{
    stroke-width:2.05!important;
    opacity:.95!important;
  }

  #attributeDesktopToolbar .attribute-visibility-button.is-filtered{
    color:#d8c77f!important;
    border-color:rgba(216,199,127,.20)!important;
    background:rgba(216,199,127,.045)!important;
    box-shadow:inset 0 0 0 1px rgba(216,199,127,.018)!important;
  }

  /* ---------- 3. Base / Match use restrained distinct colours ---------- */
  #attributeDesktopToolbar .attribute-mode-btn[data-attribute-mode="base"].active{
    color:#8fcfc2!important;
    border-color:rgba(91,184,165,.20)!important;
    background:linear-gradient(180deg,rgba(73,165,148,.125),rgba(73,165,148,.050))!important;
    box-shadow:
      inset 0 0 0 1px rgba(126,211,195,.055),
      0 0 9px rgba(73,165,148,.025)!important;
  }

  #attributeDesktopToolbar .attribute-mode-btn[data-attribute-mode="match"].active{
    color:#dda087!important;
    border-color:rgba(210,119,88,.21)!important;
    background:linear-gradient(180deg,rgba(198,104,73,.125),rgba(198,104,73,.050))!important;
    box-shadow:
      inset 0 0 0 1px rgba(231,153,126,.050),
      0 0 9px rgba(198,104,73,.025)!important;
  }

  /* ---------- 5. Archetype switch is a primary interaction ---------- */
  .global-archetype-overview-card .ovc-model-trigger{
    min-height:54px!important;
    grid-template-columns:40px minmax(0,1fr) 86px!important;
    gap:9px!important;
    margin:-2px -5px!important;
    width:calc(100% + 10px)!important;
    padding:7px 5px!important;
    border:1px solid rgba(215,224,232,.075)!important;
    border-radius:12px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(255,255,255,.008))!important;
  }

  .global-archetype-overview-card .ovc-model-logo{
    width:38px!important;
    height:38px!important;
  }
  .global-archetype-overview-card .ovc-model-logo img{
    width:35px!important;
    height:35px!important;
  }

  .global-archetype-overview-card .ovc-model-copy{
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
  }

  .global-archetype-overview-card .ovc-model-copy strong{
    font-size:22px!important;
    line-height:36px!important;
    font-weight:840!important;
    letter-spacing:-.025em!important;
  }

  .global-archetype-overview-card .ovc-model-copy span{
    font-size:8.5px!important;
    line-height:1!important;
    font-weight:700!important;
  }

  .global-archetype-overview-card .ovc-model-action{
    width:86px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 9px!important;
    gap:5px!important;
    color:#aeb8c1!important;
    border-color:rgba(205,216,227,.17)!important;
    background:rgba(205,216,227,.035)!important;
    border-radius:10px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .global-archetype-overview-card .ovc-model-action-label{
    display:inline!important;
    font-size:9.5px!important;
    line-height:1!important;
    font-weight:760!important;
    letter-spacing:.01em!important;
  }

  .global-archetype-overview-card .ovc-model-action .ovc-chevron{
    width:11px!important;
    height:11px!important;
    flex-basis:11px!important;
  }

  .global-archetype-overview-card .ovc-model-trigger:hover{
    border-color:rgba(216,184,95,.15)!important;
    background:linear-gradient(90deg,rgba(255,255,255,.026),rgba(216,184,95,.032))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.026),
      0 0 0 1px rgba(216,184,95,.018)!important;
  }

  .global-archetype-overview-card .ovc-model-trigger:hover .ovc-model-action,
  .global-archetype-overview-card .ovc-model-trigger[aria-expanded="true"] .ovc-model-action{
    color:#dfc878!important;
    border-color:rgba(216,184,95,.38)!important;
    background:rgba(216,184,95,.080)!important;
    box-shadow:0 0 0 3px rgba(216,184,95,.030)!important;
  }
}

@media(min-width:761px) and (max-width:1050px){
  .global-archetype-overview-card .ovc-model-trigger{
    grid-template-columns:38px minmax(0,1fr) 36px!important;
  }
  .global-archetype-overview-card .ovc-model-action{
    width:36px!important;
    padding:0!important;
  }
  .global-archetype-overview-card .ovc-model-action-label{
    display:none!important;
  }
}