/* Product collection: editorial layout based on the Wellumina collection presentation. */
.product-grid {
  grid-template-columns: 1fr 1.34fr 1fr;
  grid-template-rows: repeat(2, 277px);
  grid-template-areas:
    "master wellcolor gerbazid"
    "oxid wellcolor care";
  gap: 24px;
}

.product-card,
.product-featured {
  grid-column: auto;
  min-height: 0;
  border-radius: 12px;
  background: #dcdcdc;
  color: #25272a;
  justify-content: flex-start;
}

.product-card:nth-child(1) { grid-area: wellcolor; }
.product-card:nth-child(2) { grid-area: master; background: #f5d9b4; }
.product-card:nth-child(3) { grid-area: oxid; }
.product-card:nth-child(4) { grid-area: gerbazid; }
.product-card:nth-child(5) { grid-area: care; background: #f5d9b4; }
.product-card::after { display: none; }

.product-card img {
  inset: auto 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  mix-blend-mode: multiply;
}

.product-card:hover img { transform: none; }

.product-masterblond {
  background: #f5d9b4;
}

.product-masterblond img {
  width: 61%;
  height: auto;
  right: -12%;
  bottom: -10%;
  object-fit: contain;
  object-position: right bottom;
  mix-blend-mode: normal;
  transition: transform .45s ease;
}

.product-masterblond:hover img { transform: translate(-16px, -12px); }
.product-masterblond .product-info {
  max-width: 54%;
  justify-content: space-between;
}
.product-masterblond .product-info h3,
.product-masterblond .product-info > p,
.product-masterblond .product-info a { margin: 0; }

.product-wellcolor {
  background: #dedede;
}

.product-wellcolor .product-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.product-wellcolor .product-visual img {
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
}

.product-wellcolor .wellcolor-pack {
  width: 52%;
  right: 4%;
  bottom: -9%;
  transform: rotate(10deg);
}

.product-wellcolor .wellcolor-tube {
  width: 47%;
  right: 43%;
  bottom: -4%;
  transform: rotate(-18deg);
  transform-origin: 70% 85%;
}

.product-wellcolor.visible .wellcolor-pack {
  animation: wellcolor-pack-in .85s cubic-bezier(.2,.75,.25,1) .12s both;
}

.product-wellcolor.visible .wellcolor-tube {
  animation: wellcolor-tube-in .8s cubic-bezier(.2,.75,.25,1) .34s both;
}

.product-wellcolor:hover .wellcolor-pack { transform: translateY(-7px) rotate(7deg); }
.product-wellcolor:hover .wellcolor-tube { transform: translate(-7px, -10px) rotate(-14deg); }
.product-wellcolor .product-info { max-width: 44%; justify-content: space-between; }
.product-wellcolor .product-info h3,
.product-wellcolor .product-info > p,
.product-wellcolor .product-info a { margin: 0; }

@keyframes wellcolor-pack-in {
  from { opacity: 0; transform: translate(70px, 55px) rotate(28deg); }
  to { opacity: 1; transform: rotate(10deg); }
}

@keyframes wellcolor-tube-in {
  from { opacity: 0; transform: translate(-70px, 70px) rotate(-56deg); }
  to { opacity: 1; transform: rotate(-18deg); }
}

.product-prof-oxid {
  background: #d8d8d8;
}

.product-prof-oxid img {
  width: 44%;
  height: auto;
  right: 0;
  bottom: -18%;
  object-fit: contain;
  object-position: right bottom;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}

.product-prof-oxid:hover img { transform: translate(-10px, -10px); }
.product-prof-oxid .product-info { max-width: 57%; justify-content: space-between; }
.product-prof-oxid .product-info h3,
.product-prof-oxid .product-info > p,
.product-prof-oxid .product-info a { margin: 0; }

.product-gerbazid {
  background: #dedede;
}

.product-gerbazid img {
  width: 43%;
  height: auto;
  right: -4%;
  bottom: -17%;
  object-fit: contain;
  object-position: right bottom;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}

.product-gerbazid:hover img { transform: translate(-10px, -10px); }
.product-gerbazid .product-info { max-width: 61%; justify-content: space-between; }
.product-gerbazid .product-info h3 { font-size: 23px; }
.product-gerbazid .product-info h3,
.product-gerbazid .product-info > p,
.product-gerbazid .product-info a { margin: 0; }

.product-color-care {
  background: #f5d9b4;
}

.product-color-care img {
  width: 47%;
  height: auto;
  right: -3%;
  bottom: -16%;
  object-fit: contain;
  object-position: right bottom;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}

.product-color-care:hover img { transform: translate(-10px, -10px); }
.product-color-care .product-info { max-width: 62%; justify-content: space-between; }
.product-color-care .product-info > p { font-size: 14px; }
.product-color-care .product-info h3,
.product-color-care .product-info > p,
.product-color-care .product-info a { margin: 0; }

.product-info {
  padding: 32px 22px;
  max-width: 64%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
  z-index: 2;
}

.product-featured .product-info { max-width: 60%; padding: 36px 22px; }
.product-info h3 { font-size: 25px; line-height: 1.02; letter-spacing: -.045em; margin: 0 0 31px; }
.product-featured .product-info h3 { font-size: 30px; }
.product-info > p:not(.product-number) { font-size: 15px; line-height: 1.3; color: #383a3d; margin: 0; max-width: 255px; }
.product-info a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px 10px 15px;
  border: 1px solid #e31b24;
  border-radius: 99px;
  color: #e31b24;
  font-size: 14px;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -.02em;
  font-weight: 800;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.product-info a:hover { background: #e31b24; color: #fff; transform: translateY(-2px); }
.product-info a b { font-size: 22px; line-height: 12px; margin-left: 0; }
.product-number { display: none; }

.catalog-top .catalog-label {
  max-width: 315px;
  margin: 0;
  padding: 15px 18px;
  background: #d6101f;
  color: #fff;
  font-size: 13px;
  line-height: 1.42;
  border-radius: 0 10px 10px 10px;
}

@media (max-width: 800px) {
  .product-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; gap: 14px; }
  .product-card, .product-featured, .product-card:nth-child(n) { grid-area: auto; min-height: 340px; }
  .product-featured { min-height: 430px; }
  .product-info, .product-featured .product-info { padding: 25px 20px; max-width: 68%; }
  .product-info h3, .product-featured .product-info h3 { font-size: 25px; margin-bottom: 23px; }
  .catalog-top .catalog-label { margin-top: 22px; }
  .product-masterblond .product-info { max-width: 62%; }
  .product-masterblond img { width: 72%; right: -17%; bottom: -8%; }
  .product-wellcolor .product-visual { width: 64%; }
  .product-wellcolor .product-info { max-width: 53%; }
  .product-wellcolor .wellcolor-pack { width: 54%; right: -2%; bottom: -6%; }
  .product-wellcolor .wellcolor-tube { width: 46%; right: 43%; bottom: -2%; }
  .product-prof-oxid .product-info { max-width: 61%; }
  .product-prof-oxid img { width: 54%; bottom: -13%; }
  .product-gerbazid .product-info { max-width: 62%; }
  .product-gerbazid img { width: 51%; bottom: -12%; }
  .product-color-care .product-info { max-width: 63%; }
  .product-color-care img { width: 57%; bottom: -10%; }
}

/* One consistent typographic rhythm across all product cards. */
.product-card .product-info {
  justify-content: flex-start;
}

.product-card .product-info h3 {
  margin: 0 0 13px;
}

.product-card .product-info > p:not(.product-number) {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.product-card .product-info a {
  margin-top: auto;
}