/*
 Theme Name: Hello Biz Child
 Theme URI: https://example.com
 Description: Child tema za Elementor
 Author: SML Studio
 Author URI: https://sml-studio.org
 Template: hello-biz
 Version: 1.0
*/

#ns-checkout-top{
  background:#1f1f1f;
  border-radius:16px;
  padding:18px 20px;
  margin:-28px auto 22px;         /* center the whole block */
  max-width: 820px;              /* ← cap the length */
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  color:#e9e9e9;
}

/* Top row: centered label + time */
#ns-checkout-top .ns-timer{
  display:flex;
  align-items:center;
  justify-content:center;        /* center horizontally */
  gap:16px;
  margin-bottom:14px;
  text-align:center;
}
#ns-checkout-top .ns-time{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
#ns-checkout-top .ns-time b{
  display:inline-block; min-width:44px; padding:6px 10px;
  border-radius:10px; background:#fff; color:#111; text-align:center; font-weight:700; line-height:1;
}
#ns-checkout-top .ns-time small{ opacity:.85; margin-left:2px; }

/* Progress bar (shorter and centered) */
#ns-checkout-top .ns-bar{
  height:12px; background:#cfd3d9; border-radius:999px; overflow:hidden;
  width:92%;                      /* shorter */
  margin:10px auto 0;             /* centered */
}
#ns-checkout-top .ns-bar-fill{
  height:100%; width:0; border-radius:999px;
  background:#1e90ff;             /* blue fill */
  transition:width .35s ease;
}
/* Message row under the bar */
#ns-checkout-top .ns-msg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
  text-align:center;
  color:#e9e9e9;
  min-height:32px;              /* keep space even before JS writes text */
}

#ns-checkout-top .ns-msg .ns-ico{
  width:32px;                   /* bigger truck */
  height:32px;
  object-fit:contain;
  filter:invert(1) opacity(.95);/* keep it light on dark bg */
}

#ns-checkout-top .ns-msg .ns-left{
  display:block;
  line-height:1.3;
  font-size:16px;
}


/* Mobile */
@media (max-width:782px){
  #ns-checkout-top{ padding:16px; max-width: 96vw; }
  #ns-checkout-top .ns-timer{ flex-wrap:wrap; row-gap:8px; }
}

#ns-checkout-top .ns-msg img.ns-ico {
  width: 48px !important;  /* increase size */
  height: 48px !important; /* keep aspect ratio */
}


#ns-checkout-top .ns-bar{
  background-color: #2f2f2f !important;   /* pick your shade */
}

/* In case the track is built with a child/psuedo element */
#ns-checkout-top .ns-bar .ns-track,
#ns-checkout-top .ns-bar::before{
  background-color: #2f2f2f !important;
}
/* =========================================================
   NASUHO SHIPPING PROGRESS
   Checkout + Cart page koriste isti #ns-checkout-top wrapper.
   Elementor Menu Cart koristi #ns-menu-cart-top.
   ========================================================= */


/* =========================================================
   CHECKOUT + CART PAGE
   ========================================================= */

#ns-checkout-top{
  background:#1f1f1f;
  border-radius:16px;
  padding:18px 20px;
  margin:-28px auto 22px;
  max-width:820px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  color:#e9e9e9;
  box-sizing:border-box;
}


/*
 * Na Cart pageu isti box ide preko cijelog
 * prostora iznad itema + summaryja.
 */
body.woocommerce-cart #ns-checkout-top{
  width:100%;
  max-width:none;
  margin:0 0 22px;
  clear:both;
}


/* =========================================================
   CHECKOUT TIMER
   ========================================================= */

#ns-checkout-top .ns-timer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:14px;
  text-align:center;
}


#ns-checkout-top .ns-time{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}


#ns-checkout-top .ns-time b{
  display:inline-block;
  min-width:44px;
  padding:6px 10px;
  border-radius:10px;
  background:#fff;
  color:#111;
  text-align:center;
  font-weight:700;
  line-height:1;
}


#ns-checkout-top .ns-time small{
  opacity:.85;
  margin-left:2px;
}


/* =========================================================
   CHECKOUT + CART PROGRESS
   ========================================================= */

#ns-checkout-top .ns-bar{
  display:block;

  height:12px;
  width:92%;

  margin:10px auto 0;
  padding:0;

  background:#2f2f2f !important;

  border-radius:999px;
  overflow:hidden;

  box-sizing:border-box;
}


#ns-checkout-top .ns-bar-fill{
  display:block;

  height:100%;

  border-radius:999px;

  background:#1e90ff !important;

  transition:width .35s ease;
}


#ns-checkout-top .ns-msg{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:12px;

  margin-top:12px;

  text-align:center;

  color:#e9e9e9;

  min-height:32px;
}


#ns-checkout-top .ns-msg img.ns-ico{
  display:block;

  width:48px !important;
  height:48px !important;

  min-width:48px;

  object-fit:contain;

  filter:invert(1) opacity(.95);
}


#ns-checkout-top .ns-msg .ns-left{
  display:block;

  line-height:1.3;
  font-size:16px;

  color:#e9e9e9;
}


#ns-checkout-top .ns-msg .ns-left b{
  color:inherit !important;
  font-weight:700;
}


#ns-checkout-top .woocommerce-Price-amount,
#ns-checkout-top .woocommerce-Price-currencySymbol{
  color:inherit !important;
}


#ns-checkout-top .ns-bar .ns-track,
#ns-checkout-top .ns-bar::before{
  background-color:#2f2f2f !important;
}



/* =========================================================
   ELEMENTOR MENU CART
   ========================================================= */

#ns-menu-cart-top{
  display:block !important;

  position:relative !important;

  width:auto !important;
  max-width:none !important;

  height:auto !important;

  box-sizing:border-box !important;

  background:#1f1f1f !important;

  border:0 !important;
  border-radius:16px !important;

  padding:16px !important;

  /*
   * Razmak od rubova Elementor side cart-a.
   */
  margin:14px 20px 16px !important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.25) !important;

  color:#e9e9e9 !important;

  flex:0 0 auto !important;
}


/*
 * Elementor ne smije dodavati svoj padding/background
 * našem unutarnjem elementu.
 */
#ns-menu-cart-top .ns-dynamic,
#ns-menu-cart-top .ns-shipping-progress{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;

  background:transparent !important;
}


/* =========================================================
   MENU CART PROGRESS TRACK
   ========================================================= */

#ns-menu-cart-top .ns-bar{
  display:block !important;

  width:92% !important;
  height:12px !important;

  margin:0 auto !important;
  padding:0 !important;

  background:#2f2f2f !important;

  border:0 !important;
  border-radius:999px !important;

  overflow:hidden !important;

  box-sizing:border-box !important;
}


/* Plavi progress */
#ns-menu-cart-top .ns-bar-fill{
  display:block !important;

  height:100% !important;

  background:#1e90ff !important;

  border:0 !important;
  border-radius:999px !important;

  transition:width .35s ease !important;
}


/* =========================================================
   MENU CART MESSAGE
   ========================================================= */

#ns-menu-cart-top .ns-msg{
  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:12px !important;

  width:100% !important;

  min-height:32px !important;

  margin:12px 0 0 !important;
  padding:0 !important;

  text-align:center !important;

  color:#e9e9e9 !important;

  box-sizing:border-box !important;
}


/* Kamion */
#ns-menu-cart-top .ns-msg img.ns-ico{
  display:block !important;

  width:44px !important;
  height:44px !important;

  min-width:44px !important;
  max-width:44px !important;

  flex:0 0 44px !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain !important;

  filter:invert(1) opacity(.95) !important;
}


/* Tekst */
#ns-menu-cart-top .ns-msg .ns-left{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  line-height:1.3 !important;

  font-size:14px !important;
  font-weight:400 !important;

  text-align:center !important;

  color:#e9e9e9 !important;
}


/* Iznos koji fali */
#ns-menu-cart-top .ns-msg .ns-left b{
  font-weight:700 !important;

  color:#fff !important;
}


/* Poštnina */
#ns-menu-cart-top .ns-msg .ns-left small{
  font-size:12px !important;
  line-height:1.3 !important;

  color:#e9e9e9 !important;

  opacity:.85 !important;
}


/* WooCommerce spanovi za cijenu */
#ns-menu-cart-top .woocommerce-Price-amount,
#ns-menu-cart-top .woocommerce-Price-currencySymbol{
  color:inherit !important;
}


#ns-menu-cart-top .ns-bar .ns-track,
#ns-menu-cart-top .ns-bar::before{
  background-color:#2f2f2f !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:782px){

  #ns-checkout-top{
    padding:16px;
    max-width:96vw;
  }


  body.woocommerce-cart #ns-checkout-top{
    width:100%;
    max-width:100%;
  }


  #ns-checkout-top .ns-timer{
    flex-wrap:wrap;
    row-gap:8px;
  }


  #ns-checkout-top .ns-bar{
    width:100%;
  }


  /*
   * Elementor Menu Cart mobile
   */
  #ns-menu-cart-top{
    margin:12px 14px 14px !important;

    padding:14px !important;

    border-radius:14px !important;
  }


  #ns-menu-cart-top .ns-bar{
    width:100% !important;
    height:10px !important;
  }


  #ns-menu-cart-top .ns-msg{
    gap:9px !important;
  }


  #ns-menu-cart-top .ns-msg img.ns-ico{
    width:38px !important;
    height:38px !important;

    min-width:38px !important;
    max-width:38px !important;

    flex-basis:38px !important;
  }


  #ns-menu-cart-top .ns-msg .ns-left{
    font-size:13px !important;
  }
}


/* Coupon input */
.woocommerce-cart .coupon #coupon_code {
    background: #1A1A1A !important;
    border: 1px solid #02010100 !important;
    border-radius: 8px;

    color: #FFFFFF !important;

    padding: 12px 14px;
    min-height: 46px;

    font-size: 15px;
    line-height: 1.2;

    box-sizing: border-box;

    outline: none !important;
    box-shadow: none !important;

    transition:
        background-color .2s ease,
        box-shadow .2s ease;
}


/* Placeholder */
.woocommerce-cart .coupon #coupon_code::placeholder {
    color: #69727d;
    opacity: .8;
}


/* Focus */
.woocommerce-cart .coupon #coupon_code:focus {
    background: #1A1A1A !important;
    border-color: #fff !important;

    outline: none !important;
    box-shadow: none !important;

    animation: coupon-input-focus .5s ease forwards;
}


/* 2px na klik, zatim nazad na 1px */
@keyframes coupon-input-focus {

    0% {
        border-width: 2px;
    }

    100% {
        border-width: 1px;
    }
}

/* =========================================================
   GLOBAL NUMBER INPUT +/- CONTROLS
   ========================================================= */

.ns-number-input {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    height:30px;
    border: 1px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}


/* Input */
.ns-number-input input[type="number"] {
    width: 58px !important;
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 6px !important;

    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.45) !important;
    border-right: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    color: #fff !important;

    text-align: center !important;

    font-size: 15px;
    font-weight: 600;

    box-sizing: border-box;

    -moz-appearance: textfield;
}


/*
 * Makni browserove default strelice.
 */
.ns-number-input input[type="number"]::-webkit-inner-spin-button,
.ns-number-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* +/- button */
.ns-number-input .ns-number-minus,
.ns-number-input .ns-number-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 5px 10px !important;

    border: 0 !important;
    border-radius: 8px !important;


    color: #fff !important;

    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color .15s ease,
        transform .08s ease;
}


.ns-number-input .ns-number-minus:hover,
.ns-number-input .ns-number-plus:hover {
    background: #333 !important;
}


.ns-number-input .ns-number-minus:active,
.ns-number-input .ns-number-plus:active {
    transform: scale(.92);
}


/*
 * Focus cijelog kontrolnog elementa.
 */
.ns-number-input:focus-within {
    border-color: #fff;
    box-shadow: 0 0 0 1px #fff;
}


/* Mobile */
@media (max-width: 782px) {

    .ns-number-input {
        height: 28px;
    }

    .ns-number-input input[type="number"] {
        width: 52px !important;
    }
}
.woocommerce-notices-wrapper{
    display:none;
}
.woocommerce .blockUI.blockOverlay,
.woocommerce .loader::before {
    background-color: #3A3A3A !important;
}
.e-cart-totals{
    padding: 0 !important;
}
.e-cart-totals .cart-collaterals .cart_totals{
    padding: var(--sections-padding,16px 30px);
}
fieldset{
    border:0 !important;
}
.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before {

    content: "" !important;

    display: block !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 38px !important;
    height: 38px !important;

    margin-left: -19px !important;
    margin-top: -19px !important;

    border: none !important;
    border-radius: 0 !important;

    filter: none !important;

    background-color: transparent !important;

    /*
     * Veliki puni crni krug
     * + veća plava kuglica na rubu
     */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+CjxjaXJjbGUgY3g9IjI1IiBjeT0iMjUiIHI9IjE4IiBmaWxsPSIjMTExMTExIi8+CjxjaXJjbGUgY3g9IjI1IiBjeT0iNyIgcj0iNS41IiBmaWxsPSIjNkVDMUU0IiBmaWxsLW9wYWNpdHk9IjEiLz4KPC9zdmc+") !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    transform-origin: 50% 50% !important;

    animation:
        nasuho-wc-spinner
        .8s
        linear
        infinite
        !important;

    z-index: 2 !important;
}


@keyframes nasuho-wc-spinner {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.e-cart-totals {
    --sections-border-color: unset !important; 
    --sections-descriptions-color: unset !important; 
    --links-normal-color: unset !important; 
    --sections-border-type: none !important;
    
}
/* =========================================================
   ELEMENTOR MENU CART - DONJI DIO FIKSIRAN NA DNU
   ========================================================= */

/* Cijeli sadržaj side carta */
.elementor-menu-cart__main .widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}


/*
 * Lista proizvoda zauzima sav slobodan prostor.
 * Ako ih ima puno, scrolla se samo ovaj dio.
 */
.elementor-menu-cart__main .elementor-menu-cart__products {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    margin-bottom: 0 !important;
}


/* =========================================================
   SUBTOTAL
   ========================================================= */

.elementor-menu-cart__main .elementor-menu-cart__subtotal {
    flex: 0 0 auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   FREE SHIPPING PROGRESS
   ========================================================= */

.elementor-menu-cart__main #ns-menu-cart-top {
    flex: 0 0 auto !important;

    /*
     * OVO JE BITNO:
     * nema više margin-top:auto
     */
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}


/* =========================================================
   BUTTONI
   ========================================================= */

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
    flex: 0 0 auto !important;

    margin-top: 0 !important;
}

/* =========================================================
   UPSELL + CROSSSELL HORIZONTAL CAROUSELS
   ========================================================= */

#upsell-box-custom,
#crosssell-box-custom {
    width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   CONTAINERS
   --------------------------------------------------------- */

#upsell-box-custom .up-sells,
#crosssell-box-custom .cross-sells {
    width: 100%;
    min-width: 0;
}


/* Naslov iznad carousela */
#upsell-box-custom .up-sells > h2,
#crosssell-box-custom .cross-sells > h2 {
    width: 100%;
}


/* ---------------------------------------------------------
   HORIZONTAL TRACK
   --------------------------------------------------------- */

#upsell-box-custom ul.products.elementor-grid,
#crosssell-box-custom ul.products.elementor-grid {

    display: flex !important;
    flex-direction: row !important;

    grid-template-columns: none !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 0 6px 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 16px !important;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    cursor: grab;
}


/* Sakrij scrollbar Chrome/Safari */
#upsell-box-custom ul.products.elementor-grid::-webkit-scrollbar,
#crosssell-box-custom ul.products.elementor-grid::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   UPSELL DESKTOP
   2 proizvoda
   ========================================================= */

#upsell-box-custom ul.products > li.product {

    flex: 0 0 calc((100% - 16px) / 2) !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    float: none !important;
}


/* =========================================================
   CROSSSELL DESKTOP
   4 proizvoda
   ========================================================= */

#crosssell-box-custom ul.products > li.product {

    flex: 0 0 calc((100% - 48px) / 4) !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    float: none !important;
}


/* =========================================================
   TABLET
   3 proizvoda
   ========================================================= */

@media (max-width: 1024px) {

    #upsell-box-custom ul.products > li.product,
    #crosssell-box-custom ul.products > li.product {

        flex: 0 0 calc((100% - 32px) / 3) !important;

        width: auto !important;
        max-width: none !important;
    }

}


/* =========================================================
   MOBILE
   cca 1.28 proizvoda vidljivo
   ========================================================= */

@media (max-width: 767px) {

    #upsell-box-custom ul.products.elementor-grid,
    #crosssell-box-custom ul.products.elementor-grid {

        gap: 12px !important;
    }


    #upsell-box-custom ul.products > li.product,
    #crosssell-box-custom ul.products > li.product {

        flex: 0 0 78% !important;

        width: 78% !important;
        max-width: 78% !important;
    }

}


/* =========================================================
   DRAG STATE
   ========================================================= */

#upsell-box-custom ul.products.ns-product-carousel-dragging,
#crosssell-box-custom ul.products.ns-product-carousel-dragging {

    cursor: grabbing !important;

    scroll-behavior: auto !important;

    user-select: none !important;
}


/* Ne dozvoli browseru da vuče sliku kao fajl */
#upsell-box-custom ul.products img,
#crosssell-box-custom ul.products img {

    -webkit-user-drag: none;

    user-select: none;
}
/* TEST / FORCE CROSSSELL VISIBLE */

/* =========================================================
   CROSSSELL LOOP GRID - HORIZONTAL SCROLL
   SAMO #crosssell-box-custom
   ========================================================= */

#crosssell-box-custom {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}


/* Elementor widget container */
#crosssell-box-custom > .elementor-widget-container {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   HORIZONTALNI TRACK
   ========================================================= */

#crosssell-box-custom .elementor-loop-container {

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    /* Isključi Elementor grid */
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 16px !important;

    margin: 0 !important;

    /*
     * Malo prostora gore/dolje zbog hover scale 1.1
     * koji već ima tvoj Loop Template.
     */
    padding: 12px 6px 14px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;

    /*
     * Lijep native snap.
     */
    scroll-snap-type: x proximity;

    /*
     * Sakrij scrollbar - Firefox
     */
    scrollbar-width: none;

    /*
     * Spriječi Elementor grid/masonry ponašanje.
     */
    align-items: stretch !important;
}


/* Chrome / Edge / Safari */
#crosssell-box-custom .elementor-loop-container::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   PRODUCT ITEM
   ========================================================= */

#crosssell-box-custom .elementor-loop-container > .e-loop-item {

    /*
     * Desktop = 3 proizvoda.
     */
    flex: 0 0 calc((100% - 32px) / 3) !important;

    width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;

    min-width: 0 !important;

    /*
     * BITNO:
     * Elementor masonry ti trenutno ubacuje inline:
     *
     * style="margin-top:-30px"
     *
     * Ovo ga poništava samo u ovom widgetu.
     */
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    /*
     * Masonry ne smije pozicionirati kartice.
     */
    position: relative !important;
    top: auto !important;
    left: auto !important;

    scroll-snap-align: start;

    /*
     * Da Elementor ne smanji item.
     */
    flex-shrink: 0 !important;
}


/* =========================================================
   TABLET
   2 proizvoda
   ========================================================= */

@media (max-width: 1024px) {

    #crosssell-box-custom
    .elementor-loop-container > .e-loop-item {

        flex-basis: calc((100% - 16px) / 2) !important;

        width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

}


/* =========================================================
   MOBILE
   ~1.28 proizvoda
   ========================================================= */

@media (max-width: 767px) {

    #crosssell-box-custom .elementor-loop-container {

        gap: 12px !important;

        /*
         * Mali desni prostor da se još bolje vidi
         * da postoji sljedeći proizvod.
         */
        padding:
            8px
            4px
            12px
            4px !important;
    }


    #crosssell-box-custom
    .elementor-loop-container > .e-loop-item {

        /*
         * 78% viewporta tracka
         * = cca 1.28 kartice na ekranu.
         */
        flex: 0 0 78% !important;

        width: 78% !important;
        max-width: 78% !important;

        margin-top: 0 !important;
    }

}


/* =========================================================
   IMAGES
   ========================================================= */

#crosssell-box-custom img {
    -webkit-user-drag: none;
    user-select: none;
}
/* =========================================================
   UPSELL LOOP GRID CAROUSEL
   SAMO #upsell-box-custom
   ========================================================= */

#upsell-box-custom {
    width:100%;
    min-width:0;
}

#upsell-box-custom > .elementor-widget-container {
    width:100%;
    min-width:0;
    overflow:hidden;
}


/* =========================================================
   TRACK
   ========================================================= */

#upsell-box-custom .elementor-loop-container {

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    grid-template-columns:none !important;
    grid-auto-rows:auto !important;

    width:100% !important;
    max-width:100% !important;

    gap:16px !important;

    margin:0 !important;

    /*
     * Malo prostora zbog hover scale 1.1
     * iz Loop Templatea.
     */
    padding:12px 6px 14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    cursor:grab;

    scroll-snap-type:x proximity;

    overscroll-behavior-x:contain;

    align-items:stretch !important;
}


/* Chrome / Safari / Edge scrollbar */
#upsell-box-custom
.elementor-loop-container::-webkit-scrollbar {
    display:none;
}


/* =========================================================
   DESKTOP
   2 proizvoda
   ========================================================= */

#upsell-box-custom
.elementor-loop-container > .e-loop-item {

    flex:0 0 calc((100% - 16px) / 2) !important;

    width:calc((100% - 16px) / 2) !important;
    min-width:calc((100% - 16px) / 2) !important;
    max-width:calc((100% - 16px) / 2) !important;

    margin:0 !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;

    scroll-snap-align:start;

    flex-shrink:0 !important;
}


/* =========================================================
   TABLET
   2 proizvoda
   ========================================================= */

@media (max-width:1024px) {

    #upsell-box-custom
    .elementor-loop-container > .e-loop-item {

        flex:0 0 calc((100% - 16px) / 2) !important;

        width:calc((100% - 16px) / 2) !important;
        min-width:calc((100% - 16px) / 2) !important;
        max-width:calc((100% - 16px) / 2) !important;
    }

}


/* =========================================================
   MOBILE
   cca 1.28 proizvoda
   ========================================================= */

@media (max-width:767px) {

    #upsell-box-custom .elementor-loop-container {

        gap:12px !important;

        padding:
            8px
            4px
            12px
            4px !important;
    }


    #upsell-box-custom
    .elementor-loop-container > .e-loop-item {

        flex:0 0 78% !important;

        width:78% !important;
        min-width:78% !important;
        max-width:78% !important;

        margin:0 !important;
    }

}


/* =========================================================
   DRAG STATE
   ========================================================= */

#upsell-box-custom
.elementor-loop-container.ns-upsell-dragging {

    cursor:grabbing !important;

    user-select:none !important;

    scroll-snap-type:none !important;
}


/* Nemoj browseru dozvoliti native drag slike */
#upsell-box-custom img {

    -webkit-user-drag:none;

    user-select:none;
}