.cart-update-container{
  margin-top: 2em;
}

.loader {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    display: block;
    margin: 75px auto;
    position: relative;
    background: currentColor;
    color: #FFF;
    box-sizing: border-box;
    animation: animloader 0.3s 0.3s linear infinite alternate;
  }
  
  .loader::after, .loader::before {
    content: '';
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    box-sizing: border-box;
    animation: animloader 0.3s  0.45s  linear infinite alternate;
  }
  .loader::before {
    left: -20px;
    animation-delay: 0s;
  }
  
  @keyframes animloader {
    0%   { height: 48px} 
    100% { height: 4px}
  }
  
  /* fix sidebar width in mobile */
  @media (max-width: 767px) {
    .header-cart-container{
      width: 100%;
      right: -100%;
    }
  }
  .shop-products-col{
    width: 100%;
  }
  .no-products {
    text-align: center;
    padding: 40px 0;
    font-size: 1.2rem;
    color: #666;
    width: 100%;
}

h1, h2, h3, h4, h5, h6{
  margin: 0.5em 0;
}

table, th, td{
  border: 2px solid;
  border-collapse: collapse;
  padding: 10px;
  text-align: center;
  border-color: #B5B3B3;
}

.header-mega-menu-col{
  width: clamp(120px, 16.5vw, 175px);
}

.btn-stock{
  left: 80px;
}
.stock-table{
  width: 100%;
  font-size: 1.3em;
}
.bg-success{
  background-color: #198754;
  color: #fff;
}
.bg-danger{
  background-color: #dc3545;
  color: #fff;
}
.bg-primary{
  background-color: #0d6efd;
  color: #fff;
}

.color-red{
  color: #FF2929;
}

.color-grey{
  color: #828282;
}

.margin-x{
  margin-left: 5px;
  margin-right: 5px;
}

.joined-delivery-message{
  font-size: 14px;
  margin-right: 12px;
}

#header-cart-continue-shopping{
  height: 40px;
  line-height: 36px;
  text-align: center;
  background: #fff;
  color: var(--Foundation-Primary-Darker);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 5px;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.available_from{
  background-color: #ff5f00;
  color: #fff;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 7px;
  padding: 10px;
}

/* rubika icon */
.floating-menu-item {
  color: #fff;
}
.floating-menu-item .icon {
  width: 24px;
  height: 24px;
}

.char-limit {
    max-width: 18ch;
    white-space: normal;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
}

/* the bounce animation */
@keyframes bounce-attention {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

.floating-menu-button {
    /* Keep your existing properties */
    background-color: var(--Foundation-Primary-Normal);
    z-index: 10;
    
    /* Add the animation: runs for 2.5 seconds, continuously */
    animation: bounce-attention 2.5s infinite;
}

.floating-menu-open .floating-menu-button {
    animation: none;
    transform: rotate(45deg);
}

#mobile-menu-search-container{
  padding-right: 85px;
}

.post-content a{
  color: #0047B3;
}

/* Popup */

.popup-banner {

    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 420px;
    max-width: 90vw;

    background: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0,0,0,0.25);

    z-index: 9999;

    display: none;
}

.popup-banner img {
    width:100%;
    display:block;
}

.popup-close {

    position:absolute;

    top:8px;
    right:10px;

    border:none;

    width:26px;
    height:26px;

    background:rgba(0,0,0,.6);

    color:white;

    border-radius:50%;

    cursor:pointer;
}

/* make mobile category menu scrollable */
#mobile-category-list .mobile-menu {
    max-height: 70vh;
    overflow-y: auto;
}