.commerce-world{--cw-green:#6e9f45;--cw-green-bright:#9fcf65;--cw-ink:#171914;--cw-paper:#f7f3eb;position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#e9e1d5;color:var(--cw-ink)}.cw-scene,.cw-scene-inner,.cw-scene picture,.cw-artwork,.cw-overlay{position:absolute;top:0;right:0;bottom:0;left:0}.cw-scene{z-index:0;overflow:hidden;background:#e9e1d5}.cw-scene-inner{top:-1.5%;right:-1.5%;bottom:-1.5%;left:-1.5%;transition:transform .8s cubic-bezier(.18,.82,.22,1);transform:translate3d(calc(var(--cw-shift-x,0) * 1px),calc(var(--cw-shift-y,0) * 1px),0) scale(1.03);will-change:transform}.cw-artwork{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(1.01) brightness(1.03)}.cw-overlay{z-index:1;pointer-events:none;background:linear-gradient(90deg,#f7f3ebf0,#f7f3ebc2 20%,#f7f3eb24 43%,#f7f3eb00 69%),linear-gradient(180deg,rgba(247,243,235,.18),transparent 56%,rgba(237,230,218,.22))}.cw-content{position:relative;z-index:4;min-height:100svh;padding:clamp(7.1rem,13vh,9rem) 2.3vw 2.2rem;display:grid;grid-template-rows:1fr auto;pointer-events:none}.cw-intro{align-self:start;max-width:min(26rem,29vw);transform:none;pointer-events:auto}.cw-kicker{margin:0 0 1rem;font-size:.6rem;line-height:1;text-transform:uppercase;letter-spacing:.18em;color:#1719149e}.cw-intro h1{margin:0;font-size:clamp(2.55rem,3.4vw,4rem);font-weight:500;line-height:.86;letter-spacing:-.064em;text-wrap:balance}.cw-intro h1 em{display:inline-block;color:var(--cw-green);font-family:Georgia,serif;font-weight:400}.cw-intro-copy{max-width:20rem;margin:1rem 0 0;font-size:clamp(.78rem,.86vw,.92rem);line-height:1.45;color:#171914ab}.cw-hotspots{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.cw-hotspot{position:absolute;left:var(--cw-x);top:var(--cw-y);width:2.75rem;height:2.75rem;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);border:0;border-radius:50%;background:#f7f3ebb8;color:var(--cw-ink);cursor:pointer;pointer-events:auto;box-shadow:0 0 0 1px #1719143d,0 .55rem 1.8rem #26211a29;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:transform .38s cubic-bezier(.18,.82,.22,1),background .3s ease,box-shadow .3s ease}.cw-hotspot-dot{width:.62rem;height:.62rem;border:1px solid rgba(23,25,20,.75);border-radius:50%;background:#f7f3eb;transition:transform .35s ease,background .3s ease,box-shadow .3s ease}.cw-hotspot-label{position:absolute;left:calc(100% + .6rem);top:50%;width:max-content;max-width:12rem;padding:.6rem .75rem;display:flex;gap:.75rem;align-items:center;transform:translate(.6rem,-50%);border:1px solid rgba(23,25,20,.18);border-radius:99px;background:#f9f6efe6;color:#171914d1;box-shadow:0 .6rem 2rem #41372a1f;font-size:.57rem;line-height:1;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .38s cubic-bezier(.18,.82,.22,1)}.cw-hotspot-label b{color:var(--cw-green);font-size:.52rem}.cw-hotspot:hover,.cw-hotspot:focus-visible,.cw-hotspot.is-active{z-index:8;transform:translate(-50%,-50%) scale(1.14);background:#f2ffdae6;box-shadow:0 0 0 .48rem #6e9f451c,0 .7rem 2.6rem #3e681e3d}.cw-hotspot:hover .cw-hotspot-dot,.cw-hotspot:focus-visible .cw-hotspot-dot,.cw-hotspot.is-active .cw-hotspot-dot{transform:scale(1.45);background:var(--cw-green-bright);border-color:#456d25;box-shadow:0 0 1.25rem #6e9f45b3}.cw-hotspot:hover .cw-hotspot-label,.cw-hotspot:focus-visible .cw-hotspot-label,.cw-hotspot.is-active .cw-hotspot-label{opacity:1;transform:translateY(-50%)}.cw-hotspot:focus-visible{outline:2px solid var(--cw-ink);outline-offset:5px}.cw-panel{justify-self:end;align-self:end;width:min(36rem,42vw);padding:1.2rem 1.3rem 1rem;border:1px solid rgba(23,25,20,.18);border-radius:.9rem;background:linear-gradient(125deg,#f9f6eff0,#efe8dcd1);color:var(--cw-ink);box-shadow:0 1.5rem 5rem #3b31242e;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);pointer-events:auto}.cw-detail-meta,.cw-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-transform:uppercase;letter-spacing:.15em;font-size:.52rem}.cw-detail-meta{color:var(--cw-green)}.cw-detail-meta span:last-child{color:#1719146b}.cw-detail h2{margin:1.05rem 0 .62rem;font-size:clamp(2rem,3.2vw,3.55rem);font-weight:500;line-height:.92;letter-spacing:-.055em}.cw-detail>p{max-width:32rem;margin:0;font-size:.84rem;line-height:1.5;color:#171914ad}.cw-detail.is-active{animation:cw-detail-in .55s cubic-bezier(.18,.82,.22,1) both}.cw-panel-footer{margin-top:1rem;padding-top:.72rem;border-top:1px solid rgba(23,25,20,.13);color:#17191473;text-decoration:none;cursor:pointer;transition:color .25s ease}.cw-next{width:2.1rem;height:2.1rem;padding:0;display:grid;place-items:center;border:1px solid rgba(23,25,20,.34);border-radius:50%;background:transparent;color:var(--cw-ink);transition:background .25s ease,color .25s ease,transform .3s ease}.cw-panel-footer:hover,.cw-panel-footer:focus-visible{color:var(--cw-ink);outline:none}.cw-panel-footer:hover .cw-next,.cw-panel-footer:focus-visible .cw-next{background:var(--cw-green-bright);color:var(--cw-ink);transform:translate(.18rem)}.cw-mobile-rail{display:none}@media(min-width:801px){.cw-panel{min-height:19rem}.cw-hotspot{left:var(--cw-safe-x,var(--cw-x));top:var(--cw-safe-y,var(--cw-y))}.cw-hotspot.label-left .cw-hotspot-label{left:auto;right:calc(100% + .6rem)}}@keyframes cw-detail-in{0%{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}@media(max-width:800px){.commerce-world{min-height:100svh;background:var(--cw-paper)}.cw-scene{top:19rem;right:0;bottom:0;left:0;background:#e8dfd1}.cw-scene-inner{top:0;right:0;bottom:0;left:0;transform:none}.cw-artwork{object-position:center 43%;filter:saturate(.72) contrast(1.02) brightness(1.07)}.cw-overlay{top:19rem;right:0;bottom:0;left:0;background:linear-gradient(180deg,#f7f3eb14,#f7f3eb00 43%,#f7f3ebb8 74%,#f7f3ebfa)}.cw-hotspots{display:none}.cw-content{min-height:100svh;padding:5.65rem 1rem .8rem;grid-template-rows:auto minmax(12.5rem,1fr) auto auto;gap:.58rem}.cw-intro{align-self:start;max-width:22rem;padding:0 .15rem;transform:none}.cw-kicker{margin:0 0 .72rem;font-size:.46rem;letter-spacing:.2em;color:#1719148f}.cw-intro h1{max-width:15ch;font-size:clamp(1.82rem,7.8vw,2.35rem);line-height:.87;letter-spacing:-.065em}.cw-intro h1 em{margin-top:.08em}.cw-intro-copy{display:block;max-width:20rem;margin:.75rem 0 0;font-size:.67rem;line-height:1.42;color:#1719149e}.cw-mobile-rail{grid-row:3;align-self:end;width:100%;padding:.18rem 0 .34rem;display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid rgba(23,25,20,.24);border-bottom:1px solid rgba(23,25,20,.14);pointer-events:auto}.cw-mobile-point{position:relative;height:2.05rem;padding:0;border:0;background:transparent;color:#17191461;font:inherit;font-size:.43rem;letter-spacing:.12em;cursor:pointer;transition:color .25s ease}.cw-mobile-point:after{content:"";position:absolute;left:50%;bottom:-.36rem;width:0;height:2px;background:var(--cw-green);transform:translate(-50%);transition:width .3s ease}.cw-mobile-point.is-active{color:var(--cw-ink)}.cw-mobile-point.is-active:after{width:72%}.cw-mobile-point:focus-visible{outline:1px solid var(--cw-ink);outline-offset:-3px}.cw-panel{grid-row:4;justify-self:stretch;align-self:end;width:100%;padding:.78rem .9rem .68rem;border:1px solid rgba(23,25,20,.2);border-radius:.22rem;background:#f9f6eff7;box-shadow:0 .8rem 2.4rem #3b31241f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.cw-detail-meta{font-size:.42rem}.cw-detail h2{margin:.62rem 0 .34rem;font-size:clamp(1.45rem,7vw,1.9rem);line-height:.92}.cw-detail>p{max-width:29rem;font-size:.65rem;line-height:1.4}.cw-panel-footer{margin-top:.62rem;padding-top:.48rem;font-size:.4rem}.cw-next{width:1.7rem;height:1.7rem}}@media(max-width:800px)and (max-height:740px){.cw-scene,.cw-overlay{top:17.3rem;right:0;bottom:0;left:0}.cw-content{padding-top:5.3rem;grid-template-rows:auto minmax(9rem,1fr) auto auto;gap:.45rem}.cw-intro h1{font-size:clamp(1.75rem,8vw,2.2rem)}.cw-intro-copy{font-size:.61rem;margin-top:.52rem}.cw-panel{padding:.64rem .76rem .56rem}.cw-detail h2{font-size:1.35rem;margin:.48rem 0 .25rem}.cw-detail>p{font-size:.59rem}}@media(prefers-reduced-motion:reduce){.cw-scene-inner{transform:none!important;transition:none}.cw-detail.is-active{animation:none}.cw-hotspot,.cw-hotspot-dot,.cw-hotspot-label{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/40/assets/yoshko-commerce-world.css.map */