.hkk-byo{--o:#EF4623;--t:#17B0AB;--tl:#E8F7F6;--ink:#222;--grey:#6f6f6f;--line:#ece6e1;--tilt:20deg;color:var(--ink);padding:0 16px 32px}.hkk-byo *{box-sizing:border-box}.hkk-byo [hidden]{display:none!important}.hkk-byo__wrap{max-width:1160px;margin:0 auto;display:grid;gap:16px}.hkk-byo h2{font-size:24px;font-weight:800;margin:0 0 6px}.hkk-byo h3{font-size:16px;font-weight:800;margin:0 0 10px}.hkk-byo__lead{font-size:15px;line-height:1.6;color:var(--grey);margin:0 0 14px}.hkk-byo__side{display:grid;gap:16px;align-content:start;min-width:0}.hkk-byo__side>*{margin:0}.hkk-byo__boxcol,.hkk-byo__controls{display:contents}.hkk-byo button{font:inherit;color:inherit}.hkk-byo :focus-visible{outline:3px solid var(--o);outline-offset:2px}.hkk-byo__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hkk-byo__stagehome{position:relative;width:100%;height:0;padding-bottom:79.452%;overflow:hidden;border-radius:14px;background:linear-gradient(#e6f6f4,#d6ece4)}.hkk-byo__stage{position:absolute;left:0;top:0;width:730px;height:580px;transform-origin:0 0;perspective:1000px;perspective-origin:50% 45%}.hkk-byo__tilt{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;transform-origin:50% 100%;transform:translateY(-30px) scale(1.04) rotateX(var(--tilt));transform-style:preserve-3d}.hkk-byo__scene{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}.hkk-byo__scene.is-thud{animation:hkk-byo-thud .3s ease-out .34s}.hkk-byo__photo{position:absolute;left:-100px;top:-36px;width:900px;height:675px;max-width:none;display:block}.hkk-byo__bw{position:absolute;z-index:60;width:138px;height:82px;left:470px;top:64px;background:#fffdf9;border-radius:4px;transform:rotate(-3deg);box-shadow:0 6px 10px #321e0a59;display:grid;place-content:center;text-align:center;gap:4px;font-style:italic;font-weight:700;font-size:17px;color:#4a3f36}.hkk-byo__bw i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 2px}.hkk-byo__parcel{position:absolute;z-index:44;left:490px;top:376px;width:99px;height:84px;border-radius:6px;background:repeating-linear-gradient(135deg,#d7b98e 0 6px,#cfae82 6px 12px);box-shadow:0 6px 10px #321e0a66,inset 0 0 0 1px #ffffff40;transform:rotate(6deg)}.hkk-byo__parcel:before,.hkk-byo__parcel:after{content:"";position:absolute;background:var(--t)}.hkk-byo__parcel:before{left:50%;top:0;width:14px;height:100%;margin-left:-7px}.hkk-byo__parcel:after{top:50%;left:0;height:14px;width:100%;margin-top:-7px}.hkk-byo__bow{position:absolute;left:50%;top:50%;width:30px;height:14px;margin:-7px 0 0 -15px;z-index:2}.hkk-byo__bow:before,.hkk-byo__bow:after{content:"";position:absolute;top:0;width:14px;height:14px;border-radius:50% 50% 50% 2px;background:#119b96;border:2px solid var(--t)}.hkk-byo__bow:before{left:0;transform:rotate(-20deg)}.hkk-byo__bow:after{right:0;transform:rotate(110deg)}.hkk-byo__tag{position:absolute;z-index:3;right:-6px;bottom:-8px;background:#fffdf9;color:#4a3f36;font-size:11px;font-weight:800;padding:2px 7px;border-radius:3px;transform:rotate(-8deg);box-shadow:0 2px 4px #321e0a59;white-space:nowrap}.hkk-byo__light{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(95% 75% at 24% 6%,#fff3da42,#fff3da00 48%),radial-gradient(130% 110% at 52% 118%,#3a200c2b,#3a200c00 56%),linear-gradient(178deg,#ffffff0a,#46280f00 30%,#46280f12 92%)}.hkk-byo__tile{position:absolute;z-index:10;--sh-y:0px;--sh-b:0px;transition:left .4s cubic-bezier(.2,.7,.3,1),top .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1)}.hkk-byo__bed{position:absolute;left:-5%;right:-5%;bottom:-8%;height:34%;border-radius:50%;background:radial-gradient(50% 52% at 50% 46%,#3a220e66,#3a220e00 68%);filter:blur(2.5px)}.hkk-byo__tile-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:7px;overflow:hidden;background:#fff;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 var(--sh-y) var(--sh-b) #321e0a61,0 1px 2px #321e0a4d}.hkk-byo__tile-inner img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}.hkk-byo__tile--slim .hkk-byo__tile-inner img{object-fit:contain}.hkk-byo__shred{position:absolute;z-index:2;pointer-events:none}.hkk-byo__puff{position:absolute;z-index:3;left:6%;right:6%;bottom:-9%;height:30%;pointer-events:none;opacity:0;filter:blur(2px);background:radial-gradient(40% 65% at 18% 62%,#f6ddcbf2,#f6ddcb00 72%),radial-gradient(40% 65% at 50% 68%,#e8c7ace6,#e8c7ac00 72%),radial-gradient(40% 65% at 82% 62%,#f6ddcbf2,#f6ddcb00 72%)}.hkk-byo__tile.is-drop .hkk-byo__tile-inner{animation:hkk-byo-drop .62s cubic-bezier(.2,.75,.25,1) both}.hkk-byo__tile.is-drop .hkk-byo__shred{animation:hkk-byo-fadein .35s .38s both}.hkk-byo__tile.is-drop .hkk-byo__puff{animation:hkk-byo-puff .55s ease-out .3s both}.hkk-byo__tile.is-lift{pointer-events:none}.hkk-byo__tile.is-lift .hkk-byo__tile-inner{animation:hkk-byo-lift .4s ease-in forwards}.hkk-byo__tile.is-lift .hkk-byo__shred,.hkk-byo__tile.is-lift .hkk-byo__bed,.hkk-byo__tile.is-lift .hkk-byo__puff{display:none}.hkk-byo__tile--flat .hkk-byo__tile-inner,.hkk-byo__tile--upright .hkk-byo__tile-inner{background:transparent;border-color:transparent;box-shadow:none;overflow:visible}.hkk-byo__tile--flat .hkk-byo__tile-inner img{object-fit:fill;filter:drop-shadow(0 var(--sh-y) calc(var(--sh-b) / 2) rgba(50,30,10,.45))}.hkk-byo__tile--flat .hkk-byo__bed{bottom:-6%;height:26%;opacity:.85}.hkk-byo__tile--upright,.hkk-byo__tile--upright .hkk-byo__tile-inner{transform-style:preserve-3d}.hkk-byo__tile--upright .hkk-byo__tile-inner img{position:absolute;left:50%;bottom:0;width:100%;height:auto;transform-origin:50% 100%;transform:translate(-50%) rotateX(calc(var(--tilt) * -1));filter:drop-shadow(0 var(--sh-y) calc(var(--sh-b) / 2) rgba(50,30,10,.4))}.hkk-byo__tile--upright .hkk-byo__bed{left:0;right:0;bottom:-5%;height:22%;opacity:1;filter:blur(2px)}@keyframes hkk-byo-drop{0%{transform:translateY(-150px) rotate(2.5deg) scale(1.18);opacity:0}55%{transform:translateY(4px) rotate(-.6deg) scaleY(.94);opacity:1}74%{transform:translateY(-3px) rotate(.3deg) scale(.99,1.02)}to{transform:none;opacity:1}}@keyframes hkk-byo-lift{20%{opacity:1}to{transform:translateY(-110px) rotate(-3deg) scale(1.1);opacity:0}}@keyframes hkk-byo-thud{0%,to{transform:none}45%{transform:translateY(3px) scale(.995)}}@keyframes hkk-byo-fadein{0%{opacity:0}to{opacity:1}}@keyframes hkk-byo-puff{0%{opacity:.85;transform:translateY(2px) scale(.55)}to{opacity:0;transform:translateY(-9px) scale(1.55)}}.hkk-byo__status{display:grid;gap:8px}.hkk-byo__left{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.hkk-byo__left strong{font-size:20px;font-weight:800;color:var(--t)}.hkk-byo__left strong.is-over{color:var(--o)}.hkk-byo__left span{color:var(--grey);font-size:13px}.hkk-byo__meters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hkk-byo__meter{display:grid;gap:4px;font-size:13px}.hkk-byo__meter-head{display:flex;justify-content:space-between;color:var(--grey)}.hkk-byo__meter-head b{color:var(--ink);font-weight:700}.hkk-byo__bar{height:9px;background:#efe9e3;border-radius:99px;overflow:hidden}.hkk-byo__fill{height:100%;width:0;background:var(--t);border-radius:99px;transition:width .4s ease,background .3s}.hkk-byo__fill.is-warn{background:#ffd65c}.hkk-byo__fill.is-full{background:var(--o)}.hkk-byo__minibar{position:fixed;left:0;right:0;top:var(--hkk-top,var(--header-height,0px));z-index:21;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px #3c281414;padding:8px 16px;display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:center;transition:top .15s ease-out}body:has(.shopify-section-header-hidden) .hkk-byo__minibar{top:0}.hkk-byo__minibar .hkk-byo__stagehome{border-radius:10px}.hkk-byo__minibar .hkk-byo__status{gap:4px}.hkk-byo__minibar .hkk-byo__left strong{font-size:16px}.hkk-byo__minibar .hkk-byo__left span{font-size:12px}.hkk-byo__minibar .hkk-byo__meters{gap:6px;grid-template-columns:1fr}.hkk-byo__minibar .hkk-byo__meter{font-size:11px;gap:2px}.hkk-byo__minibar .hkk-byo__bar{height:6px}.hkk-byo fieldset{border:0;padding:0;margin:0;min-width:0}.hkk-byo legend{font-size:16px;font-weight:800;margin:0 0 10px;padding:0;display:block}.hkk-byo__chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.hkk-byo__chip{min-height:52px;padding:10px 14px;border:2px solid var(--line);border-radius:12px;font-size:17px;font-weight:800;line-height:1.3;background:#fff;cursor:pointer}.hkk-byo__chip[aria-pressed=true]{border-color:var(--t);background:var(--tl)}.hkk-byo__other{display:flex;align-items:center;gap:8px;margin-top:10px}.hkk-byo__other span{font-size:15px;font-weight:700}.hkk-byo__step{flex:0 0 48px;height:48px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:24px;font-weight:800;color:var(--ink);cursor:pointer;padding:0}.hkk-byo__step:disabled,.hkk-byo__btn:disabled{opacity:.45;cursor:not-allowed}.hkk-byo__other output{flex:1;text-align:center;font-size:20px;font-weight:800}.hkk-byo__hint{font-size:13px;color:var(--grey);margin:8px 0 0}.hkk-byo__panel{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}.hkk-byo__panel h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0}.hkk-byo__panel h3 small{color:var(--grey);font-weight:600;font-size:13px}.hkk-byo__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.hkk-byo__list li{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;align-items:center}.hkk-byo__list img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}.hkk-byo__name{font-size:13px;font-weight:700}.hkk-byo__sub{font-size:12px;color:var(--grey)}.hkk-byo__qty{display:inline-flex;align-items:center;gap:4px;grid-column:2}.hkk-byo__qty .hkk-byo__step{flex:0 0 36px;height:36px;font-size:18px;border-radius:10px}.hkk-byo__qty output{min-width:24px;text-align:center;font-weight:800;font-size:14px}.hkk-byo__remove{background:none;border:0;color:var(--grey);font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;padding:4px}.hkk-byo__empty{color:var(--grey);font-size:14px;margin:0}.hkk-byo__totals{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px;font-size:14px}.hkk-byo__totals div{display:flex;justify-content:space-between;gap:8px}.hkk-byo__totals .is-grand{font-weight:800;font-size:16px}.hkk-byo__totals .is-free{color:var(--t);font-weight:700}.hkk-byo__label{font-size:16px;font-weight:800;margin:0 0 10px;display:block}.hkk-byo__label small{font-weight:600;color:var(--grey)}.hkk-byo textarea{width:100%;min-height:92px;padding:12px;border:2px solid var(--line);border-radius:12px;font:inherit;font-size:16px;resize:vertical}.hkk-byo__count{display:block;text-align:right;font-size:12px;color:var(--grey);margin-top:4px}.hkk-byo__shelf{display:grid;gap:12px;align-content:start;min-width:0}.hkk-byo__filters{display:flex;flex-wrap:wrap;gap:8px}.hkk-byo__filter{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 13px;font-weight:700;cursor:pointer;min-height:38px}.hkk-byo__filter[aria-pressed=true]{background:var(--t);border-color:var(--t);color:#fff}.hkk-byo__cards{display:grid;gap:10px}.hkk-byo__card{display:grid;grid-template-columns:96px 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}.hkk-byo__card-media img{width:96px;height:96px;border-radius:10px;object-fit:cover;display:block;background:#fff}.hkk-byo__card-body{display:grid;gap:6px;min-width:0;align-content:start}.hkk-byo__brand{font-size:12px;color:var(--grey);font-weight:700}.hkk-byo__title{font-size:14px;font-weight:800;margin:0}.hkk-byo__variant{font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:#faf6f1;border:1.5px solid var(--line);border-radius:10px;padding:7px 10px;max-width:100%;min-height:38px}.hkk-byo__price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hkk-byo__price{font-weight:800;font-size:16px}.hkk-byo__pill{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:#fff8e1}.hkk-byo__pill--clear{background:#fdebe6;color:var(--o)}.hkk-byo__effect{font-size:13px;color:var(--grey);font-weight:700}.hkk-byo__effect.is-over{color:var(--o)}.hkk-byo__note{font-size:12px;color:var(--o);font-weight:700;margin:0}.hkk-byo__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hkk-byo__btn{border:0;border-radius:12px;padding:8px 14px;font-weight:800;cursor:pointer;background:var(--tl);color:var(--ink);min-height:38px;font-size:14px}.hkk-byo__inbox-txt{font-size:13px;font-weight:700;color:var(--t)}.hkk-byo__error{color:#b42318;font-size:14px;font-weight:700;margin:0}.hkk-byo__addbar{position:sticky;bottom:var(--hkk-bottom,0px);z-index:20;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;margin:0 -16px;padding:12px 84px calc(12px + env(safe-area-inset-bottom)) 16px;background:#fff;border-top:1px solid var(--line)}.hkk-byo__total{line-height:1.2}.hkk-byo__total small{display:block;font-size:12px;font-weight:700;color:var(--grey)}.hkk-byo__total strong{font-size:22px;font-weight:800}.hkk-byo__add{min-height:50px;padding:0 22px;border:0;border-radius:12px;background:var(--o);color:#fff;font-size:16px;font-weight:800;cursor:pointer}.hkk-byo__add[disabled]{opacity:.6;cursor:not-allowed}.hkk-byo__addnote{grid-column:1 / -1;font-size:12px;color:var(--o);font-weight:700;margin:0}.hkk-byo__fine{font-size:12px;color:var(--grey);margin:0}@media(min-width:990px){.hkk-byo{padding:0 24px 56px}.hkk-byo__wrap{gap:28px}.hkk-byo__side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:start}.hkk-byo__boxcol,.hkk-byo__controls{display:grid;gap:16px;align-content:start;min-width:0}.hkk-byo__minibar{left:50%;right:auto;width:min(1160px,calc(100% - 48px));transform:translate(-50%);grid-template-columns:190px 1fr;gap:20px;border-radius:0 0 12px 12px}.hkk-byo__chips{grid-template-columns:repeat(4,1fr)}.hkk-byo__cards{grid-template-columns:repeat(3,minmax(0,1fr))}.hkk-byo__list li{grid-template-columns:44px 1fr auto}.hkk-byo__qty{grid-column:auto}.hkk-byo__addbar{grid-column:1 / -1;margin:0 -24px;padding:16px 100px 16px 24px}}@media(prefers-reduced-motion:reduce){.hkk-byo__tile.is-drop .hkk-byo__tile-inner,.hkk-byo__tile.is-lift .hkk-byo__tile-inner,.hkk-byo__tile.is-drop .hkk-byo__shred,.hkk-byo__tile.is-drop .hkk-byo__puff,.hkk-byo__scene.is-thud{animation:none!important}.hkk-byo__puff{display:none}.hkk-byo__tile,.hkk-byo__fill,.hkk-byo__minibar{transition:none!important}.hkk-byo__tile.is-lift{display:none}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/hkk-byo.css.map */