.discount {
  transition: -webkit-transform 500ms cubic-bezier(0.2, 0.6, 0.3, 1);
  transition: transform 500ms cubic-bezier(0.2, 0.6, 0.3, 1);
  transition: transform 500ms cubic-bezier(0.2, 0.6, 0.3, 1), -webkit-transform 500ms cubic-bezier(0.2, 0.6, 0.3, 1);
  background-color: #ffffff;
  bottom: 0;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2);
  left: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  z-index: 2147483647;
}

@media only screen and (min-width: 66.25em) {
  .discount {
    padding: 2rem 1rem;
  }
}

.discount::before {
  transition: opacity 500ms cubic-bezier(0.2, 0.6, 0.3, 1), visibility 500ms cubic-bezier(0.2, 0.6, 0.3, 1);
  background: rgba(59, 62, 77, 0.8);
  bottom: 100%;
  content: "";
  height: 100dvh;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  visibility: hidden;
}

.discount.is-active {
  -webkit-transform: translate(0);
  transform: translate(0);
}

  .discount.is-active::before {
    opacity: 1;
    visibility: visible;
  }

.discount__container {
  margin: 0 auto;
  max-width: 50rem;
  position: relative;
}

.discount__form {
  align-items: center;
  display: flex;
  width: 100%;
}

  .discount__form .field {
    flex-grow: 1;
  }

  .discount__form .field--style-outline .field__helper {
    border-bottom-right-radius: 0;
    border-right: 0;
    border-top-right-radius: 0;
  }

  .discount__form .button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    flex-shrink: 0;
  }

.discount__close {
  position: absolute;
  top: 0;
  right: 0;
}

  .discount__close.button--size-m {
    min-height: 1.875rem;
    min-width: 1.875rem;
  }

@media only screen and (min-width: 66.25em) {
  .discount__close.button--size-m {
    min-height: 2.5rem;
    min-width: 2.5rem;
  }
}

.discount .check {
  font-size: 0.875rem;
}

.highlight-before::before {
    right: 100%;
}

.highlight-before::before, .highlight-before::after {
    background-color: #fffcf1;
    bottom: 0;
    content: '';
    position: absolute;
    top: 0;
    width: 100vw;	
}
	
img.digitalni-sadrzaj {
		float: left; 
		max-width: 20% !important;
		margin: 0 10px 0 0;
}

@media (max-width: 34em) {
	img.digitalni-sadrzaj{
		float:left; 
		max-width:30% !important;
		margin: 0 10px 0 0;
}
}

/* Share buttons (Podijeli s prijateljima) - brand backgrounds; without them the white icon sat on a white background */
.share__buttons-button--color-facebook {
    background: #1877f2
}

    .share__buttons-button--color-facebook:hover {
        background: #0d5fc7
    }

.share__buttons-button--color-whatsapp {
    background: #25d366
}

    .share__buttons-button--color-whatsapp:hover {
        background: #1da851
    }

/* Portal home offer (Home/Partials/Offers.cshtml): the shop list card look (ProductModulePartial-angular).
   The portal does not load shop.css, so the rules it needs are copied from there, scoped to this block. */
.offer--home .product__thumbnail {
    position: relative;
}

/* discount ribbon - shop.css .ribbon / --gradient-piper-tall-poppy / --size-m / --position-bottom-left */
.offer--home .ribbon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    background: #ce4e27;
    background: linear-gradient(to bottom, #ce4e27 0%, #c53627 100%);
    color: #ffffff;
    height: 3.375rem;
    width: 3.375rem;
    bottom: 0;
    left: 0;
    position: absolute;
}

.offer--home .ribbon .paragraph {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

@media only screen and (min-width: 66.25em) {
    .offer--home .ribbon {
        height: 4rem;
        width: 4rem;
    }
}

/* medal ("Best buy") - shop.css .label / --gradient-bright-gray-charade / --size-l, top left of the image */
.offer--home .offer__medal .label {
    align-items: center;
    border-radius: 0.25rem;
    display: inline-flex;
    font-weight: 700;
    text-transform: uppercase;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

.offer--home .offer__medal .label--gradient-bright-gray-charade {
    background: #3b3e4d;
    background: linear-gradient(to bottom, #3b3e4d 0%, #282a36 100%);
    color: #ffffff;
}

.offer--home .offer__medal .label--gradient-piper-tall-poppy {
    background: #ce4e27;
    background: linear-gradient(to bottom, #ce4e27 0%, #c53627 100%);
    color: #ffffff;
}

.offer--home .offer__medal .label--gradient-ecstasy-tango {
    background: #f6861f;
    background: linear-gradient(to bottom, #f6861f 0%, #f16d22 100%);
    color: #ffffff;
}

.offer--home .offer__medal .label--size-l {
    font-size: 0.813rem;
    height: 2.125rem;
    padding: 0 0.875rem;
}

.offer--home .offer__medal .color--amber {
    color: #ffc006;
}

.offer--home .offer__medal .margin--left-xxs {
    margin-left: 0.25rem;
}

/* price - shop.css .products--style-list .products__product-content-price */
.offer--home .offer__price {
    color: #3b3e4d;
    font-size: 0.813rem;
    padding-top: 0.5rem;
}

.offer--home .offer__price li:empty {
    display: none;
}

@media only screen and (min-width: 34em) {
    .offer--home .offer__price li:empty {
        display: block;
    }
}

.offer--home .offer__price li:nth-child(2) {
    font-size: 1.125rem;
    font-weight: 700;
}

.offer--home .offer__price .color--tall-poppy {
    color: #c53627;
}