.hayat-problem__grid{display:grid;grid-template-areas:"head" "drops" "panel";gap:24px}.hayat-problem__head{grid-area:head;display:grid;gap:12px}.hayat-problem__intro{max-width:34em}.hayat-problem__drops{grid-area:drops;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;align-items:start}.hayat-problem__drop{display:grid;justify-items:center;gap:8px;padding:4px 2px;border:0;border-radius:var(--hayat-radius-small);background:none;color:var(--hayat-navy);font-family:var(--hayat-font);letter-spacing:0;cursor:pointer}.hayat-problem__drop:nth-child(3n+2){margin-top:26px}.hayat-problem__drop:focus-visible{outline:2px solid var(--hayat-link);outline-offset:2px}.hayat-problem__drop-art{display:block;width:min(100%,96px);transition:transform var(--hayat-ease),filter var(--hayat-ease)}.hayat-problem__drop:hover .hayat-problem__drop-art{transform:translateY(-3px)}.hayat-problem__drop[aria-pressed=true] .hayat-problem__drop-art{filter:drop-shadow(0 6px 12px rgba(var(--hayat-sky-rgb),.55));animation:hayat-problem-pop .45s ease-out}.hayat-problem__drop-name{color:var(--hayat-link);font-size:14px;font-weight:var(--hayat-weight-semibold);line-height:1.35;text-align:center}.hayat-problem__drop[aria-pressed=true] .hayat-problem__drop-name{color:var(--hayat-navy);font-weight:var(--hayat-weight-bold)}.hayat-wdrop{display:block;width:100%;height:auto;overflow:visible}.wd-outline{fill:none;stroke:var(--hayat-sky);stroke-width:2.5;transition:stroke var(--hayat-ease),stroke-width var(--hayat-ease)}.hayat-problem__drop[aria-pressed=true] .wd-outline{stroke:var(--hayat-navy);stroke-width:3}.wd-shine{fill:none;stroke:var(--hayat-white);stroke-width:5;stroke-linecap:round;opacity:.9}.wd-murk{fill:rgba(var(--hayat-muted-rgb),.25)}.wd-grain circle,.wd-grain path{fill:var(--hayat-muted)}.wd-grain--dark circle,.wd-grain--dark path{fill:var(--hayat-navy);fill-opacity:.35}.wd-flake path{fill:var(--hayat-muted);stroke:var(--hayat-navy);stroke-opacity:.35;stroke-width:.8}.wd-flake--light path{fill:var(--hayat-navy);fill-opacity:.25;stroke:none}.wd-wave{fill:none;stroke:var(--hayat-muted);stroke-width:3;stroke-linecap:round}.wd-strand{fill:none;stroke:var(--hayat-link);stroke-width:2.2;stroke-linecap:round;stroke-opacity:.75}.wd-leaf ellipse{fill:var(--hayat-sky);stroke:var(--hayat-link);stroke-width:.8}.wd-microbe rect,.wd-microbe ellipse,.wd-microbe circle{fill:var(--hayat-white);stroke:var(--hayat-navy);stroke-opacity:.65;stroke-width:1.3}.wd-tail path{fill:none;stroke:var(--hayat-navy);stroke-opacity:.6;stroke-width:1.3;stroke-linecap:round}.wd-nucleus circle{fill:var(--hayat-link)}.wd-bubble circle{fill:none;stroke:var(--hayat-link);stroke-opacity:.55;stroke-width:1.3}.wd-bond{fill:none;stroke:var(--hayat-link);stroke-width:2}.wd-atom circle{fill:var(--hayat-white);stroke:var(--hayat-link);stroke-width:1.8}.wd-atom-label{fill:var(--hayat-navy);font-family:var(--hayat-font);font-size:7.5px;font-weight:var(--hayat-weight-bold)}.hayat-problem__panel{grid-area:panel;display:grid;padding:20px;border-radius:var(--hayat-radius-card);background:var(--hayat-card)}.hayat-problem__info{grid-area:1 / 1;display:grid;gap:8px;visibility:hidden}.hayat-problem__info.is-active{visibility:visible}.hayat-section--tint .hayat-problem__panel{background:var(--hayat-white)}.hayat-problem__effects-label{margin:6px 0 0;color:var(--hayat-link);font-family:var(--hayat-font);font-size:14px;font-weight:var(--hayat-weight-bold)}.hayat-problem__effects{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.hayat-problem__effect{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:var(--hayat-radius-pill);background:var(--hayat-white);color:var(--hayat-navy);font-family:var(--hayat-font);font-size:14px;font-weight:var(--hayat-weight-semibold);line-height:1.4}.hayat-section--tint .hayat-problem__effect{background:var(--hayat-card)}.hayat-problem__effect-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f3f2ef;box-shadow:inset 0 0 0 1.5px var(--hayat-muted)}.hayat-problem__effect-icon .hayat-icon{width:17px;height:17px}.hayat-problem__info.is-active .hayat-problem__effect{animation:hayat-problem-chip .35s ease-out both}.hayat-problem__info.is-active .hayat-problem__effect:nth-child(2){animation-delay:.06s}.hayat-problem__info.is-active .hayat-problem__effect:nth-child(3){animation-delay:.12s}.hayat-problem__note{grid-column:1 / -1;margin:0;color:var(--hayat-link);font-family:var(--hayat-font);font-size:13px;line-height:1.7}@keyframes hayat-problem-chip{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes hayat-problem-pop{0%{transform:scale(.94)}60%{transform:scale(1.06)}to{transform:scale(1)}}@media screen and (min-width:750px){.hayat-problem__drops{gap:18px 16px}.hayat-problem__drop-art{width:min(100%,112px)}.hayat-problem__drop-name{font-size:15px}}@media screen and (min-width:990px){.hayat-problem__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head drops" "panel drops";grid-template-rows:auto 1fr;column-gap:64px;row-gap:24px}.hayat-problem__drops{align-self:center}.hayat-problem__panel{align-self:start;padding:24px}}.hayat-problem__grid>.hayat-cta{grid-column:1 / -1;margin-top:4px}@media(prefers-reduced-motion:reduce){.hayat-problem__drop-art,.wd-outline{transition:none}.hayat-problem__drop:hover .hayat-problem__drop-art{transform:none}.hayat-problem__drop[aria-pressed=true] .hayat-problem__drop-art,.hayat-problem__info.is-active .hayat-problem__effect{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/hayat-water-problem.css.map */