/* Produs */

.produs {
  background-color: #f9f9f9;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  transition: box-shadow .25s;
  width: 100%;
  will-change: contents;
}
.produs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.product-labels {
  gap: .5rem;
  pointer-events: none;
}
.produs .product-labels {
  display: grid;
  left: 1rem;
  position: absolute;
  top: 1rem;
}
.product-labels span::before {
  border-radius: .5rem;
  color: #ffffff;
  font-size: .75rem;
  padding: .25rem .5rem;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.product-labels .label-nou::before {
  background-color: var(--lmd-blue, navy);
  content: var(--text-label-produs-nou);
}
.product-labels .label-oferta::before {
  background-color: var(--lmd-red, red);
  content: var(--text-label-oferta);
}
.product-labels .label-stoc::before {
  background-color: olive;
  content: var(--text-label-produs-stoc);
}
.product-labels .label-inactiv::before {
  background-color: darkslategray;
  content: 'Inactiv';
}
.produs .imagine-produs {
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
}
.produs .imagine-produs {
  aspect-ratio: 4 / 3;
}
.produs .imagine-produs img {
  display: block;
  height: 100%;
  margin-inline: auto;
  max-width: 100%;
  transition: transform .25s;
  width: auto;
}
.produs .imagine-produs img::before {
  background-color: #ffffff;
  background-image: var(--produs-fara-imagine-bg);
  background-position: center center;
  background-size: auto 100%;
  border-radius: 1rem 1rem 0 0;
  content: '';
  display: grid;
  height: 100%;
  left: 0;
  place-content: center;
  position: absolute;
  top: 0;
  width: 100%;
}
.produs:hover .imagine-produs img {
  transform: scale(1.1);
}
.produs a:first-child {
  grid-column: 1 / 3;
}
.produs h3 {
  font-size: 1rem;
  grid-column: 1 / 3;
  margin-block: 1rem auto;
  padding-inline: 1rem;
}
.produs h3 a {
  -webkit-box-orient: vertical;
  color: var(--lmd-blue);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: none;
  text-wrap: balance;
}
.produs .pret-produs, .produs .cod-produs {
  color: var(--lmd-blue, navy);
  display: grid;
  font-size: .8rem;
  margin-top: auto;
  padding: 1rem;
}
.produs .pret-produs strong {
  filter: invert(46%) sepia(97%) saturate(4623%) hue-rotate(338deg) brightness(85%) contrast(119%);
  white-space: nowrap;
}
.safari .produs .pret-produs strong {
  color: var(--lmd-red, red);
  filter: none;
}
.produs .pret-produs strong, .produs .cod-produs strong {
  font-size: 1rem;
}
.produs .cod-produs {
  grid-column: 2 / 3;
  text-align: right;
}
.produs > .buton-cere-oferta {
  align-items: center;
  background-image: linear-gradient(to right, #233d7f 10%, #3985e0);
  background-position: right;
  background-size: 150%;
  border: 0;
  border-radius: .5rem;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: .9rem;
  gap: .5rem;
  grid-column: 1 / 3;
  height: 2.25rem;
  justify-content: center;
  margin: auto 1rem 1rem;
  text-decoration: none;
  transition: background-position .5s;
}
.produs > .buton-cere-oferta img {
  pointer-events: none;
}
.produs > .buton-cere-oferta:hover {
  background-position: left;
}
.produs .icon {
  height: 60%;
  transition: scale .25s;
}
.produs .icon.cart {
  filter: invert(1);
  height: 60%;
  max-width: 100%;
  transition: scale .25s;
  width: auto;
}
.produs > .buton-cere-oferta:hover img {
  scale: 1.1;
}
@media (max-width: 768px) {
  .produs .imagine-produs img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 600px) {
  .lista-produse .produs {
    display: grid;
    grid-template-rows: 1fr auto auto;
  }
  .lista-produse .produs .buton-cere-oferta {
    gap: 0;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    margin-inline: 0 1rem;
    padding-inline: 1rem;
  }
  .lista-produse .produs a:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
  }
  .lista-produse .produs .product-labels {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 1 / 2;
  }
  .lista-produse .produs .product-labels .label-inactiv {
    left: -.5rem;
    position: absolute;
    transform: translateX(-100%);
  }
  .lista-produse .produs .pret-produs {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    padding-top: 0;
  }
  .lista-produse .produs .pret-produs strong {
    font-size: 1rem;
  }
  .lista-produse .produs .cod-produs {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    justify-content: space-between;
  }
  .lista-produse .produs .cod-produs > span {
    align-items: center;
    display: inline-flex;
    max-width: 28px;
    overflow: hidden;
    white-space: nowrap;
  }
  .lista-produse > .produs h3 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
  }
  .lista-produse > .produs .product-labels + h3 {
    margin-top: 1rem;
  }
}
.fara-produse {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
}
.buton-cere-oferta.clicked {
  overflow: hidden;
  position: relative;
}
.buton-cere-oferta.clicked::before {
  align-items: center;
  animation: addedToCart 2s linear forwards;
  background-color: var(--lmd-red, red);
  border-radius: .5rem;
  color: white;
  content: 'Adăugat în coș';
  display: inline-flex;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
}
@keyframes addedToCart {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  20% {
    clip-path: inset(0 0 0 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.lista-produse .produs {
  display: block;
  transition: box-shadow .25s, border .25s;
}
.lista-produse:not(.list) .produs {
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
}
.lista-produse .produs:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--lmd-blue, navy);
}
.lista-produse .produs h3 {
  font-size: .85rem;
  margin-bottom: unset;
  min-height: 2rem;
}
.produs h3 a {
  text-align: center;
}
.cod-prod {
  align-items: center;
  display: flex;
  font-size: .75rem;
  gap: .25rem;
  height: 2.5rem;
  justify-content: center;
  padding-inline: 1rem;
  position: relative;
  white-space: nowrap;
}
.cod-prod.cu-variante::after {
  bottom: 0;
  color: #090;
  content: var(--text-label-variante);
  font-weight: bold;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 25%);
  text-transform: uppercase;
}
.list .cod-prod.cu-variante::after {
  bottom: unset;
  left: 1rem;
  top: -.25rem;
  transform: none;
}
.cod-prod svg {
  height: 1.25rem;
  margin-top: -.125rem;
  width: auto;
}
.cod-prod svg.inactiv-intranet {
  display: none;
}
.marcaje-inactiv {
  bottom: .5rem;
  display: inline-flex;
  gap: .5rem;
  position: absolute;
  right: .5rem;
}
.marcaje-inactiv span {
  cursor: help;
}
.marcaje-inactiv svg {
  height: auto;
  width: 1.25rem;
}
.produs .descriere-produs {
  font-size: .75rem;
  line-height: 1.5;
  margin-bottom: auto;
  margin-top: .5rem;
  min-height: unset;
  padding-inline: 1rem;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.produs .descriere-produs p {
  margin: 0;
}
.produs .descriere-produs p:empty {
  display: none;
}
.produs .buttons-wrapper {
  position: relative;
}
.produs .buttons-wrapper .buton-cere-oferta {
  gap: 0;
  appearance: none;
  background-color: var(--lmd-blue, navy);
  background-image: none;
  border: 0;
  border-radius: .5rem;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: .625rem;
  height: unset;
  outline: none;
  padding: .5rem .75rem;
  text-transform: uppercase;
  transition: background-color .25s;
}
.produs .buttons-wrapper .buton-cere-oferta:not(:disabled):hover {
  background-color: #4285F4;
}
.produs .buttons-wrapper .buton-cere-oferta:disabled {
  opacity: .75;
  cursor: default;
}
.produs .buttons-wrapper .buton-cere-oferta > img {
  display: none;
}
.produs .cere-informatii {
  float: unset;
  margin-right: unset;
  appearance: none;
  background-color: #000000;
  background: linear-gradient(to right, #aaaab7, #aaaab7);
  border-radius: .5rem;
  border: 0;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-size: .625rem;
  gap: .5rem;
  outline: none;
  padding: .5rem .75rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .25s;
}
.cere-informatii:hover {
  background: linear-gradient(to right, #676767, #676767);
}
.produs .pret-stoc-wrapper {
  display: flex;
  justify-content: space-between;
}
.produs .stoc-produs {
  color: var(--lmd-blue, navy);
  display: grid;
  font-size: .8rem;
  padding: 1rem;
  text-align: right;
}
.produs .pret-stoc-wrapper .stoc-produs:first-child {
  margin-left: auto;
}
.produs .stoc-produs strong {
  text-transform: uppercase;
}
.produs .stoc-produs.pe-stoc strong {
  filter: invert(44%) sepia(100%) saturate(2419%) hue-rotate(57deg) brightness(97%) contrast(101%);
}
.safari .produs .stoc-produs.pe-stoc strong {
  color: #559f00;
  filter: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .produs .pret-produs strong {
    color: var(--lmd-red, red);
    filter: none;
  }
  .produs .stoc-produs.pe-stoc strong {
    color: #559f00;
    filter: none;
  }
}
.produs:has(.pret-produs) .descriere-produs {
  min-height: unset;
  -webkit-line-clamp: 4;
}
.lista-produse.grid > .produs .product-labels,
.lista-produse .produs .product-labels {
  left: 0;
}
.produs .product-labels span::before {
  border-radius: 0;
}
.produs .product-labels span.label-nou::before {
  background-color: #4285F4;
}
.produs .product-labels span.label-inactiv::before {
  display: none;
}
.buttons-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding-block-end: 1rem;
  padding-inline: 1rem;
}
.lista-produse .produs {
  display: block;
}
.lista-produse .produs .pret-produs,
.lista-produse .produs .stoc-produs {
  padding: 1rem 1rem 0;
}
.lista-produse .produs .stoc-produs:first-child {
  margin-left: auto;
}
.lista-produse .produs .pret-produs strong:empty::before {
  content: 'Nespecificat';
  font-size: .8rem;
  text-transform: uppercase;
}
.lista-produse .produs .pret-produs s {
  font-size: .9rem;
  font-weight: bold;
  padding-inline-start: .5rem;
}

/* List */

.lista-produse.list .produs {
  border: 1px solid #cccccc;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  grid-template-rows: 2rem auto 1rem 1fr;
  row-gap: .5rem;
}
.lista-produse.list .produs > a:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 5;
}
.lista-produse.list > .produs .product-labels {
  padding: 0;
}
.lista-produse.list > .produs .product-labels + h3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  margin-top: 0;
}
.lista-produse.list > .produs .product-labels + h3 a {
  text-align: left;
}
.lista-produse.list > .produs .cod-prod {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  justify-content: flex-start;
}
.lista-produse.list > .produs .descriere-produs {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
.lista-produse.list .pret-stoc-wrapper {
  flex-direction: column;
  grid-row: 1 / 4;
  text-align: right;
}
.lista-produse.list .pret-stoc-wrapper .stoc-produs {
  order: -1;
}
.lista-produse.list .buttons-wrapper {
  gap: .5rem;
  grid-row: 4 / 5;
  margin-top: auto;
}
.lista-produse.list > .produs .pret-produs {
  padding-block-start: 1rem;
}
.product-operations {
  display: grid;
  gap: .5rem;
  position: absolute;
  right: .5rem;
  top: .5rem;
}
.product-operations label {
  cursor: pointer;
  display: inline-flex;
  padding: .5rem;
}
@media (max-width: 600px) {
  /* .mobile .lista-produse > .produs .product-labels + h3 { */
  .lista-produse > .produs .product-labels + h3 {
    margin-top: 1rem;
  }
}
.lista-produse.list .product-operations {
  left: 165px;
  right: unset;
}

/* Lista produse */

.lista-produse {
  background-color: #fff;
  display: grid;
  gap: var(--product-list-spacing);
  margin: 0;
  padding: .5rem;
}
.lista-produse:not(.list) {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--product-min-width), 100%), 1fr));
}

.produs-favorit {
  appearance: none;
  background: #ffffff url(/website/images/icons/heart.svg) center center / contain no-repeat;
  border: 0;
  color: rgba(234, 37, 42, 0);
  cursor: pointer;
  filter: grayscale(1);
  height: 1.25rem;
  margin: 0 auto;
  transition: filter .25s;
  width: 1.25rem;
}
.produs-favorit:not(:checked):hover {
  filter: grayscale(0);
}
.produs-favorit:checked {
  background-image: url(/website/images/icons/heart-full.svg);
  filter: grayscale(0);
}