/* Six serum series: dimensional surfaces and a single, ordered entrance. */
#panel-series {
  --serum-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --serum-ink: #183e34;
  --serum-copy: #526b61;
  --serum-muted: #5b7166;
  --serum-accent: #11775c;
  --serum-accent-deep: #185c47;
  --serum-edge: #c5dcd0;
  --serum-shadow: 30, 69, 54;
}

#panel-series .serum-web-intro h2,
#panel-series .serum-web-cards h3 { color: var(--serum-ink) !important; }
#panel-series .serum-web-intro h2 span { color: var(--serum-accent) !important; }
#panel-series .serum-web-intro > p,
#panel-series .serum-proof-copy small,
#panel-series .serum-web-trust small { color: var(--serum-copy) !important; }
#panel-series .serum-proof-copy b,
#panel-series .serum-web-trust b { color: var(--serum-ink) !important; }

#panel-series .serum-web {
  border-color: #d8e9df #cfe3d7 #bfd8ca #e3eee7 !important;
  background:
    radial-gradient(ellipse at 8% 0%, #fff, transparent 58%),
    linear-gradient(138deg, #f9fcfa 10%, #e6f3ec) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 2px 0 0 rgba(255,255,255,.58),
    inset -1px -2px 2px rgba(var(--serum-shadow),.06),
    0 3px 0 -1px #dcece2,
    0 7px 0 -3px #cce0d4,
    0 16px 24px -19px rgba(var(--serum-shadow),.34),
    0 32px 56px -32px rgba(var(--serum-shadow),.2) !important;
}

#panel-series .serum-web-lab {
  padding: 18px !important;
  border-radius: 27px !important;
  background: linear-gradient(145deg, #d6e8dd, #e7f1ea 52%, #dcece2) !important;
  border-color: #b9d4c5 #c9dfd2 #fbfefc #c4dbce !important;
  box-shadow:
    inset 0 3px 5px rgba(var(--serum-shadow),.12),
    inset 2px 0 5px rgba(var(--serum-shadow),.05),
    inset 0 -2px 1px rgba(255,255,255,.95),
    0 1px 0 #fff,
    0 -1px 0 rgba(255,255,255,.65) !important;
}

#panel-series .serum-web-cards { gap: 18px 16px !important; }

#panel-series .serum-web-cards li {
  --serum-entry-delay: calc(var(--series-index, 0) * 70ms);
  --serum-light-x: 50%;
  --serum-light-y: 25%;
  isolation: isolate;
  border-radius: 18px !important;
  border-color: #fff #e4eee8 #cddfd4 #fcfefc !important;
  background:
    radial-gradient(ellipse at 10% 0%, #fff 8%, transparent 65%),
    linear-gradient(145deg, #fffefb 28%, #f8fbf9 75%, #edf6f0) !important;
  box-shadow:
    inset 0 2px 1px #fff,
    inset 2px 0 2px rgba(255,255,255,.86),
    inset -2px -3px 7px rgba(var(--serum-shadow),.04),
    0 2px 0 -1px #eaf4ee,
    0 5px 0 -2px var(--serum-edge),
    0 7px 4px -4px rgba(var(--serum-shadow),.17),
    0 14px 22px -14px rgba(var(--serum-shadow),.28) !important;
  transition: transform .45s var(--serum-motion-ease), border-color .35s ease, box-shadow .45s ease !important;
}

#panel-series .serum-web-cards li > * { position: relative; z-index: 1; }

#panel-series .serum-web-cards li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--serum-light-x) var(--serum-light-y), rgba(255,255,255,.72), rgba(210,235,223,.26) 50%, transparent 78%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* A shallow bevel catches light around the card without covering its copy. */
#panel-series .serum-web-cards li::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  border: 1px solid rgba(255,255,255,.78);
  border-right-color: rgba(216,233,222,.3);
  border-bottom-color: rgba(205,227,214,.38);
  border-radius: 13px;
  background: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
}

#panel-series .serum-series-number {
  display: grid;
  place-items: center;
  min-width: 33px;
  height: 33px;
  border: 1px solid #d7e7dd;
  border-radius: 50%;
  background: linear-gradient(145deg, #e9f2ec, #fcfefc);
  box-shadow: inset 0 2px 3px rgba(var(--serum-shadow),.075), 0 1px 0 #fff;
  color: var(--serum-muted);
  font-size: 13px;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 #fff;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

#panel-series .serum-web-cards p { color: var(--serum-copy) !important; font-size: 15px !important; line-height: 1.8 !important; }
#panel-series .serum-web-cards .serum-product-kind { color: var(--serum-muted); }
#panel-series .serum-web-cards h3 > span:first-child { text-shadow: 0 1px 0 #fff; }
#panel-series .serum-sample-head { min-height: 56px !important; }

#panel-series .serum-web-icon,
#panel-series .serum-web-cards li:hover .serum-web-icon {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border-radius: 16px !important;
  border-color: #fff #c2ddcd #a8cdb8 #f0faf4 !important;
  color: var(--serum-accent-deep) !important;
  background:
    radial-gradient(ellipse at 12% 0%, #fff, transparent 65%),
    linear-gradient(140deg, #edf8f1, #b5dcca) !important;
  box-shadow:
    inset 0 2px 1px #fff,
    inset -1px -3px 3px rgba(var(--serum-shadow),.1),
    0 2px 0 -1px #dcefe2,
    0 5px 0 -2px #aecfbd,
    0 9px 12px -7px rgba(var(--serum-shadow),.3) !important;
  transition: transform .45s var(--serum-motion-ease), box-shadow .4s ease !important;
}

#panel-series .serum-web-icon::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-bottom-color: rgba(109,162,132,.22);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(224,243,232,.24));
  box-shadow: inset 0 1px 1px #fff, inset 0 -3px 5px rgba(var(--serum-shadow),.04);
  pointer-events: none;
}

#panel-series .serum-web-icon svg {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
#panel-series .serum-proof-mark {
  border-radius: 17px !important;
  border-color: #fff #d6e7dc #bfd9c9 #fcfefc !important;
  background: linear-gradient(145deg, #fffefb 16%, #e5f3e9) !important;
  color: var(--serum-accent-deep) !important;
  box-shadow:
    inset 0 2px 1px #fff,
    inset -1px -2px 3px rgba(var(--serum-shadow),.045),
    0 5px 0 -2px var(--serum-edge),
    0 12px 18px -10px rgba(var(--serum-shadow),.26) !important;
}
#panel-series .serum-proof-mark::after {
  content: "";
  display: block !important;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.85);
  border-bottom-color: rgba(187,216,198,.35);
  border-radius: 12px;
  pointer-events: none;
}
#panel-series .serum-proof-mark strong { text-shadow: 0 2px 0 #fff, 0 -1px 0 rgba(var(--serum-shadow),.1); }

#panel-series .serum-web-trust,
#panel-series .serum-web-trust article + article { border-color: rgba(94,139,113,.16) !important; }

#panel-series .serum-web-trust article > span {
  position: relative;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  background: radial-gradient(ellipse at 25% 10%, #fffefb, #dfefe5 85%) !important;
  color: var(--serum-accent) !important;
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -2px 3px rgba(var(--serum-shadow),.05),
    0 4px 0 -2px var(--serum-edge),
    0 9px 14px -8px rgba(var(--serum-shadow),.24) !important;
  transition: transform .4s var(--serum-motion-ease);
}
#panel-series .serum-web-trust article > span::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: inherit;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  #panel-series .serum-web-cards li.serum-in {
    animation: serum-panel-arrive .8s var(--serum-motion-ease) var(--serum-entry-delay) both;
  }
  #panel-series .serum-web-cards li.serum-in .serum-web-icon [data-serum-line] {
    stroke-dasharray: 1;
    animation: serum-panel-draw .95s ease calc(var(--serum-entry-delay) + 180ms + var(--serum-line-delay, 0ms)) both;
  }
  #panel-series .serum-web-trust article.serum-in {
    animation: serum-panel-arrive .7s var(--serum-motion-ease) both;
  }
  #panel-series .serum-web-trust article:nth-child(2).serum-in { animation-delay: 90ms; }
  #panel-series .serum-web-trust article:nth-child(3).serum-in { animation-delay: 180ms; }
  #panel-series .serum-web.in .serum-proof-mark { animation: serum-proof-arrive .85s var(--serum-motion-ease) .24s backwards; }
}

@keyframes serum-panel-arrive {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes serum-panel-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes serum-proof-arrive {
  from { opacity: 0; scale: .9; }
  to { opacity: 1; scale: 1; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #panel-series .serum-web-cards li:hover {
    transform: translateY(-5px) !important;
    border-color: #fff #cbe4d5 #b3d2c0 #e9f5ee !important;
    background: linear-gradient(140deg, #fffefb 25%, #eef8f2) !important;
    box-shadow:
      inset 0 2px 1px #fff,
      inset -2px -3px 7px rgba(var(--serum-shadow),.035),
      0 2px 0 -1px #e9f4ed,
      0 5px 0 -2px #bcd9c9,
      0 9px 7px -6px rgba(var(--serum-shadow),.16),
      0 21px 30px -16px rgba(var(--serum-shadow),.3) !important;
  }
  #panel-series .serum-web-cards li:hover::before { opacity: 1; }
  #panel-series .serum-web-cards li:hover .serum-web-icon { transform: translateY(-2px) scale(1.035) !important; }
  #panel-series .serum-web-cards li:hover .serum-series-number { color: var(--serum-accent-deep); border-color: #bedbcc; background: #e8f5ed; }
  #panel-series .serum-web-trust article:hover > span { transform: translateY(-2px); }
}

@media (max-width: 760px) {
  #panel-series .serum-web-lab { padding: 12px !important; border-radius: 23px !important; }
  #panel-series .serum-web-cards { gap: 16px 12px !important; }
}
@media (max-width: 480px) {
  #panel-series .serum-web-cards li { --serum-entry-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  #panel-series .serum-web-cards li,
  #panel-series .serum-web-icon,
  #panel-series .serum-web-icon [data-serum-line],
  #panel-series .serum-proof-mark,
  #panel-series .serum-web-trust article,
  #panel-series .serum-web-trust article > span {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  #panel-series .serum-web-cards li::before { display: none !important; }
  #panel-series .serum-series-number { transition: none; }
}