.hayat-layers__grid{display:grid;grid-template-areas:"head" "visual" "card" "cta";gap:24px}.hayat-layers__head{grid-area:head;display:grid;gap:12px;justify-items:start}.hayat-layers__intro{max-width:32em}.hayat-layers__journey{margin:0}.hl-when{display:none;align-items:center;gap:8px}.hl-when .hayat-icon{width:18px;height:18px}[data-journey-state=idle] .hl-when--idle,[data-journey-state=playing] .hl-when--playing,[data-journey-state=paused] .hl-when--paused,[data-journey-state=done] .hl-when--done{display:inline-flex}.hayat-layers__visual{grid-area:visual;min-width:0}.hayat-layers__stack{--stage-w: clamp(60px, 18cqi, 130px);--col-gap: clamp(8px, 2.5cqi, 16px);--cyl-w: min(250px, calc(100cqi - var(--stage-w) - 2 * var(--col-gap) - 46px));--band-h: max(16px, calc(var(--cyl-w) * .072));--path-x: calc(var(--stage-w) + var(--col-gap) + var(--cyl-w) / 2);container-type:inline-size;position:relative;max-width:600px;margin-inline:auto}.hayat-layers__part{position:relative;z-index:3;width:var(--cyl-w);margin-inline-start:calc(var(--stage-w) + var(--col-gap))}.hayat-layers__part--top{margin-bottom:14px}.hayat-layers__part--bottom{margin-top:14px}.hayat-housing{display:block;width:100%;height:auto;overflow:visible}.hs-body{fill:var(--hayat-white);stroke:var(--hayat-navy);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}.hs-ribs path{fill:var(--hayat-tint);stroke:var(--hayat-navy);stroke-opacity:.4;stroke-width:1;vector-effect:non-scaling-stroke}.hs-line{fill:none;stroke:var(--hayat-navy);stroke-opacity:.25;stroke-width:1;vector-effect:non-scaling-stroke}.hs-hole,.hs-opening{fill:var(--hayat-navy);fill-opacity:.5}.hs-opening{fill-opacity:.1;stroke:var(--hayat-navy);stroke-opacity:.3;stroke-width:1;vector-effect:non-scaling-stroke}.hs-logo{fill:var(--hayat-navy);font-family:var(--hayat-font);font-size:15px;font-weight:var(--hayat-weight-semibold)}.hayat-layers__rim{width:calc(var(--cyl-w) * .86);margin-inline-start:calc(var(--stage-w) + var(--col-gap) + var(--cyl-w) * .07)}.hayat-core-rim{display:block;width:100%;height:auto;overflow:visible}.cr-wall{fill:var(--hayat-white)}.cr-edge{fill:none;stroke:var(--hayat-navy);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}.cr-edge-fill{stroke:var(--hayat-navy);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}.cr-line{fill:none;stroke:var(--hayat-navy);stroke-opacity:.2;stroke-width:1;vector-effect:non-scaling-stroke}.cr-mesh-base{fill:var(--hayat-tint);stroke:var(--hayat-navy);stroke-opacity:.3;stroke-width:1;vector-effect:non-scaling-stroke}.cr-mesh-line{fill:none;stroke:var(--hayat-link);stroke-opacity:.55;stroke-width:.5}.hayat-layers__stage{display:grid;grid-template-columns:var(--stage-w) minmax(0,1fr);column-gap:var(--col-gap)}.hayat-layers__stage-title{display:flex;flex-direction:column;justify-content:center;gap:2px;margin:3px 0;padding-inline-end:8px;border-inline-end:2px solid var(--hayat-line);color:var(--hayat-link);font-family:var(--hayat-font);line-height:1.3;transition:border-color var(--hayat-ease),color var(--hayat-ease)}.hayat-layers__stage-num{font-size:10px;font-weight:var(--hayat-weight-semibold)}.hayat-layers__stage-name{font-size:11px;line-height:1.25;font-weight:var(--hayat-weight-bold);color:var(--hayat-navy);opacity:.55;transition:opacity var(--hayat-ease)}.hayat-layers__stage.is-active .hayat-layers__stage-title{border-color:var(--hayat-sky)}.hayat-layers__stage.is-active .hayat-layers__stage-name{opacity:1}.hayat-layers__stage--plain .hayat-layers__stage-title{border-color:transparent}.hayat-layers__rows{display:grid;margin:0;padding:0;list-style:none}.hayat-layers__rows>li{display:grid}.hayat-layer{display:grid;grid-template-columns:var(--cyl-w) minmax(0,1fr);column-gap:var(--col-gap);align-items:stretch;width:100%;min-height:var(--band-h);padding:0;border:0;background:none;color:var(--hayat-navy);font-family:var(--hayat-font);letter-spacing:0;text-align:start;cursor:pointer}.hl-mat--sand{--hl-base: #d8bf94;--hl-ink: #b8955f;--hl-alt: #ecdcbc;--hl-hi: #fff7e8}.hl-mat--mesh{--hl-base: #d9dee3;--hl-ink: #7c8690;--hl-alt: #a9b2bb;--hl-hi: #ffffff}.hl-mat--cotton{--hl-base: #fbfbf8;--hl-ink: #d3cdc1;--hl-alt: #e6e1d7;--hl-hi: #ffffff}.hl-mat--crystal{--hl-base: #d6d3cb;--hl-ink: #faf9f5;--hl-alt: #aaa59a;--hl-hi: #ffffff}.hl-mat--redox{--hl-base: #6f4127;--hl-ink: #c9804d;--hl-alt: #a45f35;--hl-hi: #f3c9a0}.hl-mat--carbon{--hl-base: #1f1f21;--hl-ink: #414145;--hl-alt: #2f2f33;--hl-hi: #8a8a91}.hl-mat--balls{--hl-base: #5f5953;--hl-ink: #ece7df;--hl-alt: #b3664a;--hl-hi: #ffffff}.hl-mat--pebbles{--hl-base: #8b907f;--hl-ink: #d5d8c6;--hl-alt: #bcc1ab;--hl-hi: #7a7f6e}.hl-mat--tablets{--hl-base: #fff4cf;--hl-ink: var(--hayat-lemon);--hl-alt: var(--hayat-orange);--hl-hi: #fffbea}.hl-mat--stones{--hl-base: #17181b;--hl-ink: #36383e;--hl-alt: #4b4e56;--hl-hi: #c3c9d2}.hl-mat--magnetic{--hl-base: #2d3238;--hl-ink: #626a74;--hl-alt: #454c55;--hl-hi: #e2e6eb}.hayat-layer__cyl{display:flex;justify-content:center;width:var(--cyl-w)}.hayat-layers__core{position:relative}.hayat-layers__core:before{content:"";position:absolute;top:calc(var(--cyl-w) * .86 * 28 / 240 - 2px);bottom:calc(var(--cyl-w) * .86 * 20 / 240 - 2px);inset-inline-start:calc(var(--stage-w) + var(--col-gap) + var(--cyl-w) * .07);width:calc(var(--cyl-w) * .86);border-inline:1px solid rgba(var(--hayat-navy-rgb),.45);background:linear-gradient(90deg,rgba(var(--hayat-navy-rgb),.12),rgba(var(--hayat-navy-rgb),0) 14% 86%,rgba(var(--hayat-navy-rgb),.14)),var(--hayat-white)}.hayat-layers__rim,.hayat-layers__core .hayat-layers__stage{position:relative}.hayat-layer__wall{display:flex;justify-content:center;width:86%}.hayat-layer__slice{position:relative;display:block;width:83.72%;opacity:.7;transition:opacity var(--hayat-ease),box-shadow var(--hayat-ease)}.hayat-layer.is-active .hayat-layer__slice{z-index:1;opacity:1;box-shadow:0 0 0 1.5px var(--hayat-navy),0 0 0 5px rgba(var(--hayat-sky-rgb),.45)}.hayat-layer:hover:not(.is-active) .hayat-layer__slice{opacity:.9}.hayat-layer:focus-visible{outline:2px solid var(--hayat-link);outline-offset:2px;border-radius:var(--hayat-radius-small)}.hayat-layer__svg{display:block;width:100%;height:100%}.hl-base{fill:var(--hl-base)}.hl-ink{fill:var(--hl-ink)}.hl-hi{fill:var(--hl-hi)}.hl-alt{fill:var(--hl-alt)}.hl-ink-line{fill:none;stroke:var(--hl-ink)}.hl-alt-line{fill:none;stroke:var(--hl-alt)}.hl-alt-stroke{stroke:var(--hl-alt);stroke-width:.45}.hl-sep{fill:none;stroke:var(--hayat-navy);stroke-opacity:.18;stroke-width:1;vector-effect:non-scaling-stroke}.hayat-layer__label{display:flex;align-items:center;gap:6px;min-width:0}.hayat-layer__lead{flex:none;width:calc(var(--cyl-w) * .14 + var(--col-gap) + clamp(8px,3cqi,24px));height:1px;margin-inline-start:calc(var(--cyl-w) * -.14 - var(--col-gap));background:rgba(var(--hayat-navy-rgb),.3)}.hayat-layer__num{flex:none;min-width:28px;padding:0 6px;border:1px solid var(--hayat-line);border-radius:var(--hayat-radius-pill);background:var(--hayat-white);color:var(--hayat-link);font-size:11px;font-weight:var(--hayat-weight-semibold);line-height:14px;text-align:center}.hayat-layer__name{overflow:hidden;color:var(--hayat-navy);font-size:13px;font-weight:var(--hayat-weight-semibold);line-height:1.3;white-space:nowrap;text-overflow:ellipsis;opacity:.6}.hayat-layer.is-active .hayat-layer__lead{height:2px;background-color:var(--hayat-sky)}.hayat-layer.is-active .hayat-layer__num{border-color:var(--hayat-sky);background:var(--hayat-sky);color:var(--hayat-navy)}.hayat-layer.is-active .hayat-layer__name{opacity:1}@container (max-width: 559px){.hayat-layer__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}@container (min-width: 560px){.hayat-layers__stage-num{font-size:12px}.hayat-layers__stage-name{font-size:14px;line-height:1.3}.hayat-layer__num{font-size:12px;line-height:16px}}.hayat-layers__path{position:absolute;top:4px;bottom:4px;inset-inline-start:calc(var(--path-x) - 1px);z-index:2;border-inline-start:2px dotted var(--hayat-link);opacity:.75;pointer-events:none}.hayat-layers__drop{--drop-fill: var(--hayat-muted);--drop-grit: 1;--drop-clean: 0;position:absolute;top:0;inset-inline-start:calc(var(--path-x) - 12px);z-index:4;width:24px;height:31px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(var(--hayat-navy-rgb),.35));transition-property:transform,opacity;transition-timing-function:ease-in-out,ease;transition-duration:.45s,.25s}.hayat-layers__drop.is-visible{opacity:1}.hayat-layers__drop svg{display:block;width:100%;height:100%;overflow:visible}.hd-body{fill:var(--drop-fill);stroke:var(--hayat-navy);stroke-width:1.2;transition:fill .45s ease}.hd-grit{opacity:var(--drop-grit);transition:opacity .45s ease}.hd-grit circle{fill:var(--hayat-navy);fill-opacity:.6}.hd-shine{fill:none;stroke:var(--hayat-white);stroke-width:1.6;stroke-linecap:round;opacity:calc(.3 + .7 * var(--drop-clean));transition:opacity .45s ease}.hd-sparkles path{fill:var(--hayat-sky);stroke:var(--hayat-navy);stroke-width:.5;opacity:0;transform-box:fill-box;transform-origin:center}.hayat-layers__drop.is-clean .hd-sparkles path{animation:hayat-drop-sparkle .9s ease-out forwards}.hayat-layers__drop.is-clean .hd-sparkles path+path{animation-delay:.15s}.hayat-layers__drop:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border:2px solid var(--hayat-sky);border-radius:50%;opacity:0}.hayat-layers__drop.is-clean:after{animation:hayat-drop-ring .8s ease-out}@keyframes hayat-drop-sparkle{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes hayat-drop-ring{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}.hayat-layers__card{grid-area:card;display:grid;gap:6px;width:100%;max-width:600px;margin-inline:auto;padding:18px 20px 20px;border:1px solid var(--hayat-line);border-radius:var(--hayat-radius-card);background:var(--hayat-white)}.hayat-layers__card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.hayat-layers__count{color:var(--hayat-link);font-size:14px;font-weight:var(--hayat-weight-semibold)}.hayat-layers__count b{color:var(--hayat-navy);font-size:22px;font-weight:var(--hayat-weight-bold)}.hayat-layers__mini{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--hayat-line);border-radius:50%;background:var(--hayat-card);color:var(--hayat-navy);cursor:pointer}.hayat-layers__mini .hl-when .hayat-icon{width:16px;height:16px}.hayat-layers__mini:focus-visible{outline:2px solid var(--hayat-link);outline-offset:2px}.hayat-layers__card-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}.hayat-layers__card-text{display:grid;gap:6px;min-width:0}.hayat-layers__swatch{position:relative;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--hayat-navy),0 0 0 5px rgba(var(--hayat-sky-rgb),.45)}.hayat-layers__swatch svg{display:block;width:100%;height:100%}.hayat-layers__swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff6,#fff0 42%),radial-gradient(circle,rgba(var(--hayat-navy-rgb),0) 58%,rgba(var(--hayat-navy-rgb),.28));pointer-events:none}.hayat-layers__card-stage{margin:0;color:var(--hayat-link);font-size:14px;font-weight:var(--hayat-weight-semibold)}.hayat-layers__card-stage:empty{display:none}.hayat-layers__card-name{font-size:20px}@media screen and (min-width:990px){.hayat-layers__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"head visual" "head card" "head cta";column-gap:64px;row-gap:20px}.hayat-layers__head{position:sticky;top:calc(var(--hayat-header-height) + 40px);align-self:start;gap:16px}.hayat-layers__title{font-size:clamp(32px,2.6vw + 8px,48px)}.hayat-layers__swatch{width:80px;height:80px}}.hayat-layers__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:4px}.hayat-layers__actions .hayat-cta{margin-top:0}.hayat-layers__cta{grid-area:cta}.hayat-layers__cta:empty{display:none}.hayat-layers__cta .hayat-cta{margin-top:0}@media(prefers-reduced-motion:reduce){.hayat-layer__slice,.hayat-layers__stage-title,.hayat-layers__stage-name,.hayat-layers__drop,.hd-body,.hd-grit,.hd-shine{transition:none}.hayat-layers__drop.is-clean .hd-sparkles path{animation:none;opacity:1}.hayat-layers__drop.is-clean:after{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/hayat-layers.css.map */