:root{--vh: 100vh;--color-black: rgb(0,0,0);--color-white: rgb(255,255,255);--ease-in-out: ease-in-out;--ease-out-sine: cubic-bezier(.61, 1, .88, 1);--r: 0deg}*{font-family:inherit;line-height:inherit;font-weight:inherit;color:inherit}html{-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;overflow:hidden}body{height:100%;touch-action:manipulation;margin:0;padding:0;overflow:auto;scroll-behavior:smooth;&::-webkit-scrollbar{width:0;height:0;display:none}}h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,span{padding:0;margin:0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}ul,ol{padding:0;margin:0;list-style:none;font-size:0}li{display:inline-block;vertical-align:top}a{display:inline-block}a,a:visited{text-decoration:none;color:currentColor;fill:currentColor;font-family:inherit;font-size:inherit}img,video{display:block;width:100%;height:auto}table,tbody,tfoot,thead,tr,th,td,form,fieldset,label,input,select,textarea,figure,blockquote{padding:0;margin:0}table{border-collapse:collapse;border-spacing:0;text-align:left}iframe{border:0}button{border:none;margin:0;padding:0;width:auto;background:transparent;-webkit-appearance:none}button,a,input:focus{outline:none;opacity:1}@font-face{font-family:ABCOtto;src:url(/cdn/shop/files/ABCOtto-Light.woff2?v=1771936734) format("woff2");font-weight:400;font-style:normal;font-display:swap}@mixin breakpoint($breakpoint){@if $breakpoint == xs {@media (max-width: $breakpoint-xs) {@content;}} @else if $breakpoint == sm {@media (max-width: $breakpoint-sm) {@content;}} @else if $breakpoint == md {@media (max-width: $breakpoint-md) {@content;}} @else if $breakpoint == lg {@media (max-width: $breakpoint-lg) {@content;}} @else {@media (max-width: $breakpoint) {@content;}}}@mixin has-hover{@media (hover: hover) {&:hover {@content;}}}h1,h2,h3,h4,h5,p,a,span,dt,dd,button,label,input,:after,:before{font-family:ABCOtto,serif;font-size:24px;line-height:1.25em;font-weight:400;color:var(--color-black);letter-spacing:-.02em;@media (max-width: 600px){font-size:16px}}.page{margin:0 20px;background-color:#e7e7e7;&:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;cursor:wait;pointer-events:none}.page-navigation{position:fixed;top:0;left:0;right:0;background-color:var(--color-white);display:flex;justify-content:space-between;align-items:baseline;padding:15px 20px;z-index:999;.page-navigation-logo{@media (max-width: 600px){font-size:20px}}.page-navigation-list{display:flex;gap:20px;@media (max-width: 600px){gap:10px}}.menu{.menu-link{@media (hover: hover){&:hover{opacity:.4}}}.menu-action{cursor:pointer;@media (hover: hover){&:hover{opacity:.4}}}.menu-content{position:fixed;inset:0;display:grid;grid-template-columns:repeat(3,1fr);z-index:1;pointer-events:none}}.menu__open{.menu-action{opacity:.4}}}.page-content{padding-top:60px;@media (max-width: 600px){padding-top:55px}.section{.section-header{position:fixed;left:0;right:0;bottom:0;padding:15px 20px;background-color:var(--color-white);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;opacity:0;z-index:99;pointer-events:none;.section-header-content{display:flex;flex-direction:column;h3,h4{font-size:12px;line-height:1.5em;text-wrap:balance;span{font-size:inherit}}p{font-size:12px;line-height:1.5em}}.section-header-action{flex-shrink:0;@media (hover: hover){&:hover{opacity:.4}}}.section-header-note{flex-shrink:0}}}.section-content{position:relative}.section__shop{position:relative;height:calc(var(--vh) * 2);&:nth-child(2n){.book{transform:rotateY(calc(var(--r) + 30deg))}}&:nth-child(odd){.book{transform:rotateY(calc(-1 * var(--r) + 30deg))}}.section-content{position:sticky;top:60px;height:calc(var(--vh) - 60px - 66px);width:calc(100vw - 40px);perspective:1200px;display:flex;justify-content:center;align-items:center;pointer-events:none;@media (max-width: 600px){top:55px;height:calc(var(--vh) - 55px - 66px)}}}.section__active{.section-header{opacity:1;pointer-events:all}}.book{transform-style:preserve-3d;.book-side{position:absolute;top:0;left:0;background-size:cover;backface-visibility:visible;background-color:#fff;--height: clamp(100px, calc(var(--vh) * .6), calc(100vw - 100px) );--width: calc(var(--height) / (30 / 23));--depth: calc(var(--height) / (30 / 2.1))}.book-side__front{width:var(--width);height:var(--height);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translateZ(0) rotateY(0)}.book-side__left{width:var(--depth);height:var(--height);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translate3d(calc(-1 * (var(--depth) / 2)),0,calc(-1 * (var(--depth) / 2))) rotateY(-90deg)}.book-side__right{width:var(--depth);height:var(--height);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translate3d(calc(var(--width) - (var(--depth) / 2)),0,calc(-1 * (var(--depth) / 2))) rotateY(90deg)}.book-side__top{width:var(--width);height:var(--depth);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translate3d(0,calc(-1 * (var(--depth) / 2)),calc(-1 * (var(--depth) / 2))) rotateX(90deg)}.book-side__bottom{width:var(--width);height:var(--depth);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translate3d(0,calc(var(--height) - (var(--depth) / 2)),calc(-1 * (var(--depth) / 2))) rotateX(-90deg)}.book-side__back{width:var(--width);height:var(--height);transform:translate3d(calc(-1 * (var(--width) / 2)),calc(-1 * var(--height) / 2),calc(var(--depth) / 2)) translateZ(calc(-1 * var(--depth))) rotateY(180deg)}}}.page-terms{position:fixed;inset:0;display:grid;grid-template-columns:repeat(3,1fr);z-index:999;pointer-events:none;.panel{.panel-header{.panel-header-action{&:after{background-color:transparent;@media (max-width: 600px){background-color:var(--color-black)}}}}}}}.page__progress{&:after{pointer-events:all}}.panel{grid-column:3 / 4;background-color:var(--color-white);display:flex;flex-direction:column;height:var(--vh);transform:translate(100%);transition:transform .3s var(--ease-out-sine);@media (max-width: 900px){grid-column:2 / 4}@media (max-width: 600px){grid-column:span 3}.panel-header{padding:15px 20px;display:flex;justify-content:flex-end;@media (max-width: 600px){padding:23px 20px 17px}.panel-header-action{cursor:pointer;&:after{content:"";position:fixed;top:0;right:100%;width:100vw;height:100%;background-color:var(--color-black);opacity:0;z-index:-2;transition:opacity .3s var(--ease-in-out)}span{pointer-events:none}@media (hover: hover){&:hover{span{opacity:.4}}}}}.panel-content{overflow:scroll;flex-grow:1;display:flex;&::-webkit-scrollbar{width:0;height:0;display:none}}}.panel__open{transform:translate(0);pointer-events:all;.panel-header{.panel-header-action{&:after{opacity:.1}}}}.cart{display:flex;padding:20px 20px 15px;.cart-form{display:flex;flex-direction:column;.summary{flex-grow:1;overflow:scroll;&::-webkit-scrollbar{width:0;height:0;display:none}.summary-content{display:flex;flex-direction:column;gap:20px;.item{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr;align-items:flex-start;gap:10px 20px;@media (max-width: 900px){grid-template-columns:repeat(4,1fr)}.item-asset{grid-row:span 3;@media (max-width: 900px){grid-column:span 2}}.item-header{grid-column:span 2;display:flex;flex-direction:column;h4{display:flex;flex-direction:column;font-size:12px;line-height:1.5em;text-wrap:balance;span{font-size:inherit}}p{font-size:12px;line-height:1.5em}}.item-quantity{grid-column:span 2;display:flex;gap:8px;a{position:relative;font-size:12px;line-height:1.5em;&:after{content:"";position:absolute;top:0;left:-3px;width:calc(100% + 6px);height:100%}}p{font-size:12px;line-height:1.5em;opacity:.4}span{font-size:12px;line-height:1.5em}}.item-action{grid-column:span 2;justify-self:flex-start;font-size:12px;line-height:1.5em;opacity:.4;@media (hover: hover){&:hover{opacity:1}}}}}}.receipt{display:grid;grid-template-columns:1fr auto;gap:30px 0;padding:20px 0 0;background-color:var(--color-white);.receipt-specification{display:flex;flex-direction:column;dt,dd{font-size:16px}}.receipt-action{padding:10px 50px;display:flex;border:1px solid var(--color-black);font-size:16px;cursor:pointer;@media (hover: hover){&:hover{opacity:.4}}}.receipt-terms{font-size:9px;line-height:1.5em;text-align:left;cursor:pointer;@media (hover: hover){&:hover{opacity:.4}}}}}.cart-fallback{h3{font-size:16px}}}.info{display:flex;flex-direction:column;padding:20px;h4{font-size:16px;padding-top:20px;@media (max-width: 600px){font-size:12px;line-height:1.5em}}p{font-size:16px;padding-bottom:1em;@media (max-width: 600px){font-size:12px;line-height:1.5em}}a{text-decoration:underline;font-size:16px;padding-bottom:1em;@media (max-width: 600px){font-size:12px;line-height:1.5em}}}.terms{display:flex;flex-direction:column;padding:20px;h3{font-size:16px;padding:0 0 10px;&:not(:first-child){padding:20px 0 10px}}h4{font-size:12px;line-height:1.5em;padding:10px 0;text-decoration:underline}p{font-size:12px;line-height:1.5em;padding-bottom:1em}a{text-decoration:underline;font-size:12px;line-height:1.5em;padding-bottom:1em}ul{font-size:12px;padding-inline-start:1lh;padding-bottom:1em;li{display:list-item;list-style-type:disc;p{padding-bottom:0}}}}.asset{position:absolute;top:0;left:0;height:100%;opacity:0}.asset__loaded{opacity:1;transition:opacity .5s ease}
