/* ==========================================================
   Family Fashion Hub — Motion layer
   সব পেজে শেয়ার করা অ্যানিমেশন। শুধু transform/opacity ব্যবহার,
   তাই GPU-তে চলে। prefers-reduced-motion চালু থাকলে বন্ধ।
   ========================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- পেজ ট্রানজিশন (Chrome/Edge/Safari-র নতুন ভার্সনে) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-fade-out .18s ease both}
::view-transition-new(root){animation:m-fade-in .35s var(--ease-out) both}
@keyframes m-fade-out{to{opacity:0}}
@keyframes m-fade-in{from{opacity:0}}

/* ---------- স্ক্রল প্রগ্রেস বার ---------- */
.m-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--berry),#ff9fbd,#b79cf0);
  transform-origin:0 50%;transform:scaleX(var(--p,0));will-change:transform;opacity:0;transition:opacity .3s}
.m-prog.on{opacity:1}

/* ---------- হেডার ---------- */
header.site{transition:transform .35s var(--ease-out),box-shadow .35s ease!important}
header.site.m-scrolled{box-shadow:0 8px 24px #c93a7016}
.nav a:not(.on)::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:6px;
  background:var(--berry);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav a:not(.on):hover::after{transform:scaleX(1);transform-origin:left}
.ib{transition:scale .2s var(--ease-out),background .2s}
.ib:hover{scale:1.07}
.ib:active{scale:.93}
.ib b.m-bump{animation:m-bump .5s var(--ease-spring)}
@keyframes m-bump{0%{scale:1}35%{scale:1.55}100%{scale:1}}
.search input{transition:border-color .2s,box-shadow .25s,background .2s}
.search input:focus{box-shadow:0 0 0 4px #c93a7018;background:#fff}
.brand .logo{transition:transform .35s var(--ease-out)}
.brand:hover .logo{transform:scale(1.04)}

@media (prefers-reduced-motion:no-preference){

/* ---------- লোডের সময় ---------- */
header.site{animation:m-drop .7s var(--ease-out) backwards}
.strip{animation:m-fade-in .6s ease backwards}
.nav a.on::after{animation:m-draw .7s .45s var(--ease-out) backwards;transform-origin:left}
@keyframes m-drop{from{translate:0 -100%;opacity:0}}
@keyframes m-draw{from{scale:0 1}}

/* ---------- হিরো (হোম) ---------- */
.hero{animation:m-hero-in 1s var(--ease-out) backwards}
@keyframes m-hero-in{from{opacity:0;scale:.975;translate:0 18px}}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none;z-index:0;opacity:.55}
.hero::before{width:340px;height:340px;left:-80px;top:-100px;background:#ffb8cf;animation:m-orb1 14s ease-in-out infinite alternate}
.hero::after{width:300px;height:300px;right:-60px;bottom:-110px;background:#cdb8ff;animation:m-orb2 17s ease-in-out infinite alternate}
@keyframes m-orb1{to{translate:120px 70px;scale:1.2}}
@keyframes m-orb2{to{translate:-110px -60px;scale:1.25}}
.hero .ht,.hero .hv{position:relative;z-index:1}
.ht>*{animation:m-up .85s var(--ease-out) backwards}
.ht>:nth-child(1){animation-delay:.15s}
.ht>:nth-child(2){animation-delay:.28s}
.ht>:nth-child(3){animation-delay:.42s}
.ht>:nth-child(4){animation-delay:.55s}
.ht>:nth-child(5){animation-delay:.68s}
.stats>span{animation:m-up .7s var(--ease-out) backwards}
.stats>span:nth-child(1){animation-delay:.8s}
.stats>span:nth-child(2){animation-delay:.9s}
.stats>span:nth-child(3){animation-delay:1s}
@keyframes m-up{from{opacity:0;translate:0 28px}}

.hero h1 mark{
  background:linear-gradient(transparent 64%,#ffb3cd99 64%) no-repeat 0 0/0% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:m-mark 1s .9s var(--ease-io) forwards}
.hero h1 mark:nth-of-type(2){animation-delay:1.25s}
@keyframes m-mark{to{background-size:100% 100%}}

.pill i{animation:m-twinkle 3.2s ease-in-out 1.4s infinite}
@keyframes m-twinkle{0%,100%{rotate:0deg;scale:1}50%{rotate:14deg;scale:1.12}}

/* হিরোর ছবির বাবলগুলো: প্রথমে পপ করে আসে, তারপর ভাসতে থাকে */
.b1{animation:bob 6s ease-in-out 1.1s infinite,m-pop .9s .35s var(--ease-spring) backwards}
.b2{animation:bob 5s ease-in-out 1.0s infinite,m-pop .9s .2s var(--ease-spring) backwards}
.b3{animation:bob 7s ease-in-out 1.2s infinite,m-pop .9s .5s var(--ease-spring) backwards}
.b4{animation:bob 4.5s ease-in-out .9s infinite,m-pop .9s .65s var(--ease-spring) backwards}
@keyframes m-pop{from{opacity:0;scale:.4;translate:0 40px}}
.bb{--k:0;transition:translate .5s var(--ease-out)}
.b1{--k:16}.b2{--k:-12}.b3{--k:22}.b4{--k:-26}
.hv.m-par .bb{translate:calc(var(--mx,0)*var(--k)*1px) calc(var(--my,0)*var(--k)*1px)}
.sticker{animation:m-sticker .9s 1.0s var(--ease-spring) backwards,m-wiggle 5s 2.4s ease-in-out infinite}
@keyframes m-sticker{from{opacity:0;scale:.2;rotate:-40deg}}
@keyframes m-wiggle{0%,86%,100%{rotate:0deg}90%{rotate:-6deg}94%{rotate:5deg}97%{rotate:-2deg}}
.tag{animation:m-up .8s 1.2s var(--ease-out) backwards}

/* ---------- ভেতরের পেজের টাইটেল ব্লক ---------- */
.phead{position:relative;overflow:hidden;animation:m-hero-in .9s var(--ease-out) backwards}
.phead::after{content:'';position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,#ffffffcc,#ffffff00 70%);pointer-events:none;animation:m-orb2 12s ease-in-out infinite alternate}
.phead>*{position:relative;z-index:1;animation:m-up .8s var(--ease-out) backwards}
.phead>:nth-child(1){animation-delay:.12s}
.phead>:nth-child(2){animation-delay:.24s}
.phead>:nth-child(3){animation-delay:.36s}
body>main>.wrap>.crumb:first-child,main>.wrap>.crumb{animation:m-up .7s var(--ease-out) backwards}

/* ---------- স্ক্রল রিভিল ---------- */
.rv:not(.in){opacity:0}
.rv.in{animation:m-rv .85s var(--ease-out) var(--d,0s) backwards}
.rv[data-rv=l].in{animation-name:m-rv-l}
.rv[data-rv=r].in{animation-name:m-rv-r}
.rv[data-rv=z].in{animation-name:m-rv-z}
@keyframes m-rv{from{opacity:0;translate:0 34px}}
@keyframes m-rv-l{from{opacity:0;translate:-44px 0}}
@keyframes m-rv-r{from{opacity:0;translate:44px 0}}
@keyframes m-rv-z{from{opacity:0;scale:.82}}
/* JS ঠিকমতো না চললেও যেন কনটেন্ট লুকানো না থাকে */
.rv:not(.in){animation:m-safe 0s 4s forwards}
@keyframes m-safe{to{opacity:1}}

/* সেকশন শিরোনামের নিচে আঁকা হওয়া রেখা */
.head h2{position:relative}
.head h2::after{content:'';position:absolute;left:0;bottom:-9px;height:4px;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--berry),#ff9fbd);transition:width .9s .25s var(--ease-out)}
.head.in h2::after{width:44px}

/* ---------- FAQ ---------- */
.faq summary::after{transition:rotate .35s var(--ease-spring);display:inline-block}
.faq details[open] summary::after{rotate:180deg}
.faq details[open] p{animation:m-drop-in .45s var(--ease-out)}
@keyframes m-drop-in{from{opacity:0;translate:0 -10px}}
.faq details{transition:box-shadow .3s}
.faq details:hover{box-shadow:0 14px 30px #c93a7024}

/* ---------- কার্ড ও ইন্টারঅ্যাকশন ---------- */
.card{transition:transform .4s var(--ease-out),box-shadow .4s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 40px #c93a7024}
.art .ic{transition:scale .7s var(--ease-out)}
.card:hover .art .ic{scale:1.08}
.card .off{transition:scale .3s var(--ease-spring)}
.card:hover .off{scale:1.08}
.card h3{transition:color .2s}
.card:hover h3{color:var(--berry)}
.cat .bub{transition:transform .35s var(--ease-spring),box-shadow .3s}
.cat:hover .bub{box-shadow:0 14px 26px #c93a7030}
.cat .bub .ic{transition:scale .5s var(--ease-out)}
.cat:hover .bub .ic{scale:1.12}
.cat:active .bub{transform:scale(.95)}
.box,.rev blockquote,.cp a,.tp a{transition:transform .4s var(--ease-out),box-shadow .4s ease}
.trust .box:hover,.vals .box:hover,.steps .box:hover,.why .box:hover,.cc .box:hover,.info .box:hover,.fts2 .box:hover,.tip:hover{transform:translateY(-5px);box-shadow:0 16px 30px #c93a7020!important}
.rev blockquote:hover,.tp a:hover{transform:translateY(-5px);box-shadow:0 18px 34px #c93a7022}
.trust .box>.ic,.vals .box>.ic,.why .box>.ic,.cc .box>.ic,.info .box>.ic{transition:rotate .5s var(--ease-spring),scale .4s var(--ease-spring)}
.trust .box:hover>.ic,.vals .box:hover>.ic,.why .box:hover>.ic,.cc .box:hover>.ic,.info .box:hover>.ic{rotate:-7deg;scale:1.1}
.steps .box::before{transition:scale .4s var(--ease-spring),rotate .4s var(--ease-spring)}
.steps .box:hover::before{scale:1.18;rotate:-8deg}

/* বাটন: শাইন + রিপল */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:background .2s,transform .2s var(--ease-out),box-shadow .3s ease,color .2s}
.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 26px #c93a7050}
.btn.alt:not(:disabled):hover{box-shadow:0 14px 26px #c93a7028}
.btn:active{transform:scale(.97)!important}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);transition:none}
.btn:not(:disabled):hover::after{left:140%;transition:left .85s var(--ease-out)}
.m-ripple{position:absolute;border-radius:50%;pointer-events:none;background:#ffffff66;z-index:-1;
  translate:-50% -50%;scale:0;animation:m-ripple .7s ease-out forwards}
.btn.alt .m-ripple,.btn.add .m-ripple{background:#c93a7030}
@keyframes m-ripple{to{scale:1;opacity:0}}
.btn.m-ok{animation:m-ok .5s var(--ease-spring)}
@keyframes m-ok{0%{scale:1}40%{scale:1.06}100%{scale:1}}

/* লিংক ও ফর্ম */
.head a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;transition:background-size .35s var(--ease-out)}
.head a:hover{background-size:100% 2px;text-decoration:none}
.fl a{display:inline-block;transition:translate .25s var(--ease-out),color .2s}
.fl a:hover{translate:5px 0}
.fi>.ic{transition:scale .35s var(--ease-spring)}
.fi:hover>.ic{scale:1.12}
.fld input,.fld textarea,.fld select,.sheet input[type=text],.sheet input[type=tel],.sheet textarea,.pp-i input[type=text]{
  transition:border-color .2s,box-shadow .3s ease}
.fld input:focus,.fld textarea:focus,.fld select:focus,.sheet input:focus,.sheet textarea:focus,.pp-i input[type=text]:focus{box-shadow:0 0 0 4px #c93a7016}
.m-shake{animation:m-shake .5s var(--ease-io)!important}
@keyframes m-shake{0%,100%{translate:0}15%{translate:-9px}35%{translate:8px}55%{translate:-6px}75%{translate:4px}}

/* ---------- ড্রয়ার, মেনু, মোডাল ---------- */
.drawer,.mnav{transition:transform .55s var(--ease-out)!important}
.shade.open{animation:m-fade-in .35s ease}
.shade{backdrop-filter:blur(2px)}
.drawer:not(.m-settled) .line{animation:m-line .55s var(--ease-out) backwards}
.drawer:not(.m-settled) .line:nth-child(1){animation-delay:.18s}
.drawer:not(.m-settled) .line:nth-child(2){animation-delay:.26s}
.drawer:not(.m-settled) .line:nth-child(3){animation-delay:.34s}
.drawer:not(.m-settled) .line:nth-child(n+4){animation-delay:.42s}
@keyframes m-line{from{opacity:0;translate:36px 0}}
.line .qty span.m-bump{display:inline-block;animation:m-num .35s var(--ease-spring)}
@keyframes m-num{0%{scale:1}40%{scale:1.4}100%{scale:1}}
.qty button{transition:background .15s,scale .15s var(--ease-spring)}
.qty button:hover{background:#c93a7018}
.qty button:active{scale:.8}
.lines .elogo{animation:m-float 4s ease-in-out infinite}
@keyframes m-float{50%{translate:0 -8px}}
.mnav.open .ml a{animation:m-line .5s var(--ease-out) backwards}
.mnav.open .ml a:nth-child(1){animation-delay:.12s}
.mnav.open .ml a:nth-child(2){animation-delay:.18s}
.mnav.open .ml a:nth-child(3){animation-delay:.24s}
.mnav.open .ml a:nth-child(4){animation-delay:.30s}
.mnav.open .ml a:nth-child(5){animation-delay:.36s}
.mnav.open .mf{animation:m-up .6s .4s var(--ease-out) backwards}
.sheet{animation:m-sheet .5s var(--ease-spring)!important}
@keyframes m-sheet{from{opacity:0;scale:.9;translate:0 24px}}
.modal.open .dlogo{animation:m-celebrate 1s .1s var(--ease-spring) backwards,m-float 3.5s 1.1s ease-in-out infinite}
@keyframes m-celebrate{0%{scale:.2;rotate:-25deg;opacity:0}60%{scale:1.15;rotate:6deg;opacity:1}100%{scale:1;rotate:0}}
.modal.open .sheet>*{animation:m-up .5s var(--ease-out) backwards}
.modal.open .sheet>:nth-child(n+3){animation-delay:.1s}
.modal.open .sheet>:nth-child(n+5){animation-delay:.18s}

/* ---------- প্রোডাক্ট পেজ ---------- */
.pp-art,.pd-art{animation:m-hero-in 1s .1s var(--ease-out) backwards}
.pp-art .ic,.pd-art .ic{transition:scale 1.2s var(--ease-out)}
.pp-art:hover .ic,.pd-art:hover .ic{scale:1.06}
.pp-art .off,.pd-art .off{animation:m-sticker .8s .8s var(--ease-spring) backwards}
.pd-price b{display:inline-block;animation:m-up .7s .35s var(--ease-out) backwards}
.pd-price s{animation:m-fade-in .7s .6s ease backwards}
.pd-price .save{display:inline-block;animation:m-sticker .8s .85s var(--ease-spring) backwards}
.pp-i .tagc{animation:m-up .6s .1s var(--ease-out) backwards}
.pp-i h1{animation:m-up .8s .2s var(--ease-out) backwards}
.pp-i .code{animation:m-fade-in .8s .35s ease backwards}
.pp-i .lead{animation:m-up .8s .45s var(--ease-out) backwards}
.pd-f li{animation:m-line .6s var(--ease-out) backwards}
.pd-f li:nth-child(1){animation-delay:.55s}
.pd-f li:nth-child(2){animation-delay:.65s}
.pd-f li:nth-child(3){animation-delay:.75s}
.pd-f li:nth-child(n+4){animation-delay:.85s}
.pd-buy,.pd-act{animation:m-up .8s var(--ease-out) backwards}
.pd-buy{animation-delay:.8s}
.pd-act{animation-delay:.92s}
.chips>div{animation:m-up .7s var(--ease-out) backwards;transition:transform .35s var(--ease-out),box-shadow .35s}
.chips>div:nth-child(1){animation-delay:.6s}
.chips>div:nth-child(2){animation-delay:.7s}
.chips>div:nth-child(3){animation-delay:.8s}
.chips>div:hover{transform:translateY(-3px);box-shadow:0 10px 20px #c93a7020}
.pd-buy .qty span.m-bump{display:inline-block;animation:m-num .35s var(--ease-spring)}
.ppsub a{transition:background .25s,color .25s}
.ppsub a.m-act{background:var(--blush);color:var(--berry)}
.pps h2,.row2 h2{position:relative}
table.spec tr{transition:background .2s}
table.spec tr:hover{background:#ffdbe655}

} /* /no-preference */

/* ==========================================================
   বডি ব্যাকগ্রাউন্ড: নরম রঙের মেশ + খেলনা-ফ্যাশন থিমের হালকা প্যাটার্ন
   (হার্ট, তারা, স্পার্কল, বুদবুদ) যা ধীরে ধীরে ভেসে চলে
   ========================================================== */
body{
  background-color:var(--bg);
  background-image:linear-gradient(180deg,#fff0f5 0%,#fff7f4 28%,#fbf6ff 62%,#f2fbf6 100%);
  position:relative;
}
/* স্তর ১: নরম রঙিন আলো (মেশ গ্রেডিয়েন্ট) */
body::after{
  content:'';position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 34% at 12% 14%,#ffc9dc99 0,#ffc9dc00 70%),
    radial-gradient(34% 32% at 88% 10%,#d9c9ff99 0,#d9c9ff00 70%),
    radial-gradient(40% 36% at 82% 62%,#ffe2c8aa 0,#ffe2c800 70%),
    radial-gradient(36% 34% at 10% 78%,#c9f2de99 0,#c9f2de00 70%),
    radial-gradient(30% 28% at 50% 40%,#fff3b866 0,#fff3b800 70%);
  will-change:transform;
}
/* স্তর ২: হালকা আইকন-প্যাটার্ন */
body::before{
  content:'';position:fixed;inset:-200px;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40c0-9 11-12 16-5 5-7 16-4 16 5 0 11-16 20-16 20S30 51 30 40z' fill='%23c93a70' fill-opacity='.10'/%3E%3Cpath d='M140 30l3.2 9.6L153 43l-9.8 3.4L140 56l-3.2-9.6L127 43l9.8-3.4z' fill='%239b7be0' fill-opacity='.16'/%3E%3Ccircle cx='96' cy='108' r='7' stroke='%23f2a65a' stroke-opacity='.28' stroke-width='2.4'/%3E%3Cpath d='M160 120v14M153 127h14' stroke='%23c93a70' stroke-opacity='.18' stroke-width='2.6'/%3E%3Cpath d='M42 150l2.6 5.4 5.9.8-4.3 4.2 1 5.9-5.2-2.8-5.3 2.8 1-5.9-4.2-4.2 5.8-.8z' fill='%23f2b84a' fill-opacity='.22'/%3E%3Ccircle cx='110' cy='172' r='4' fill='%235cc9a0' fill-opacity='.22'/%3E%3Ccircle cx='178' cy='80' r='3' fill='%239b7be0' fill-opacity='.22'/%3E%3Ccircle cx='72' cy='72' r='2.4' fill='%23c93a70' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.68;
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  body::after{animation:m-mesh 26s ease-in-out infinite alternate}
  body::before{animation:m-drift 70s linear infinite}
}
@keyframes m-mesh{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.08) rotate(2deg)}
  100%{transform:translate3d(-3%,3%,0) scale(1.14) rotate(-2deg)}
}
@keyframes m-drift{to{transform:translate3d(200px,200px,0)}}
/* ছোট স্ক্রিনে প্যাটার্ন আরও হালকা */
@media (max-width:560px){body::before{opacity:.5}}

/* ==========================================================
   নেভবার: ব্যাকগ্রাউন্ড শুধু ১২০০px কন্টেইনারের ভেতরে (ভাসমান গ্লাস বার)
   ========================================================== */
header.site{background:transparent!important;border-bottom:0!important;padding:10px 16px 6px;pointer-events:none}
header.site .bar{
  pointer-events:auto;position:relative;
  width:100%;max-width:1200px;margin:0 auto;
  padding:10px 22px;border-radius:16px;
  background:linear-gradient(135deg,#ffffffeb,#fff6f9e6 55%,#fbf5ffe6);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid #ffffffd9;
  box-shadow:0 1px 0 #ffffff inset,0 10px 30px #c93a7014,0 2px 6px #c93a700d;
  transition:box-shadow .35s ease,background .35s ease;
}
/* উপরের দিকে রঙিন চিকন হাইলাইট রেখা */
header.site .bar::before{
  content:'';position:absolute;left:28px;right:28px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#ff9fbd00,#ff9fbd,#c93a70,#b79cf0,#b79cf000);opacity:.75;pointer-events:none}
header.site.m-scrolled{box-shadow:none}
header.site.m-scrolled .bar{box-shadow:0 1px 0 #ffffff inset,0 16px 38px #c93a7022,0 3px 8px #c93a7012;background:#ffffffee}
@media(max-width:560px){
  header.site{padding:8px 10px 4px}
  header.site .bar{padding:8px 12px;border-radius:14px}
}

/* প্রোডাক্টের সাব-নেভ নেভবারের ঠিক নিচে বসবে */
.ppsub{top:calc(var(--hh,96px) + 6px)}
body.nh .ppsub{top:12px}

/* ==========================================================
   সব কন্টেন্ট ১২০০px জুড়ে, আর কোনো সাজানো লাইন নেই
   ========================================================== */
.wrap{max-width:none!important;width:min(1200px,calc(100% - 40px));padding:0!important;margin-left:auto!important;margin-right:auto!important}
.phead{width:min(1200px,calc(100% - 40px))!important}
header.site{padding-left:20px!important;padding-right:20px!important}
header.site .bar{max-width:1200px}
@media(max-width:560px){header.site{padding-left:20px!important;padding-right:20px!important}}

/* লাইন বাদ: শিরোনামের নিচের রেখা, নেভবারের ওপরের রেখা, লিংকের আন্ডারলাইন */
.head h2::after{display:none!important}
header.site .bar::before{display:none!important}
.head a,.head a:hover{background:none!important;text-decoration:none!important}
.head a{transition:color .2s}.head a:hover{color:#a82c5b}
/* নেভ লিংক: আন্ডারলাইনের বদলে নরম পিল হাইলাইট */
.nav a::after,.nav a.on::after,.nav a:not(.on)::after{display:none!important}
.nav a{border-radius:10px;transition:background .25s,color .2s}
.nav a:hover{background:#ffdbe680}
.nav a.on{background:var(--blush)}

/* স্লাইড-ইন অ্যানিমেশনের সময় পাশে স্ক্রল বার না আসার জন্য */
html,body{overflow-x:clip}

/* ==========================================================
   মোবাইল: সাইডবারের বদলে ওপর থেকে নিচে নামা "শাটার" মেনু
   ========================================================== */
@media(max-width:900px){
  .mnav{
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:auto;max-height:90vh;max-height:90dvh;
    border-radius:0 0 26px 26px!important;
    transform:translateY(-104%)!important;
    box-shadow:0 30px 60px #3b2a3b33;
    background:linear-gradient(180deg,#fff,#fff7fa);
    padding-bottom:18px;
  }
  .mnav.open{transform:none!important}
  /* নিচে টেনে ধরার মতো ছোট হ্যান্ডেল */
  .mnav::after{content:'';position:absolute;left:50%;bottom:7px;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:#e9c9d6}
  .mnav .mh{border-bottom:0!important;padding:14px 20px 8px}
  .mnav .ml{padding:4px 12px;flex:0 1 auto}
  .mnav .ml a{border-bottom:0!important;border-radius:14px;padding:13px 14px;transition:background .2s}
  .mnav .ml a:active{background:var(--blush)}
  /* বাটন দুটি জায়গা থাকলে পাশাপাশি, না থাকলে নিজে থেকেই একটার নিচে আরেকটা */
  .mnav .mf{background:transparent;padding:10px 20px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:10px}
  .mnav .mf .btn{min-width:0;width:100%;padding:13px 10px;font-size:.95rem;line-height:1.35;text-align:center;white-space:normal;min-height:48px}
  /* সার্চবার মেনুর ভেতরে */
  .msearch{padding:6px 20px 10px}
  .msearch .search{width:100%;order:0;flex-basis:auto;display:block}
  .msearch .search input{padding:13px 48px 13px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px #c93a700f}
  /* শাটারে লিংকগুলো ওপর থেকে নেমে আসে */
  .mnav.open .ml a{animation:m-shutter .55s var(--ease-out) backwards!important}
  .mnav.open .msearch{animation:m-shutter .55s .1s var(--ease-out) backwards}
  .mnav.open .mf{animation:m-shutter .55s .4s var(--ease-out) backwards!important}
  @keyframes m-shutter{from{opacity:0;translate:0 -18px}}
}

/* ==========================================================
   মোবাইল মেনু: নেভবারের নিচে এটাচ হয়ে নামে, থ্রি-লাইন বাটনই X হয়ে বন্ধ করে
   ========================================================== */
.m-burger{position:relative;display:block;width:22px;height:16px;margin:auto}
.m-burger i{position:absolute;left:0;width:100%;height:2.5px;border-radius:3px;background:currentColor;
  transition:top .3s var(--ease-out),transform .5s var(--ease-spring),opacity .2s,scale .3s}
.m-burger i:nth-child(1){top:0}
.m-burger i:nth-child(2){top:6.75px}
.m-burger i:nth-child(3){top:13.5px}
#menuBtn{transition:background .3s,color .3s,scale .2s var(--ease-out)}
#menuBtn[aria-expanded=true]{background:var(--berry);color:#fff}
#menuBtn[aria-expanded=true] .m-burger i:nth-child(1){top:6.75px;transform:rotate(45deg)}
#menuBtn[aria-expanded=true] .m-burger i:nth-child(2){opacity:0;scale:0 1}
#menuBtn[aria-expanded=true] .m-burger i:nth-child(3){top:6.75px;transform:rotate(-45deg)}

@media(max-width:900px){
  header.site .bar{transition:box-shadow .35s ease,background .35s ease,border-radius .35s var(--ease-out),border-color .3s}
  header.site .mnav{
    position:absolute!important;top:100%!important;left:-1px!important;right:-1px!important;bottom:auto!important;
    width:auto!important;height:auto;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);
    transform:none!important;z-index:1;
    border:1px solid #ffffffd9;border-top:0;border-radius:0 0 16px 16px!important;
    background:linear-gradient(135deg,#fffffff7,#fff6f9f2 55%,#fbf5fff2);
    box-shadow:0 28px 46px #c93a7024;
    padding:4px 0 14px;
    visibility:hidden;clip-path:inset(0 -40px 100% -40px);
    transition:clip-path .5s var(--ease-out),visibility 0s .5s!important;
  }
  header.site .mnav.open{visibility:visible;clip-path:inset(0 -40px -80px -40px);
    transition:clip-path .55s var(--ease-out),visibility 0s!important}
  header.site .mnav::after,header.site .mnav .mh{display:none!important}
  header.site .mnav .ml{padding:2px 12px}
  header.site:has(.mnav.open) .bar{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;
    box-shadow:0 1px 0 #ffffff inset,0 -6px 20px #c93a7010}
  /* ওভারলে হেডারের নিচে থাকবে, যাতে বার ও মেনু ঝাপসা না হয় */
  body:has(.mnav.open) .shade{z-index:29}
  header.site .mnav .msearch{padding-top:10px}
}
@media(max-width:900px){
  header.site:has(.mnav.open) .bar{background:linear-gradient(135deg,#fffffff7,#fff6f9f2 55%,#fbf5fff2)}
}