/**
 * OneStorefront — legacy base neutralization (productbox-hover contract)
 * Loaded via custom.css. See docs/legacy-base-version.md
 *
 * Replaces scattered overrides; OSF cards use osf-card--interactive / osf-plp-card--collapse in TPL.
 */

/* neutralizes legacy productbox: productbox-inner::before white expand layer */
@media (min-width: 768px) {
  .productbox.productbox-hover .productbox-inner::before,
  .productbox.productbox-hover:hover .productbox-inner::before,
  .productbox.productbox-hover:focus .productbox-inner::before,
  .productbox.productbox-hover.focus .productbox-inner::before,
  .productbox.osf-card--interactive .productbox-inner::before,
  .productbox.osf-card--interactive:hover .productbox-inner::before,
  .productbox.osf-plp-card--collapse .productbox-inner::before,
  .productbox.osf-plp-card--collapse:hover .productbox-inner::before {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* neutralizes legacy productbox: ribbon shift left:-1.5rem / top negative on hover */
  .productbox .productbox-ribbon.ribbon,
  .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
  .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
  .productbox.productbox-hover.focus .productbox-ribbon.ribbon,
  .productbox.osf-card--interactive:hover .productbox-ribbon.ribbon,
  .productbox.osf-card--interactive:focus .productbox-ribbon.ribbon,
  .productbox.osf-card--interactive.focus .productbox-ribbon.ribbon,
  .productbox.osf-plp-card--collapse:hover .productbox-ribbon.ribbon {
    top: 0.75rem !important;
    left: 0.75rem !important;
    opacity: 1;
    visibility: visible;
  }

  /* neutralizes legacy productbox: quick-actions jump to 1.5rem on gallery variation hover */
  .layout-gallery .productbox-show-variations.productbox-hover:hover .productbox-quick-actions,
  .layout-gallery .productbox-show-variations.osf-card--interactive:hover .productbox-quick-actions,
  .layout-gallery .productbox-show-variations.osf-plp-card--collapse:hover .productbox-quick-actions {
    right: 0.5rem !important;
    top: 0.5rem !important;
  }

  /* neutralizes legacy productbox: z-index 1001 + inner negative margin expand on hover */
  .productbox.productbox-hover:hover,
  .productbox.productbox-hover:focus,
  .productbox.productbox-hover.focus,
  .productbox.osf-card--interactive:hover,
  .productbox.osf-card--interactive:focus,
  .productbox.osf-card--interactive.focus {
    z-index: auto;
    outline: none;
  }

  .productbox.productbox-hover:hover .productbox-inner,
  .productbox.osf-card--interactive:hover .productbox-inner {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
}

/* OSF card interactive — gallery / wishlist / recommendations (replaces productbox-hover UX) */
@media (min-width: 768px) {
  :is(.osf-plp #product-list, .osf-pdp .recommendations .osf-pdp-rec-plp-context .product-list, .osf-cart .recommendations .osf-pdp-rec-plp-context .product-list).layout-gallery
    .osf-product-card.osf-card--interactive:hover {
    z-index: 10;
  }

  :is(.osf-plp #product-list, .osf-pdp .recommendations .osf-pdp-rec-plp-context .product-list, .osf-cart .recommendations .osf-pdp-rec-plp-context .product-list).layout-gallery
    .osf-product-card.osf-card--interactive:hover .productbox-inner {
    transform: translateY(-2px);
    border-color: rgba(var(--osf-accent-rgb, 53, 215, 255), 0.35);
    box-shadow: var(--osf-plp-shadow-hover, var(--osf-shadow-hover));
  }

  :is(.osf-plp #product-list, .osf-pdp .recommendations .osf-pdp-rec-plp-context .product-list, .osf-cart .recommendations .osf-pdp-rec-plp-context .product-list).layout-gallery
    .osf-product-card.osf-card--interactive.productbox-show-variations.transition,
  :is(.osf-plp #product-list, .osf-pdp .recommendations .osf-pdp-rec-plp-context .product-list, .osf-cart .recommendations .osf-pdp-rec-plp-context .product-list).layout-gallery
    .osf-product-card.osf-card--interactive.productbox-show-variations:hover {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .osf-plp #product-list.layout-list .productbox-row.osf-card--interactive:hover {
    z-index: 10;
  }

  .osf-plp #product-list.layout-list .productbox-row.osf-card--interactive:hover .productbox-inner {
    transform: none;
    box-shadow: var(--osf-glass-shadow, var(--osf-plp-shadow-hover));
    border-color: rgba(var(--osf-accent-rgb, 53, 215, 255), 0.45);
  }
}

/* OSF collapse card — variation swatch expand (was show-variation-collapse + productbox-hover) */
#product-list.layout-gallery .osf-plp-card--collapse.productbox-show-variations.transition,
#product-list.layout-gallery .osf-plp-card--collapse.productbox-show-variations:hover,
#product-list.layout-gallery .osf-plp-card--collapse.productbox-show-variations:focus,
#product-list.layout-gallery .osf-plp-card--collapse.productbox-show-variations.focus {
  position: absolute;
  z-index: 1000;
  padding: 1rem 1rem 0;
  margin: -1rem;
  width: 100%;
}

#product-list.layout-gallery .osf-plp-card--collapse.productbox-show-variations:hover {
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}

.is-mobile .osf-plp-card--collapse .productbox-onhover.collapsing {
  -webkit-transition: none;
  transition: none;
  display: none;
}

/* --------------------------------------------------------------------------
   legacy base highlight gold (#F8BF00) → OSF brand palette
   -------------------------------------------------------------------------- */
.osf-shop-cc-theme .noUi-horizontal .noUi-connect {
  background: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .noUi-horizontal .noUi-handle {
  background: var(--osf-brand, #1789ad) !important;
  border: 0 !important;
  box-shadow: 0 0 0 5px rgba(var(--osf-brand-rgb, 23, 137, 173), 0.35) !important;
}

.osf-shop-cc-theme .productlist-filter-categories > .nav-item > .nav-link::before {
  border-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .filter-item.active .filter-img,
.osf-shop-cc-theme .filter-item:active .filter-img {
  border-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .filter-search-wrapper.input-group-selected .input-group-text,
.osf-shop-cc-theme .filter-search-wrapper.input-group-selected .filter-search {
  border-color: rgba(var(--osf-brand-rgb, 23, 137, 173), 0.55) !important;
}

.osf-shop-cc-theme aside .nav-panel > .nav > .active > .nav-link {
  border-bottom-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .tab-navigation .nav-link::after {
  border-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .bootstrap-select.custom-select button.dropdown-toggle:focus,
.osf-shop-cc-theme .bootstrap-select.custom-select button[data-toggle=collapse]:focus:not(.navbar-toggler),
.osf-shop-cc-theme .bootstrap-select.custom-select.show button.dropdown-toggle,
.osf-shop-cc-theme .bootstrap-select.custom-select.show button[data-toggle=collapse]:not(.navbar-toggler) {
  border-color: rgba(var(--osf-brand-rgb, 23, 137, 173), 0.55) !important;
}

.osf-shop-cc-theme .form-icon-trigger-label:hover {
  color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .jqcloud-word a:hover {
  color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .badge-circle:hover,
.osf-shop-cc-theme .badge-circle:focus,
.osf-shop-cc-theme .badge-circle-1.on-list {
  background-color: var(--osf-brand, #1789ad) !important;
  border-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .badge-check {
  border-color: var(--osf-brand, #1789ad) !important;
}

.osf-shop-cc-theme .badge-check .badge-circle {
  background-color: var(--osf-brand, #1789ad) !important;
  border-color: var(--osf-brand, #1789ad) !important;
}

@media (min-width: 768px) {
  .osf-shop-cc-theme .productbox.productbox-hover:focus-visible .productbox-inner,
  .osf-shop-cc-theme .productbox.productbox-hover:focus-within .productbox-inner,
  .osf-shop-cc-theme .productbox.osf-card--interactive:focus-visible .productbox-inner,
  .osf-shop-cc-theme .productbox.osf-card--interactive:focus-within .productbox-inner {
    outline: 2px solid rgba(var(--osf-brand-rgb, 23, 137, 173), 0.55) !important;
    outline-offset: 2px;
  }
}
