/* ==========================================================
   EBMENU1 RELPRD1
   Related Products Slider
========================================================== */

:root {

    /* =================================
       CONTAINER
    ================================= */

    --ebmenu1relprd1-container-width:
        1440px;

    --ebmenu1relprd1-section-spacing:
        clamp(.75rem, 1vw, 1rem);




    /* =================================
       TITLE
    ================================= */

    --ebmenu1relprd1-title-color:
        var(--ebmenu1-secondary-color);

    --ebmenu1relprd1-title-font-size:
        clamp(1.35rem, 2vw, 1.7rem);




    /* =================================
       NAVIGATION BUTTONS
    ================================= */

    --ebmenu1relprd1-nav-background:
        #f4f4f4;

    --ebmenu1relprd1-nav-color:
        var(--ebmenu1-secondary-color);

    --ebmenu1relprd1-nav-hover-background:
        var(--ebmenu1-secondary-color);

    --ebmenu1relprd1-nav-hover-color:
        #ffffff;

    --ebmenu1relprd1-nav-disabled-opacity:
        .35;




    /* =================================
       SLIDER
    ================================= */

    --ebmenu1relprd1-card-width:
        340px;

}







/* ==========================================================
   SECTION
========================================================== */

.ebmenu1relprd1-section {

    max-width:
        var(--ebmenu1relprd1-container-width);

    width:
        calc(100% - 2em);

    margin:
        10px auto 0;

}







/* ==========================================================
   TOOLBAR
========================================================== */

.ebmenu1relprd1-toolbar {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        20px;

}







/* ==========================================================
   TITLE
========================================================== */

.ebmenu1relprd1-title {

    color:
        var(--ebmenu1relprd1-title-color);

    font-size:
        var(--ebmenu1relprd1-title-font-size);

    font-weight:
        700;

    margin:
        0;

}







/* ==========================================================
   CONTROLS
========================================================== */

.ebmenu1relprd1-controls {

    display:
        flex;

    gap:
        10px;

}







/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

.ebmenu1relprd1-control-btn {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        42px;

    height:
        42px;

    border:
        none;

    border-radius:
        10px;

    cursor:
        pointer;

    transition:
        .25s ease;

    background:
        var(--ebmenu1relprd1-nav-background);

    color:
        var(--ebmenu1relprd1-nav-color);

    font-size:
        clamp(1rem,1.2vw,1.15rem);

}

/* hide scrollbar */

.ebmenu1relprd1-slider::-webkit-scrollbar {

  display: none;

}

.ebmenu1relprd1-slider {

  scrollbar-width: none;

}



/* ===================================== */
/* Cards */
/* ===================================== */

.ebmenu1relprd1-slider .ebmenu1-crd1-card-container {

  flex: 0 0 340px;

  scroll-snap-align: start;

}

.ebmenu1relprd1-slider {

    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    align-items: flex-start;

  cursor: grab;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  /* touch-action: pan-x; */
  overflow-x: auto;

}

.ebmenu1relprd1-slider::-webkit-scrollbar {

  display: none;

}

.ebmenu1relprd1-slider.dragging {

  cursor: grabbing;

  scroll-behavior: auto;

  user-select: none;

}

.ebmenu1relprd1-control-btn:disabled {

  opacity: .35;

  cursor: not-allowed;

}

#usd-related-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.ebcard1-card-container {
  scroll-snap-align: start;
}

/* ===================================== */
/* Responsive */
/* ===================================== */

@media(max-width:1200px) {

  .ebmenu1relprd1-slider .ebmenu1-crd1-card-container {

    flex: 0 0 310px;

  }

}

@media(max-width:992px) {

  .ebmenu1relprd1-slider .ebmenu1-crd1-card-container {

    flex: 0 0 280px;

  }

}

@media(max-width:768px) {

  .ebmenu1relprd1-slider .ebmenu1-crd1-card-container {

    flex: 0 0 270px;

  }

}