/* ===== FX layer: premium motion + mobile fixes ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* --- FIX: mobile menu black screen (menu now stacks above overlay) --- */
body.nav-open{overflow:hidden}
body.nav-open .header{z-index:95;transform:none!important}
.header{background:transparent!important}
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(251,248,242,.88);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
body.nav-open .header::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-close{display:none}
@media(max-width:900px){
 .nav{transition:transform .6s var(--ease);box-shadow:24px 0 70px rgba(0,0,0,.3)}
 .nav-close{display:block;position:absolute;top:16px;right:16px;font-size:22px;width:44px;height:44px}
 .nav>ul>li{opacity:0;transform:translateX(-26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
 .nav.open>ul>li{opacity:1;transform:none;transition-delay:calc(.07s*var(--i,0) + .2s)}
 .menu-toggle{min-width:44px;min-height:44px}
}

/* --- FIX: hover effects on touch = "in-view" state --- */
.card.is-active .card-img img.alt{opacity:1}
.card.is-active .card-img img,.step.is-active .step-img img,.coll.is-active .coll-img img{transform:scale(1.07)}
.card.is-active .pack{transform:translateY(-6px) scale(1.04)}
.coll.is-active .coll-img::after{opacity:1}.coll.is-active .link{letter-spacing:.32em}

/* --- Preloader, progress, cursor, page curtain --- */
.prog{position:fixed;top:0;left:0;width:100%;height:3px;z-index:997;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#b98a4b,#f3dfb2,#b98a4b)}

/* --- Hero / VFX --- */
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.slide.active .slide-art{animation:kb 14s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.15)}}
.sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.sp .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transition:transform 1s var(--ease) calc(var(--i)*.07s)}
.sp.in .w>span,.slide.active .sp .w>span{transform:none}
.statement,.craft{position:relative;overflow:hidden}
.statement>*,.craft>*{position:relative;z-index:1}
.statement::before,.craft::before{content:"";position:absolute;width:60vmax;height:60vmax;left:-25vmax;top:-25vmax;background:radial-gradient(circle,rgba(185,138,75,.28),transparent 60%);animation:fl 16s ease-in-out infinite alternate;pointer-events:none}
.craft::after{content:"";position:absolute;width:50vmax;height:50vmax;right:-20vmax;bottom:-25vmax;background:radial-gradient(circle,rgba(243,223,178,.16),transparent 60%);animation:fl 20s ease-in-out infinite alternate-reverse;pointer-events:none}
@keyframes fl{to{transform:translate(32vmax,12vmax) scale(1.25)}}
.card-img,.coll-img{transition:transform .4s var(--ease),box-shadow .4s;will-change:transform}
@media(hover:hover){.card:hover .card-img,.coll:hover .coll-img{box-shadow:0 30px 50px -18px rgba(59,36,24,.45)}}
.btn{position:relative;overflow:hidden;transition:transform .3s var(--ease),background .3s,color .3s}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.btn:hover::after{left:150%}
.logo-mark{background:linear-gradient(110deg,var(--brown) 30%,var(--gold) 50%,var(--brown) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sh 5s linear infinite}
@keyframes sh{to{background-position:-250% 0}}
.nav-close,.menu-toggle{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.dust,.prog,.sw{display:none}}

/* ===== Smoothness + polish ===== */
html{-webkit-text-size-adjust:100%}body{overscroll-behavior-y:none}img{backface-visibility:hidden}
.coll-img img,.step-img img{transition:transform 1.2s var(--ease),clip-path 1.3s var(--ease)}
.coll.reveal:not(.in) .coll-img img,.step.reveal:not(.in) .step-img img{clip-path:inset(0 0 100% 0);transform:scale(1.3)}
.add,.btn{position:relative;overflow:hidden}.add:active,.btn:active{transform:scale(.97)}
.rp{position:absolute;border-radius:50%;background:rgba(243,223,178,.55);transform:scale(0);animation:rp .7s var(--ease) forwards;pointer-events:none}
@keyframes rp{to{transform:scale(4);opacity:0}}
@media(hover:none){.quick-add{display:none}}

/* ===== Mobile bottom navigation ===== */
.bn{display:none}
@media(max-width:900px){
 body{padding-bottom:0}.credit{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important}
 .totop{bottom:calc(98px + env(safe-area-inset-bottom,0px));right:16px}
 .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 .bn{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:66px;padding:0 4px;z-index:60;border-radius:24px;background:rgba(32,18,12,.9);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 20px 44px rgba(0,0,0,.38),inset 0 0 0 1px rgba(243,223,178,.16);animation:bnin .9s var(--ease) .2s both;transition:transform .5s var(--ease)}
 @keyframes bnin{from{transform:translateY(140%)}}
 body.nav-open .bn{transform:translateY(160%)}
 .bn>a,.bn>button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#cdb99a;font:500 10px Jost,sans-serif;letter-spacing:.08em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:color .3s,transform .3s var(--ease)}
 .bn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
 .bn .act{color:#f3dfb2}.bn .act svg{transform:translateY(-2px) scale(1.12)}
 .bn>*:active{transform:scale(.9)}
 .bn-i{position:absolute;top:7px;bottom:7px;left:0;border-radius:18px;background:linear-gradient(160deg,rgba(185,138,75,.38),rgba(185,138,75,.12));box-shadow:inset 0 0 0 1px rgba(243,223,178,.3),0 0 22px rgba(185,138,75,.35);transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
 .bn em{position:absolute;top:7px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#f3dfb2;color:#2b160d;font:600 10px/16px Jost,sans-serif;font-style:normal;text-align:center;transform:scale(0);transition:transform .45s var(--ease)}
 .bn em.show{transform:scale(1)}
}

:root{--drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath fill='%2324130b' d='M0 0H240V10H226V24a7 7 0 0 1-14 0V10H176V19a5 5 0 0 1-10 0V10H130V28a8 8 0 0 1-16 0V10H84V14a4 4 0 0 1-8 0V10H40V21a6 6 0 0 1-12 0V10H0Z'/%3E%3C/svg%3E");--dripg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath fill='%23c9964f' d='M0 0H240V10H226V24a7 7 0 0 1-14 0V10H176V19a5 5 0 0 1-10 0V10H130V28a8 8 0 0 1-16 0V10H84V14a4 4 0 0 1-8 0V10H40V21a6 6 0 0 1-12 0V10H0Z'/%3E%3C/svg%3E")}
/* ===== Chocolate + dry-fruit navigation theme ===== */
.topbar{background:linear-gradient(90deg,#150a05,#2b160d 50%,#150a05);color:#e8cf9b}
.header{color:#f3e6cc;border-bottom:0!important}
.header::before{background:linear-gradient(180deg,rgba(48,25,16,.97),rgba(30,15,8,.97))!important;-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;box-shadow:0 12px 30px rgba(20,8,3,.3)}
.header::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:40px;z-index:-1;pointer-events:none;background:var(--drip) repeat-x 0 0/240px 40px;transform-origin:top;animation:dm 7s ease-in-out infinite alternate;filter:drop-shadow(0 6px 5px rgba(20,8,3,.28))}
@keyframes dm{to{transform:scaleY(1.2)}}
.header.hide{transform:translateY(calc(-100% - 46px))}
.header a,.pin-btn{color:#f3e6cc}.header a:hover,.pin-btn:hover{color:#f0c878}
.logo-mark{background:linear-gradient(110deg,#f3dfb2 30%,#fff6dc 50%,#e0b266 70%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
.logo-text{color:#cfae6e}
.nav>ul>li>a::after{height:2px;background:linear-gradient(90deg,#b98a4b,#f6e6bd)}
.new{background:#f0c878;color:#2b160d}.cart-count{background:#f0c878;color:#2b160d}
.mega{background:linear-gradient(180deg,#2b160d,#1b0e07)!important;border:0!important;border-top:1px solid rgba(243,223,178,.16)!important;box-shadow:0 34px 60px rgba(10,4,1,.55)!important}
.mega-col h4{color:#f0c878}.mega-col a{color:#e6d4b4;transition:color .25s,padding .3s var(--ease)}.mega-col a:hover{color:#f0c878;padding-left:8px}
.mega-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:270px;height:170px;padding:16px;border-radius:14px;overflow:hidden;background:linear-gradient(transparent 30%,rgba(15,6,2,.88)),var(--i) center/cover;transition:transform .5s var(--ease),box-shadow .5s}
.mega-feat:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.5)}.mega-feat small{letter-spacing:.2em;text-transform:uppercase;font-size:10px;color:#f0c878}.mega-feat b{font:600 22px var(--serif);color:#fff}
@media(min-width:901px){.mega-sm{display:flex;justify-content:center;align-items:flex-start;gap:56px}.mega-sm .mega-col{min-width:170px}}
.nav-brand{display:none}
@media(max-width:900px){
 .header::after{height:24px;background-size:144px 24px}.header.hide{transform:translateY(calc(-100% - 30px))}
 .nav{background:radial-gradient(circle at 100% 0,rgba(185,138,75,.28),transparent 55%),linear-gradient(170deg,#3a1f13,#1b0e07)!important;color:#f3e6cc}
 .nav-brand{display:block;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid rgba(243,223,178,.18)}.nav-brand b{display:block;font:600 34px var(--serif);letter-spacing:.16em;color:#f0c878}.nav-brand span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#cdb99a}
 .nav>ul>li>a{font:500 23px var(--serif)!important;letter-spacing:.03em!important;text-transform:none!important;border-bottom:1px solid rgba(243,223,178,.12)!important;color:#f3e6cc}
 .nav-close{color:#f3e6cc}.has-mega.sub .mega{background:transparent!important;border:0!important;box-shadow:none!important}.mega-feat{display:none}
}
/* ===== Soft page transition (gold light sweep + content glide) ===== */
main{animation:pgin .9s var(--ease)}@keyframes pgin{from{opacity:0;transform:translateY(24px)}}
.sw{position:fixed;inset:0;z-index:996;pointer-events:none;transform:translateX(-110%);background:linear-gradient(105deg,transparent 28%,rgba(243,223,178,.16) 45%,rgba(255,246,222,.34) 50%,rgba(243,223,178,.16) 55%,transparent 72%)}
body.leave{pointer-events:none}
body.leave main,body.leave .footer{opacity:0;transform:translateY(-20px) scale(.985);transition:opacity .32s ease,transform .38s var(--ease)}
body.leave .sw{transform:translateX(110%);transition:transform .6s cubic-bezier(.6,0,.2,1)}
/* ===== Footer credit ===== */
.footer{padding-bottom:0}
.credit{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:20px;background:#1d0f08;color:#cdb99a;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.credit::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#c9964f,transparent)}
.credit b{color:#f0c878;font-weight:600}.credit a{color:#f0c878;border-bottom:1px solid rgba(240,200,120,.4)}.credit a:hover{color:#fff}

/* ===== Conversion layer ===== */
.badge.save{left:auto;right:10px;background:linear-gradient(180deg,#e8c27a,#b98a4b);color:#2b160d;font-weight:600}
.card{transition:transform .5s var(--ease)}@media(hover:hover){.card:hover{transform:translateY(-6px)}}
.fly{position:fixed;z-index:1100;border-radius:12px;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.35);will-change:transform}
.bump{animation:bmp .6s var(--ease)}@keyframes bmp{30%{transform:scale(1.35)}60%{transform:scale(.92)}}
#shipBar{display:none;padding:14px 24px;background:#fbf4e6;border-bottom:1px solid var(--line);font-size:13px}#shipBar.on{display:block}
#shipBar i{display:block;height:6px;margin-top:9px;border-radius:6px;background:#eadfc9;overflow:hidden}
#shipBar i b{display:block;height:100%;width:var(--w,0);border-radius:6px;background:linear-gradient(90deg,#b98a4b,#f0c878);transition:width .8s var(--ease)}
#upsell{flex:none;padding:14px 24px 4px;border-top:1px solid var(--line);background:#fffdf8}#upsell h4{font:600 17px var(--serif);margin-bottom:10px}
.ups{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.up{flex:0 0 150px;display:flex;flex-direction:column;gap:4px;font-size:12px}.up .im{display:block;height:84px;border-radius:8px;background:center/cover}.up b{font-weight:500;line-height:1.25}
.up button{margin-top:2px;padding:7px;border:1px solid var(--brown);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:.3s}.up button:hover{background:var(--brown);color:#fff}
.sbuy{position:fixed;left:50%;bottom:20px;z-index:58;width:min(640px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:10px 12px 10px 20px;border-radius:16px;background:rgba(32,18,12,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#f3e6cc;box-shadow:0 20px 50px rgba(0,0,0,.4);transform:translate(-50%,170%);transition:transform .6s var(--ease)}
.sbuy.on{transform:translate(-50%,0)}.sbuy div{flex:1;min-width:0}.sbuy b{display:block;font:600 17px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sbuy span{font-size:13px;color:#f0c878}
.sbuy button{padding:13px 22px;border-radius:10px;background:#f0c878;color:#2b160d;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.sbuy button:disabled{opacity:.5}
@media(max-width:900px){.sbuy{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.trust{background:var(--cream);border-top:1px solid var(--line)}.trust-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:36px;padding-bottom:36px}
.tr{display:flex;align-items:center;gap:14px}.tr svg{flex:none;width:36px;height:36px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tr b{display:block;font:600 17px var(--serif)}.tr span{font-size:12px;color:var(--brown2)}
.xi{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;padding:18px;background:rgba(20,8,3,.66);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}.xi.on{opacity:1;visibility:visible}
.xb{position:relative;width:min(720px,100%);padding:40px 36px 36px;border-radius:20px;text-align:center;color:#f3e6cc;background:radial-gradient(120% 100% at 50% 0,#4a2616,#1d0f08);box-shadow:0 40px 90px rgba(0,0,0,.6);transform:translateY(30px) scale(.96);transition:transform .6s var(--ease)}.xi.on .xb{transform:none}
.xb h3{font:500 clamp(30px,4vw,44px)/1.1 var(--serif)}.xb p{color:#d9c5a0;margin:8px 0 22px}.xb .x{position:absolute;top:12px;right:16px;font-size:20px;color:#f3e6cc}
.xg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;text-align:left}.xg .up{flex:none;color:#f3e6cc}.xg .im{height:120px}.xg .up button{border-color:#f0c878;color:#f0c878}.xg .up button:hover{background:#f0c878;color:#2b160d}
@media(max-width:700px){.trust-g{grid-template-columns:1fr 1fr}.xg{grid-template-columns:1fr 1fr}.xg .up:nth-child(3){display:none}}
#cartBody{min-height:150px}
#upsell{padding:12px 24px 2px}#upsell h4{font-size:16px;margin-bottom:8px}
#upsell .up{flex:0 0 250px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"i n a" "i p a";column-gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff}
#upsell .up .im{grid-area:i;width:52px;height:52px}#upsell .up b{grid-area:n;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#upsell .up span:not(.im){grid-area:p;color:var(--brown2)}#upsell .up button{grid-area:a;margin:0;padding:7px 10px}