.shop{padding:56px 0 90px}.shop h1{font-size:clamp(40px,5vw,72px)}.shop .bl{font-size:19px;max-width:640px;margin:16px 0 0}
.store{display:grid;grid-template-columns:1fr 330px;gap:40px;margin-top:36px;align-items:start}
.row{display:grid;grid-template-columns:120px 1fr;column-gap:20px;margin-bottom:26px}
.rh{grid-row:span 2;padding-top:20px}.rh h3{font-size:24px;margin:2px 0 0;line-height:1.1}.n{font:italic 400 16px "DM Serif Display";color:var(--tur)}
.items{display:flex;flex-wrap:wrap;gap:4px 2px;align-items:flex-end;padding:0 4px}
.plank{grid-column:2;height:12px;background:var(--pet);border-radius:3px 3px 8px 8px;border-bottom:6px solid var(--not)}
.obj{all:unset;cursor:grab;width:64px;display:flex;flex-direction:column;align-items:center;text-align:center;touch-action:manipulation}
.obj .ic{width:56px;height:62px;transition:transform .2s}.obj:hover .ic{transform:translateY(-5px) rotate(-4deg)}
.obj .lb{font:500 11px/1.15 Jost;overflow-wrap:anywhere;color:var(--pet);min-height:28px;margin-top:3px}
.obj[aria-pressed=true] .ic svg{visibility:hidden}.obj[aria-pressed=true] .ic{outline:2px dashed var(--tur);outline-offset:-4px;border-radius:14px}
.obj[aria-pressed=true] .lb{color:var(--tur);text-decoration:line-through}
.obj:focus-visible{outline:2px solid var(--pet);border-radius:8px}
.note{display:grid;grid-template-columns:120px 1fr;gap:20px;margin-top:10px}.note h3{font-size:24px;margin:2px 0 0}
.note textarea{background:transparent;border:2px solid var(--pet);border-radius:18px;font:400 16px Jost;color:var(--pet);padding:12px 16px;resize:vertical}
.note textarea::placeholder{color:var(--tur)}
.bagbox{position:sticky;top:96px;background:var(--pet);border-radius:28px;padding:22px 24px 26px;text-align:center;color:var(--gre)}
.bag{position:relative;width:250px;margin:24px auto 0;transform-origin:50% 100%;transform:scale(calc(1 + var(--n,0)*.012))}
.bagsvg{display:block;width:100%;overflow:visible}
.peek{position:absolute;left:24%;right:24%;top:2px;height:60px;z-index:2;pointer-events:none}
.pk{all:unset;position:absolute;bottom:-14px;left:calc(var(--i)*13%);width:44px;height:50px;pointer-events:auto;cursor:pointer;transform:rotate(calc((var(--i) - 3)*7deg));animation:drop .45s ease-out}
.pk svg{width:100%;height:100%}
.bagsvg .ec,.bagsvg .m2{display:none}
.bag.full .bagsvg .m1{d:path("M118 155q12 12 24 0")}
.bag.hungry .bagsvg .m1,.bag.over .bagsvg .m1{display:none}.bag.hungry .bagsvg .m2,.bag.over .bagsvg .m2{display:block}
.bag.over{transform:scale(calc(1.06 + var(--n,0)*.012))}
.bag.gulp{animation:gulp .4s}
.bag.closed .peek{display:none}.bag.closed .inner{display:none}.bag.closed .eo,.bag.closed .m2{display:none}.bag.closed .ec{display:block}
.bag.closed .frame{transform:scaleX(.82);transform-origin:130px 85px;transition:transform .3s}
.bag.closed .handle{animation:snap .5s forwards}.bag.closed{animation:shut .8s}
@keyframes drop{from{transform:translateY(-60px) rotate(0)}}
@keyframes gulp{40%{transform:scale(calc(1.08 + var(--n,0)*.012),calc(.94 + var(--n,0)*.012))}}
@keyframes shut{20%{transform:translateY(6px) scaleY(.94)}50%{transform:translateY(-18px) rotate(-3deg)}75%{transform:rotate(2deg)}}
@keyframes snap{to{transform:translateY(-6px)}}
.cnt{font:400 26px "DM Serif Display";margin:16px 0 2px;color:var(--gre)}.hint{font-size:14px;color:var(--tif);margin:0 0 16px}
.bagbox .btn{background:var(--mus);color:var(--not);border:0;cursor:pointer;font:500 17px Jost}.bagbox .btn:disabled{background:var(--not);color:var(--gre);cursor:default}
.sol{background:var(--not);color:var(--gre);padding:80px 0}.sol h2{color:var(--gre)}.sol em,.sol .k{color:var(--tif)}
.sent{font:400 clamp(22px,2.4vw,30px)/1.35 "DM Serif Display";max-width:900px;margin:10px 0 40px}
.pkg{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;background:var(--gre);color:var(--pet);border-radius:28px;padding:30px;align-items:center}
.pkg .pimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:180px 180px 20px 20px;display:block}
.pkg h3{font-size:38px;margin:0 0 12px}.pkg em{color:var(--tur)}.pkg .k{color:var(--tur)}.pkg .match{font-size:17px;margin:14px 0 18px}.pkg .match .it{color:var(--tur)}.sol,.shop{scroll-margin-top:70px}.note h3{font-size:21px}
.custom{background:var(--gre);color:var(--pet);border-radius:28px;padding:40px}.custom h3{font-size:38px;margin:0}.custom em{color:var(--tur)}
.custom .btn,.pkg .btn{white-space:normal}
#reopen{margin-top:28px;color:var(--gre);border-color:var(--gre)}
[hidden]{display:none!important}
@media(max-width:900px){.store{grid-template-columns:1fr}.row,.note{grid-template-columns:1fr}.rh{grid-row:auto;padding:0 0 8px}.plank{grid-column:1}
.items{padding:0 2px;gap:2px}.obj{width:calc(25% - 2px)}
.bagbox{position:sticky;bottom:0;top:auto;display:grid;grid-template-columns:110px 1fr;align-items:center;text-align:left;padding:10px 16px;border-radius:22px 22px 0 0;margin:0 -20px;gap:4px 14px;z-index:5}
.bag{width:100px;margin:6px 0 0;grid-row:span 3}.peek{top:0;height:26px}.pk{width:20px;height:24px;bottom:-6px}
.cnt{font-size:19px;margin:0}.hint{display:none}.bagbox .btn{padding:10px 18px;font-size:15px;justify-self:start}
.pkg{grid-template-columns:1fr;padding:20px;gap:20px}.pkg h3,.custom h3{font-size:30px}.custom{padding:26px}}
/* v6.1 */
.obj{width:auto;min-width:54px;padding:0 3px}.obj .lb{white-space:nowrap;overflow-wrap:normal;min-height:0;font-size:11.5px}
.obj[aria-pressed=true] .ic{outline:0}.obj[aria-pressed=true] .ic svg{visibility:visible;opacity:.3}
.obj[aria-pressed=true] .lb{text-decoration:none;opacity:.45}.obj[aria-pressed=true]{cursor:pointer}
.exp{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px}
.rc{all:unset;display:inline-flex;align-items:center;gap:6px;background:var(--gre);color:var(--pet);border-radius:30px;padding:4px 6px 4px 6px;font:500 14px Jost;cursor:pointer;white-space:nowrap}
.ri{width:24px;height:26px;display:block}.ri svg{width:100%;height:100%}
.rx{width:22px;height:22px;border-radius:50%;background:var(--pet);color:var(--gre);display:grid;place-items:center;font:500 17px/1 Jost}
@media(max-width:900px){.obj{width:auto;min-width:0;flex:0 0 auto}.items{gap:6px 10px}
.bagbox{grid-template-columns:84px 1fr auto;grid-template-areas:"b e x" "h h h" "c c c";padding:10px 14px 12px}
.bag{grid-area:b;grid-row:auto;width:80px}.cnt{grid-area:c;font-size:17px;margin-top:8px}#close{grid-area:x}
.exp{display:block;grid-area:e;all:unset;grid-area:e;font:500 14px Jost;color:var(--tif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chips{grid-area:h;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:8px -14px 0;padding:0 14px 2px}
.bagbox.open .chips{flex-wrap:wrap;max-height:46vh;overflow:auto}
.rc{font-size:16px;padding:7px 8px 7px 8px;gap:8px}.ri{width:30px;height:33px}.rx{width:30px;height:30px;font-size:21px}}
.note h3{font-size:18px!important}.bagbox:not(:has(.rc)) .exp{display:none!important}
/* v6.2 DM Serif wordmark + hanging tags */
.brand span{font:400 20px "DM Serif Display",serif;letter-spacing:0;text-transform:none;color:var(--pet)}
.obj{display:flex;flex-direction:column;align-items:center}
.obj .lb{order:-1;position:relative;display:inline-block;background:#D6CFC4;color:#0E4D5C;border:2px solid #1C1F22;border-radius:8px;padding:3px 9px 3px 16px;margin:0 0 14px;font:500 11.5px Jost;white-space:nowrap}
.obj .lb::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#1C1F22}
.obj .lb::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:14px;background:#1C1F22}
.obj[aria-pressed=true] .lb{opacity:.35}
.pk{position:absolute}.pk .tg{position:absolute;left:50%;bottom:92%;transform:translateX(-50%);background:#D6CFC4;color:#0E4D5C;border:1.5px solid #1C1F22;border-radius:6px;padding:1px 6px;font:500 9px Jost;white-space:nowrap;pointer-events:none}
.rc .rl{position:relative;background:#D6CFC4;color:#0E4D5C;border:2px solid #1C1F22;border-radius:8px;padding:2px 9px 2px 15px;margin-left:10px}
.rc .rl::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#1C1F22}
.rc .rl::after{content:"";position:absolute;right:100%;top:50%;width:10px;height:2px;background:#1C1F22}
@media(max-width:900px){.pk .tg{display:none}}

/* v6.4 fixes on v62 look */
.bagsvg .bface rect{fill:#EEE8DF}
.bag .peek{z-index:1;top:-30px}.bagsvg{position:relative;z-index:2}
.pk{bottom:0;transform:none;animation:settle .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes settle{0%{transform:translateY(-60px) rotate(-14deg);opacity:0}55%{transform:translateY(4px) rotate(6deg);opacity:1}80%{transform:translateY(-2px) rotate(-2deg)}100%{transform:none}}
.rc .rl::after{display:none}.rc .rl{margin-left:4px}.pk .tg{display:none}
.items{display:grid!important;grid-template-columns:repeat(auto-fill,112px);gap:16px 10px;justify-content:start;align-items:end}
.obj{width:112px;min-width:0;margin:0}
@media(max-width:700px){.items{grid-template-columns:repeat(3,1fr);gap:14px 6px}.obj{width:auto}}
/* v6.5 planks per row, butter + plum accents */
.plank{display:none}
.items{display:grid!important;grid-template-columns:repeat(auto-fill,112px);column-gap:0!important;row-gap:22px!important;align-items:stretch!important;justify-content:start}
.obj{width:112px!important;padding:0!important;justify-content:flex-end;border-bottom:18px solid var(--pet);box-shadow:none;position:relative}
.obj::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:6px;background:var(--not)}
.obj .ic{width:56px;height:58.45px;display:block}.obj .ic svg{display:block;width:100%;height:100%}
.obj:hover .ic{transform:rotate(-4deg);transform-origin:50% 100%}
.obj .lb{margin:0 0 6px!important}.obj .lb::after{height:6px!important}
@media(max-width:700px){.items{grid-template-columns:repeat(3,1fr)}.obj{width:auto!important}}
.pn,#about h1 em.pn{color:#8E1F6B!important}
.contact .btn,.sendb,#sendc{background:#8E1F6B!important;color:#fff!important}
#about h1 em{color:#8E1F6B}
/* v6.7 cream bg, v65 planks, mustard perché no */
body{background:#EEE8DF}
.pn,#about h1 em,#about h1 em.pn,.contact em{color:#E3B23C!important}
.rl{border:0!important;background:transparent!important;padding:2px 4px!important;margin-left:0!important}.rl::before,.rl::after{display:none!important}.rc{border:0!important;outline:0;background:#EEE8DF;border-radius:14px!important}
/* elegant */
.obj{border-bottom:8px solid var(--pet)!important}.obj::after{display:block!important;content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--mus)}.items{row-gap:24px!important}.obj .ic{height:58.03px}
