/* BE26 v1.0.0 — scoped to the one verified Related Products Slick carousel. */
@media only screen and (max-width: 767px) {
  body.single-product .be26-ra-host {
    position: relative !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* These selectors only activate AFTER the JavaScript verifies a functional
     Slick slider and its Related Products heading. Nothing else is touched. */
  body.single-product .be26-ra-ready .slick-dots,
  body.single-product .be26-ra-dots-scope .slick-dots {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.single-product .be26-ra-host > button.be26-ra-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: var(--be26-ra-top, 110px) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #303030 !important;
    box-shadow: 0 2px 9px rgba(0,0,0,.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    z-index: 15 !important;
    transition: box-shadow .15s ease, background-color .15s ease !important;
    pointer-events: auto !important;
  }
  body.single-product .be26-ra-host > .be26-ra-button.be26-ra-prev { left: 0 !important; right: auto !important; }
  body.single-product .be26-ra-host > .be26-ra-button.be26-ra-next { right: 0 !important; left: auto !important; }
  body.single-product .be26-ra-host > .be26-ra-button svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  body.single-product .be26-ra-host > .be26-ra-button:hover { background: #fafafa !important; box-shadow: 0 3px 12px rgba(0,0,0,.18) !important; }
  body.single-product .be26-ra-host > .be26-ra-button:focus-visible { outline: 2px solid #167bbf !important; outline-offset: 2px !important; }
  body.single-product .be26-ra-host > .be26-ra-button:disabled { opacity: .35 !important; cursor: not-allowed !important; }
}

/* The DOM buttons remain invisible outside mobile even if the device is resized
   while a carousel is active; no desktop/tablet slider settings are touched. */
@media only screen and (min-width: 768px) {
  body.single-product .be26-ra-button { display: none !important; }
}