.carousel-wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.carousel-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    z-index: 10;
    background: #fff;
    border: none;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.left-arrow { 
    left: -10px; 
}

.right-arrow { 
    right: 0px; 
}

.product-card {
    width: 220px;
    min-width: 220px;
    height: 430px;
    background: #E6E6E6;
    border-radius: 10px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.25);
            box-shadow: 4px 4px 10px rgba(0,0,0,0.25);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;

    -webkit-box-pack: start;

        -ms-flex-pack: start;

            justify-content: flex-start;
            -ms-flex-negative: 0;
                flex-shrink: 0;
}


.discount-ribbon {
    position: absolute;
    top: 18px;
    left: -40px;
    width: 140px;
    text-align: center;

    background: #3bbf4a;        /* zelena kot na sliki */
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;

    padding: 4px 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);

    border-radius: 0;
    pointer-events: none;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.product-img {
    width: 100%;
    height: 160px;

    -o-object-fit: contain;

       object-fit: contain;

    background: #f5f5f5;
    border-radius: 6px;
    padding: 6px;

    -ms-flex-negative: 0;

        flex-shrink: 0;
}

.product-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;

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

    line-height: 1.2;
    min-height: 2.4em;
}

.color-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-blue { background: #4a90e2; }
.dot-gray { background: #ccc; }
.dot-black { background: #000; }

.product-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 6px;
    font-weight: 700;
    color: #98CC5F;
    font-size: 1rem;
}

.new-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: #98CC5F;
}

.old-price {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: #999;
}

.quantity-wrapper3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 2px solid #ffffff;
    border-radius: 20px;
    color: #555;
    overflow: hidden;

    width: 110px;
}

.qty-btn {
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    font-size: 18px;
    font-weight: 600;
    color: #0c5c59;
    cursor: pointer;
}
.qty-btn:hover {
    background: rgba(12, 92, 89, 0.08);
}
.add-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    gap: 12px;
}
.quantity-input2::-webkit-outer-spin-button,
.quantity-input2::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input2 {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;

    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;

    width: 55px;
    text-align: center;
    padding: 0;
}
 .btn-add-cart-pill:hover:not(:disabled) {
            background-color: #b5b5b5;
            color: #222;
        }
        .btn-add-cart-pill2 {
    border-radius: 20px;
    border: 2px solid #ffffff;
    background-color: #184E51;
    color: #fff;
    height: 40px;
    margin-top: 0;

    font-weight: 500;
    font-size: 0.9rem;

    padding: 4px 15px;
    line-height: 1;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* ===========================
   RESPONSIVE - MOBILE
=========================== */
@media (max-width: 767.98px) {
  .carousel-arrow {
    display: none; /* na telefonu drsimo s prstom */
  }

  .carousel-track {
    gap: 12px;
    padding: 8px 4px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .product-card {
    width: 180px;
    min-width: 180px;
    height: auto;
    min-height: 380px;
    scroll-snap-align: start;
  }

  .product-img {
    height: 130px;
  }

  .new-price {
    font-size: 1.2rem;
  }
}

@media (max-width: 400px) {
  .product-card {
    width: 160px;
    min-width: 160px;
  }
}