@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  outline: none;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  letter-spacing: 0.05vw;
  box-sizing: border-box;
  text-decoration: none;
  
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: cover;
}



body {
    background-size: cover;
    padding-top: 2vw; 
    
}



.kosik-header {
    display: flex;
    justify-content: center;
    background-color: #6522229c;
    color: white;
    padding: 1vw 0;
    font-weight: 600;
    font-size: 1.35vw;
    margin-bottom: 10px;
    width: 70vw;
    transform: translatex(-2vw) translateY(-2vw);
    border-radius: 2vw 2vw 0vw 0vw;
    margin: 0 auto;
}

.kosik-header-item {
    flex: 1;
    text-align: center;
}

.kosik-polozka {
    display: flex;
    justify-content: space-between;
}

.kosik-item {
    flex: 1;
    text-align: center;
}

.kosik-header-item-produkt {

    transform: translateX(-6.7vw);
    color: white;
}

.kosik-header-item-mnozstvo {
    transform: translateX(11.5vw);
    color: white;
}

.kosik-header-item-cena {
    color: white;
    transform: translateX(5.85vw);
}




@media (max-width: 768px) {
    .kosik-header {
        padding: 1vw 0;
        font-size: 3vw;
        width: 95vw;
        transform: translatex(-2vw) translateY(-2vw);
        border-radius: 2vw 2vw 0vw 0vw;
        margin: 0 auto;
    }
    
    .kosik-header-item {
        flex: 1;
        text-align: center;
    }
    
    .kosik-polozka {
        display: flex;
        justify-content: space-between;
    }
    
    .kosik-item {
        flex: 1;
        text-align: center;
    }
    
    .kosik-header-item-produkt {
        text-align: left;
        transform: translateX(3vw);
        color: white;
    }
    
    .kosik-header-item-mnozstvo {
        transform: translateX(0vw);
        color: white;
        text-align: right;
    }
    
    .kosik-header-item-cena {
        color: white;
        transform: translateX(-4.5vw);
        text-align: right;
    }
}










/* HERO */
.hero {
    width: 100%;
    top: 5vw;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .banner img {
    width: 90%;
    height: 25vw;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 2vw;
    z-index: 1;
    filter: brightness(0.5);
  }
  
  .hero-title {
    font-size: 8vw;
    color: white;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    z-index: 2;
    position: absolute;
    font-family: "Italianno", cursive;
    font-weight: 400;
    font-style: normal;
    text-shadow: 0vw 0vw 1vw black;
  }

  



/* KOŠÍK */

.kosik-polozka {
    display: flex;
    align-items: center;
    margin-bottom: 1vw;
}

.kosik-polozka img {
    width: 10vw;
    margin-right: 2vw;
    transition: transform 0.25s ease;
}

.kosik-polozka img:hover {
    transform: scale(1.05);
}

.kosik-polozka p {
    margin: 0 1vw;
    color: white;
}





.kosik-prazdny-title {
    font-size: 4vw;
    text-align: center;
    color: white;
    font-weight: 500;
    border-bottom: 0.15vw solid rgb(255 255 255);
    width: 60%;
    margin: 0 auto;
    padding-bottom: 1.5vw;
    margin-top: 2.5vw;
}


.kosik-prazdny-button {
    font-size: 2vw;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    margin: 0 auto;
    display: block;
    width: fit-content;
    padding: 0.5vw 1vw;
    border-radius: 1vw;
    border: 0.15vw solid #f8f8f8;
    margin-top: 1.5vw;
    background-color: #ffffff00;
    margin-bottom: 2.5vw;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.kosik-prazdny-button:hover {
    color: rgb(94 25 25);
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .kosik-prazdny-title {
        font-size: 5vw;
        width: 50%;
        padding: 0.75vw;
    }
    
    
    .kosik-prazdny-button {
        font-size: 3vw;
        padding: 0.35vw 0.75vw;
        border-radius: 1.35vw;
        margin-top: 1.15vw;
    }
}




.kosik-container {
    max-width: 70vw;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='920' height='280' preserveAspectRatio='none' viewBox='0 0 920 280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1048%26quot%3b)' fill='none'%3e%3crect width='920' height='280' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1049%26quot%3b)'%3e%3c/rect%3e%3cpath d='M301.32174426494885 150.45365209070735L285.5478527613914 209.3226166150627 344.4168172857468 225.09650811862014 360.1907087893042 166.22754359426477z' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M341.8786111285078 101.61106908586753L374.3468093165906 124.34554620924993 392.21442590762285 64.27601036543456z' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M742.32%2c60.002C755.589%2c59.426%2c768.611%2c53.934%2c775.007%2c42.294C781.203%2c31.017%2c778.144%2c17.596%2c771.759%2c6.425C765.315%2c-4.849%2c755.306%2c-14.949%2c742.32%2c-14.896C729.403%2c-14.843%2c720.188%2c-4.26%2c713.297%2c6.666C705.725%2c18.672%2c697.529%2c32.897%2c704.313%2c45.365C711.268%2c58.146%2c727.783%2c60.634%2c742.32%2c60.002' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M333.45139365752914 268.25750463654845L382.3058869070322 279.53645312141725 374.79706300958384 200.61523900472832z' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M44.612%2c122.663C58.407%2c122.423%2c66.769%2c108.903%2c73.193%2c96.693C79.049%2c85.562%2c82.63%2c72.757%2c76.705%2c61.662C70.471%2c49.99%2c57.838%2c43.585%2c44.612%2c43.178C30.581%2c42.746%2c15.731%2c47.309%2c8.903%2c59.575C2.21%2c71.599%2c7.474%2c85.744%2c14.252%2c97.72C21.167%2c109.937%2c30.576%2c122.908%2c44.612%2c122.663' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M230.012%2c177.352C246.694%2c176.647%2c261.337%2c167.566%2c270.123%2c153.367C279.455%2c138.286%2c282.891%2c120.08%2c275.396%2c104.007C266.587%2c85.117%2c250.853%2c67.668%2c230.012%2c67.349C208.784%2c67.024%2c191.922%2c83.73%2c182.158%2c102.581C173.209%2c119.859%2c173.072%2c140.639%2c183.561%2c157.028C193.325%2c172.285%2c211.914%2c178.117%2c230.012%2c177.352' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M721.3939383592685 171.74093148040762L698.8628591561916 237.17593678775913 786.82894366662 194.27201068348455z' fill='rgba(154%2c 49%2c 49%2c 0.62)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1048'%3e%3crect width='920' height='280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='17.39%25' y1='-57.14%25' x2='82.61%25' y2='157.14%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1049'%3e%3cstop stop-color='rgba(121%2c 30%2c 30%2c 1)' offset='0.01'%3e%3c/stop%3e%3cstop stop-color='rgba(188%2c 24%2c 59%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
    margin: 0 auto;
    padding: 2vw;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    border-radius: 2vw;
    box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1);
    position: relative;
    top: 0vw;
    margin-top: 10vw;
}

@media (max-width: 768px) {
    .kosik-container {
        max-width: 95%;
        border-radius: 3vw 3vw 3vw 3vw;
    }
}

.kosik-title {
    text-align: center;
    font-size: 3.25vw;
    margin-top: 4vw;
    margin-bottom: 2vw;
    font-weight: 600;
    background-color: rgba(104, 104, 104, 0.15);
    padding: 1vw;
}

@media (max-width: 768px) {
    .kosik-title {
        font-size: 6vw;
        margin-top: 10vw;
        font-weight: 500;
    }
}

.kosik-polozka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0vw;
    padding: 1vw;
    border-bottom: 0.15vw solid #d1d1d1;
}

@media (max-width: 768px) {
    .kosik-polozka {
        padding: 2vw;
        border-bottom: 0.2vw solid #d1d1d1;
    }
}

.kosik-polozka img {
    height: 5vw;
    width: auto;
    margin-left: 1vw;
    margin-right: 1vw;
}

@media (max-width: 768px) {
    .kosik-polozka img {
        height: 13vw;
        margin-left: 3vw;
        padding-right: 1vw;
    }
}

.polozka-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 0.5vw;
    position: relative;
    width: 30%;
}

.polozka-info .nazov {
    font-size: 2vw;
    margin: 0;
}

@media (max-width: 768px) {
    .polozka-info .nazov {
        font-size: 3.5vw;
    }
}

.kosik-polozka .nazov a {
    color: white;
    text-decoration: none;
    transition: color 0.15s ease;
}

.kosik-polozka .nazov a:hover {
    color: #d1d1d1;
}


.kosik-input {
    padding: 0.35vw;
    width: 5vw;
    font-size: 1.25vw;
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    border-radius: 0.5vw;
    text-align: center;
    outline: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    caret-color: white;
    color: white;
}

.kosik-input:hover {
    border-color: #631616c7;
    background-color: #8b00008f;
    cursor: pointer;
    caret-color: white;
}

.kosik-input:focus {
    border-color: #631616c7;
    background-color: #8b00008f;
    cursor: text;
    color: white;
    caret-color: white;
}

.no-spin {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

.no-spin::-webkit-inner-spin-button, 
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 768px) {
    .kosik-input {
        padding: 0.25vw;
        width: 10vw;
        font-size: 3.5vw;
        border: 0.35vw solid #63161685;
        border-radius: 1vw;
        margin-left: -0.65vw;
        margin-right: -0.65vw;
    }
}


.quantity-btn {
    font-size: 1.75vw;
    border-radius: 0.5vw;
    transform: translatey(0.15vw);
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    color: white;
    cursor: pointer;
    width: 2.45vw;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    
}

.quantity-btn:hover {
    border-color: #631616c7;
    background-color: #8b00008f;
}

@media (max-width: 768px) {
    .quantity-btn {
    width: 4.35vw;
    font-size: 4vw;
    border-radius: 1vw;
    transform: translatey(0.15vw);
    border: 0.35vw solid #63161685;
    border-radius: 1vw;
    padding: 0vw;
    background-color: #8b00004f;
    color: white;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    }
}









.polozka-mnozstvo span {
    color: white;
    font-size: 1.25vw;
    width: 3vw;
    text-align: right;
    margin-right: 1vw;
}

@media (max-width: 768px) {
    .polozka-mnozstvo span {
        font-size: 4vw;
        width: 8vw;
    }
    .polozka-mnozstvo {
        font-size: 4vw;
        width: 21vw;
    }
}

.zlava-celkova-cena-container {
    margin-top: 2vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.celkova-cena {
    font-size: 1.15vw;
    font-weight: 400;
    white-space: nowrap;
    color: white;
    margin-right: 2vw;
    margin-top: -3.5vw;
    position: absolute;
    float: right;
    right: 0;
    text-align: right;
}

@media (max-width: 768px) {
    .celkova-cena {
        font-size: 3vw;
        transform: translateY(-2vw);
    }
}

.zmazat-kosik-btn {
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    color: rgb(255 255 255);
    padding: 0.4vw 0.55vw;
    display: flex;
    align-items: center;
    margin-right: 0.5vw;
    margin-top: 0vw;
    margin-bottom: 3vw;
    cursor: pointer;
    border-radius: 0.5vw;
    transform: translateY(0.8vw);
    font-size: 1vw;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zmazat-kosik-btn:hover {
    background-color: #652222;
    color: rgb(255 255 255);
}

.zmazat-kosik-btn i {
    margin-right: 0.5vw;
    font-size: 1.2vw;
}

@media (max-width: 768px) {
    .zmazat-kosik-btn {
        padding: 0.75vw 1.25vw;
        margin-right: 1.5vw;
        border-radius: 1vw;
        font-size: 3vw;
        margin-top: 0vw;
        margin-bottom: 9vw;
        transform: translateY(1.8vw);
    }

    .zmazat-kosik-btn i {
        margin-right: 1vw;
        font-size: 3vw;
    }
}



.cena {
    font-size: 1.35vw;
    font-weight: 600;
    width: 20%;
    text-align: right;
}

@media (max-width: 768px) {
    .cena {
        font-size: 3.5vw;
        width: 25%;
    }
}

.remove-btn {
    color: #f1f0f0;
    font-size: 2vw;
    cursor: pointer;
    margin-right: 1vw;
    transition: transform 0.25s ease;
}

.remove-btn:hover {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .remove-btn {
        font-size: 5vw;
    }
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-title {
      font-size: 10vw;
    }
  
    .banner img {
      width: 100%;
      height: 40vw;
      border-radius: 0vw;
    }
  }


  .bottom-separator {
    height: 3vw;
    width: 100%;
    position: relative;
  }














  .button-continue {
    background-color: #652222;
    color: rgb(255 255 255);
    border: none;
    padding: 0.6vw 1vw;
    border-radius: 0.5vw;
    cursor: pointer;
    font-size: 1.25vw;
    position: absolute;
    right: 0;
    margin-top: -2.65vw;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-right: 1.3vw;
}

@media (max-width: 768px) {
    .button-continue {
        padding: 1.25vw;
        margin-right: 1.5vw;
        border-radius: 1vw;
        font-size: 3vw;
        margin-top: -6vw;
    }
}

.button-continue:hover {
    background-color: #6c2121;
    color: rgb(255 255 255);
}


.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 5vw;
    right: 1.25vw;
    width: 15.35vw;
    border: 0.2vw solid #74202085;
    background-color: #892b2b;
    z-index: 100;
    border-radius: 0.5vw;
    font-size: 1vw;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.dropdown-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu ul li {
    padding: 1vw;
    text-align: center;
    color: #ffffff;
    transition: background-color 0.25s ease;
}

.dropdown-menu ul li:hover {
    background-color: #62242442;
    border-radius: 0.5vw;
}







@media (max-width: 768px) {
    .dropdown-menu {
        bottom: 9vw;
        right: 0vw;
        width: 100%;
        border-radius: 0vw;
        border: 0.65vw solid #74202085;
        font-size: 4vw;
        transition: opacity 0.2s ease, visibility 0s 0.2s;
    }
    
    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }
    
    .dropdown-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .dropdown-menu ul li {
        padding: 3vw;
        text-align: center;
    }
    
    .dropdown-menu ul li:hover {
        border-radius: 0vw;
    }
}


.promo-kod-container input {
    padding: 0.35vw;
    font-size: 1.15vw;
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    border-radius: 0.5vw;
    text-align: center;
    outline: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    caret-color: white;
    color: white;
    margin-top: 2vw;
    transform: translateY(2vw);
    margin-left: -10.6vw;
}

.promo-kod-container input::placeholder {
color: #fafafa;
}

.promo-kod-container input:hover {
        border-color: #631616c7;
    background-color: #8b00008f;
}

.promo-kod-container input:focus {
        border-color: #631616c7;
    background-color: #8b00008f;
}


.promo-kod-container button {
    padding: 0.35vw;
    font-size: 1.15vw;
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    border-radius: 0.5vw;
    text-align: center;
    outline: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    caret-color: white;
    color: white;
    margin-bottom: 2vw;
    margin-left: 0vw;
    transform: translateY(2vw);
    width: 2.35vw;
}

.promo-kod-container button:hover {
    border-color: #631616c7;
    background-color: #8b00008f;
}


/* PROMO KOD UPLATNENY */

.promo-kod-item {
    font-size: 1.15vw;
    border: 0.2vw solid #63161685;
    background-color: #8b00004f;
    border-radius: 0.5vw;
    text-align: center;
    outline: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    caret-color: white;
    color: white;
    margin-left: -10.6vw;
    transform: translateY(2vw);
}

.promo-kod-item[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -2.5vw;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    padding: 0.5vw 1vw;
    border-radius: 0.5vw;
    font-size: 1vw;
    white-space: nowrap;
    z-index: 10;
}

.remove-promo {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5vw;
    padding: 0.1vw 1vw;
    cursor: pointer;
    margin-right: 1vw;
    background-color: #63161685;
    border-radius: 0.35vw 0vw 0vw 0.35vw;
    transition: color 0.2s ease;
}

.remove-promo:hover {
    color: #cacaca;
}

.promo-nazov {
    flex-grow: 1;
    font-size: 1.2vw;
    color: #ffffff;
    margin-right: 1vw;
    font-weight: 100;
}

.promo-zlava {
    font-size: 1.2vw;
    color: #ffffff;
    font-weight: 600;
    margin-right: 1vw;
    padding-left: 1vw;
    border-left: 0.15vw solid #63161685;
}




@media (max-width: 768px) {
    .promo-kod-item {
        font-size: 1.15vw;
        border: 0.2vw solid #63161685;
        background-color: #8b00004f;
        border-radius: 1vw;
        text-align: center;
        outline: none;
        transition: background-color 0.25s ease, border-color 0.25s ease;
        caret-color: white;
        color: white;
        margin-left: -28vw;
        transform: translateY(3.36vw);
    }

    .promo-kod-item[title]:hover::after {
        content: attr(title);
        position: absolute;
        top: -2.5vw;
        left: 50%;
        transform: translateX(-50%);
        background: #000000;
        color: #ffffff;
        padding: 0.5vw 1vw;
        border-radius: 0.5vw;
        font-size: 1vw;
        white-space: nowrap;
        z-index: 10;
    }

    .remove-promo {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 4vw;
        padding: 0.1vw 1vw;
        cursor: pointer;
        margin-right: 1vw;
        background-color: #63161685;
        border-radius: 0.35vw 0vw 0vw 0.35vw;
        transition: color 0.2s ease;
    }

    .remove-promo:hover {
        color: #cacaca;
    }

    .promo-nazov {
        flex-grow: 1;
        font-size: 3vw;
        color: #ffffff;
        margin-right: 1vw;
        font-weight: 100;
    }

    .promo-zlava {
        font-size: 3vw;
        color: #ffffff;
        font-weight: 600;
        margin-right: 2vw;
        padding-left: 2vw;
        border-left: 0.15vw solid #63161685;
    }

    .promo-kod-container input {
        padding: 0.75vw 1.25vw;
        border-radius: 1vw;
        font-size: 3vw;
        
        border: 0.2vw solid #63161685;
        background-color: #8b00004f;
        text-align: center;
        outline: none;
        transition: background-color 0.25s ease, border-color 0.25s ease;
        -moz-appearance: textfield;
        -webkit-appearance: none;
        appearance: none;
        caret-color: white;
        color: white;
        margin-top: 2vw;
        transform: translateY(3.5vw);
        margin-left: -28vw;
    }

    .promo-kod-container input::placeholder {
    color: #fafafa;
    }


    .promo-kod-container button {
        padding: 0.75vw 1.25vw;
        border-radius: 1vw;
        font-size: 3vw;
        
        border: 0.2vw solid #63161685;
        background-color: #8b00004f;
        text-align: center;
        outline: none;
        transition: background-color 0.25s ease, border-color 0.25s ease;
        -moz-appearance: textfield;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
        caret-color: white;
        color: white;
        margin-bottom: 2vw;
        margin-left: 0vw;
        transform: translateY(3.5vw);
        width: 8vw;
    }


    /* PROMO KOD UPLATNENY */

    .promo-kod-item {
        font-size: 3.5vw;
        border: 0.2vw solid #63161685;
        background-color: #8b00004f;
        border-radius: 0.5vw;
        text-align: center;
        outline: none;
        transition: background-color 0.25s ease, border-color 0.25s ease;
        caret-color: white;
        color: white;
        margin-left: -28vw;
        transform: translateY(3.5vw);
    }

    .promo-kod-item[title]:hover::after {
        content: attr(title);
        position: absolute;
        top: -2.5vw;
        left: 50%;
        transform: translateX(-50%);
        background: #000000;
        color: #ffffff;
        padding: 0.5vw 1vw;
        border-radius: 0.5vw;
        font-size: 1vw;
        white-space: nowrap;
        z-index: 10;
    }

    .remove-promo {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 3.5vw;
        padding: 0.1vw 1vw;
        cursor: pointer;
        margin-right: 1vw;
        background-color: #63161685;
        border-radius: 0.35vw 0vw 0vw 0.35vw;
        transition: color 0.2s ease;
    }

    .remove-promo:hover {
        color: #cacaca;
    }

    .promo-nazov {
        flex-grow: 1;
        font-size: 3vw;
        color: #ffffff;
        margin-right: 1vw;
        font-weight: 100;
    }

    .promo-zlava {
        font-size: 3vw;
        color: #ffffff;
        font-weight: 600;
        margin-right: 1vw;
        padding-left: 1vw;
        border-left: 0.15vw solid #63161685;
    }
}