:root{
  --blue:#155ee8;
  --blue-dark:#0d3fa0;
  --blue-rgb:21,94,232;
  --bg0:#f5f8fd;
  --bg1:#eef3fb;
  --bg2:#e4ecf9;
  --ink:#0f1b2d;
  --muted:#5b6b81;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.6);
  --danger:#e0263f;
  --success:#0aa860;
  --radius: 22px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* WordPress কোরের ইমোজি-টু-ইমেজ কনভার্শন বন্ধ করা থাকলেও (দ্রষ্টব্য class-tf-frontend.php),
   কোনো কারণে <img class="emoji"> ট্যাগ চলে এলে যেন টেক্সটের সমান সাইজেই থাকে, বিশাল না দেখায় */
img.emoji{display:inline !important; border:none !important; box-shadow:none !important; height:1em !important; width:1em !important; margin:0 .07em !important; vertical-align:-0.1em !important; background:none !important; padding:0 !important;}
/* Phosphor Icons — আইকনগুলো প্যারেন্ট এলিমেন্টের font-size অনুসরণ করে (em-ভিত্তিক),
   তাই আলাদা করে সাইজ সেট করার দরকার নেই; শুধু বেসলাইনের সাথে ভালোভাবে align করার জন্য
   vertical-align ঠিক করা হলো, আর প্রসেসিং স্পিনারের জন্য একটি ঘূর্ণন অ্যানিমেশন। */
.ph, .ph-fill, .ph-bold, .ph-light, .ph-thin, .ph-duotone{vertical-align:-0.125em;}
.tf-spin{display:inline-block; animation:tfSpin .8s linear infinite;}
@keyframes tfSpin{to{transform:rotate(360deg);}}
/* সক্রিয় থিম যদি "block theme" (theme.json/গ্লোবাল স্টাইল ব্যবহারকারী) হয়, তাহলে
   WordPress কোর কখনো কখনো একটি ইনলাইন 'global-styles' CSS ব্লক wp_head() এর মাধ্যমে
   বসিয়ে দেয় যেটাতে html/body এর জন্য নিজস্ব margin/padding/background থাকতে পারে —
   সেটা আমাদের নিচের রিসেটের চেয়ে পরে লোড হলে ওভাররাইড করে দিয়ে হেডারের উপরে একটা
   পাতলা ফাঁক/লাইন তৈরি করত। !important দিয়ে নিশ্চিত করা হলো আমাদের রিসেটই সবসময় জিতবে। */
html,body.tf-body{margin:0 !important; padding:0 !important;}
html{background:var(--bg0);}
body.tf-body{
  font-family: "Hind Siliguri","Segoe UI",system-ui,sans-serif;
  background: radial-gradient(circle at 20% 0%, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.tf-body img{max-width:100%; display:block;}
.tf-body a{text-decoration:none; color:inherit;}
.tf-body button{font-family:inherit;}

html{scroll-behavior:smooth;}
.topbar{
  position:sticky; top:0; z-index:50;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 0;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.5);
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px;}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; letter-spacing:.3px; min-width:0;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 4px rgba(var(--blue-rgb),.15);}
.brand .mark{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.brand-text b{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-text .tagline{font-size:9.5px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-logo-img{max-height:30px; max-width:150px; object-fit:contain;}
.topbar-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.topbar .call{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--ink); color:#fff; padding:8px 14px; border-radius:100px; font-size:13px; font-weight:600;
}
.topbar .call .ph{font-size:15px;}

/* ---- হ্যামবার্গার মেনু বাটন (শুধু মোবাইলে দেখা যায়, ৬৪০px+ এ হাইড) ----
   আগে মেনু আইটেমগুলো একটা হরাইজন্টাল-স্ক্রল পিল-রো হিসেবে সবসময় দেখাত, যেটা
   জায়গা নিত ও এলোমেলো লাগত — এখন ডিফল্টে লুকানো থাকে, বাটনে ট্যাপ করলে
   একটা ছিমছাম ড্রপডাউন প্যানেল হিসেবে নেমে আসে। */
.menu-toggle{
  width:38px; height:38px; border-radius:12px; flex-shrink:0; cursor:pointer;
  background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:20px;
  transition:.15s;
}
.menu-toggle:active{transform:scale(.94);}
.menu-toggle .ph-x{display:none;}
.menu-toggle.open .ph-list{display:none;}
.menu-toggle.open .ph-x{display:block;}

.topbar-nav{
  position:absolute; left:14px; right:14px; top:calc(100% - 6px); z-index:49;
  display:flex; flex-direction:column; gap:2px; padding:8px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-radius:18px;
  box-shadow:0 16px 36px rgba(20,40,80,0.2);
  opacity:0; pointer-events:none; transform:translateY(-8px); transition:.2s ease;
}
.topbar-nav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
.topbar-nav a{
  padding:12px 14px; border-radius:12px; background:transparent; border:none;
  font-size:14px; font-weight:700; color:var(--ink); white-space:normal;
}
.topbar-nav a:active{background:rgba(var(--blue-rgb),0.08);}
.menu-backdrop{
  position:fixed; inset:0; z-index:45; background:rgba(10,18,32,0.28);
  opacity:0; pointer-events:none; transition:.2s ease;
}
.menu-backdrop.open{opacity:1; pointer-events:auto;}

#why, #products, #reviews, #faq, #checkout{scroll-margin-top:100px;}

.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20,40,80,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

.wrap{max-width:520px; margin:0 auto; padding:14px 14px 40px;}

.hero{position:relative; border-radius: 26px; overflow:hidden; margin-top:8px; box-shadow: 0 14px 34px rgba(20,40,80,0.18); min-height:120px; background:linear-gradient(135deg,var(--bg1),var(--bg0));}
.hero img{width:100%; height:280px; object-fit:cover; object-position: top center;}
.hero .tf-hero-video{display:block; width:100%; height:280px; object-fit:cover;}
.hero .tf-hero-video-embed-wrap{position:relative; width:100%; height:280px; overflow:hidden;}
.hero .tf-hero-video-embed{position:absolute; inset:0; width:100%; height:100%; border:0;}
.hero .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,40,0) 40%, rgba(6,14,28,0.75) 100%);}
.hero .htext{position:absolute; left:0; right:0; bottom:0; padding:18px 20px 20px; color:#fff;}
.hero .badge{display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); padding:5px 12px; border-radius:100px; font-size:12px; font-weight:600; margin-bottom:8px;}
.hero h1{font-size:21px; line-height:1.35; margin:0 0 6px; font-weight:800;}
.hero p{margin:0; font-size:13px; opacity:.92;}

.section-title{font-size:15.5px; font-weight:800; margin: 24px 2px 12px; display:flex; align-items:center; gap:8px;}
.section-title .bar{width:5px;height:16px;border-radius:4px;background:var(--blue);}
.section-sub{font-size:12px; color:var(--muted); margin:-8px 2px 14px;}

.trust{display:flex; gap:8px; margin-top:12px; padding:12px; justify-content:space-between;}
.trust .t-item{flex:1; text-align:center; font-size:11.5px; font-weight:700; color:var(--ink);}
.trust .t-item .ic{font-size:20px; display:block; margin-bottom:4px;}

.why-grid{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.why-item{padding:14px 12px; border-radius:16px; background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.6); text-align:center;}
.why-item .ic{width:42px; height:42px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:20px; background:linear-gradient(135deg, rgba(var(--blue-rgb),0.15), rgba(var(--blue-rgb),0.05));}
.why-item .t{font-size:12.5px; font-weight:800; margin-bottom:3px;}
.why-item .d{font-size:11px; color:var(--muted); line-height:1.4;}

.spec-list{padding:6px 14px 14px;}
.spec-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid rgba(20,40,80,0.08); font-size:13px;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px;}
.spec-row .k .ic{font-size:15px;}
.spec-row .v{font-weight:800; text-align:right;}

.product-grid{display:grid; grid-template-columns:1fr; gap:16px;}
/* container-type দেওয়ায় কার্ডের ভেতরের সবকিছু (নাম/দাম/সাইজ পিল/কার্ট বাটন) নিচে
   cqw ইউনিট দিয়ে কার্ডের নিজের রেন্ডার-করা প্রস্থ অনুযায়ী স্কেল করে — ভিউপোর্ট
   প্রস্থ অনুযায়ী নয়। ফলে অ্যাডমিন প্রতি রোতে যতগুলো প্রোডাক্টই সেট করুন না কেন
   (মোবাইলে ১/২/৩টি, ডেস্কটপে ১-৬টি), কার্ড যত ছোট/বড় হোক প্রতিটি উপাদান নিজে থেকেই
   মানানসই সাইজে নেমে/বেড়ে যায় — আলাদা করে প্রতিটি কলাম-কাউন্টের জন্য ব্রেকপয়েন্ট
   লেখার দরকার হয় না।
*/
.p-card{overflow:hidden; transition:.2s ease; container-type:inline-size; container-name:pcard;}
.p-img-box{position:relative; aspect-ratio:4/4.6; overflow:hidden; border-radius:22px 22px 0 0; background:#e9edf3;}
.p-img-box > img{width:100%; height:100%; object-fit:cover; object-position: top center;}
.p-off{position:absolute; top:12px; right:12px; z-index:5; background:linear-gradient(135deg,#ff5b6a,#e0263f); color:#fff; padding:4px 9px; border-radius:8px; font-size:10.5px; font-weight:800;}
@container pcard (max-width:220px){
  .p-off{top:8px; right:8px; padding:3px 7px; border-radius:7px; font-size:9px;}
}

/* ---- Product image slider/carousel ---- */
.p-slider{position:relative; width:100%; height:100%; overflow:hidden; touch-action:pan-y;}
.p-slider-track{display:flex; width:100%; height:100%; transition:transform .35s cubic-bezier(.4,0,.2,1);}
.p-slider-track img{width:100%; height:100%; object-fit:cover; object-position:top center; flex:0 0 100%;}
.p-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(4px); color:var(--ink); font-size:18px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:4; opacity:0; transition:.2s;
  box-shadow:0 3px 10px rgba(20,40,80,0.18); line-height:0; padding:0 0 2px;
}
.p-slider:hover .p-slider-arrow{opacity:1;}
.p-slider-arrow.prev{left:8px;}
.p-slider-arrow.next{right:8px;}
.p-slider-dots{
  position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:5px; z-index:4;
}
.p-dot{width:6px; height:6px; border-radius:100px; background:rgba(255,255,255,0.6); box-shadow:0 1px 2px rgba(0,0,0,0.2); transition:.25s;}
.p-dot.active{width:16px; background:#fff;}

@media (hover:none){
  .p-slider-arrow{opacity:1; background:rgba(255,255,255,0.7);}
}
.p-body{padding:clamp(10px,3.6vw,14px);}
/* একক লাইনে ellipsis-এ কাটার বদলে ২ লাইন পর্যন্ত wrap করে দেখানো হয় — নাহলে
   প্রতি রোতে ২/৩টি প্রোডাক্ট (সংকীর্ণ কার্ড) সেট করা থাকলে প্রোডাক্টের নাম মাঝপথে
   কেটে যেত (যেমন "Fida Men's 100%…"), কাস্টমার আসল নামটাই বুঝতে পারত না। ফন্ট
   সাইজ vw-ভিত্তিক clamp() হলো fallback (পুরোনো ব্রাউজার), নিচে cqw-ভিত্তিক @container
   রুল সাপোর্ট করা ব্রাউজারে এটাকে ওভাররাইড করে কার্ডের আসল প্রস্থ অনুযায়ী স্কেল করবে। */
.p-name{font-weight:800; font-size:clamp(12.5px,3.6vw,14.5px); margin-bottom:2px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p-color{font-size:11.5px; color:var(--muted); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.p-price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.p-price-now{font-size:clamp(15.5px,4.2vw,19px); font-weight:900; color:var(--blue-dark);}
.p-price-old{font-size:12.5px; color:#9aa7b8; text-decoration:line-through;}
.p-size-label{font-size:11px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.p-size-grid{display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap;}
/* ফিক্সড 38px প্রস্থ ও চওড়া সাইড-প্যাডিং এর বদলে সরু flex পিল দেওয়া হয়েছে — সাইজ
   সংখ্যা যতই হোক (S/M/L/XL/XXL), সাধারণত সবগুলো এক লাইনেই ধরে যায় (২/৩-কলাম মোবাইলের
   সংকীর্ণ কার্ডেও), অতিরিক্ত সাইজ থাকলে wrap বাই-ডিফল্ট সেফটি-নেট হিসেবে থেকে যায়। */
.p-size-pill{padding:6px 1px; flex:1 1 24px; min-width:22px; max-width:44px; text-align:center; border-radius:8px; font-weight:700; font-size:11.5px; background:rgba(255,255,255,0.65); border:1.5px solid rgba(20,40,80,0.12); cursor:pointer; transition:.15s;}
.p-size-pill.active{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 4px 10px rgba(var(--blue-rgb),0.3);}
.p-size-pill.disabled{opacity:.35; text-decoration:line-through; cursor:not-allowed; pointer-events:none;}
/* funnel.js কার্ট-স্টেট বদলালে বাটনের textContent সরাসরি প্লেইন স্ট্রিং দিয়ে
   রিপ্লেস করে দেয় (দেখুন funnel.js) — তাই এখানে কোনো <span> চাইল্ডের উপর নির্ভর
   করা যাবে না (JS সেটা মুছে দেবে)। তার বদলে খুব সংকীর্ণ কার্ডে টেক্সট এক লাইনে
   না আঁটলে স্বাভাবিকভাবেই ২ লাইনে wrap হবে (nowrap নেই), যাতে কখনো কার্ডের বাইরে
   উপচে না পড়ে বা অক্ষর কেটে না যায়। */
.p-order-btn{width:100%; padding:12px; border:none; border-radius:13px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; font-size:13.5px; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(var(--blue-rgb),0.3); display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; line-height:1.25;}
.p-order-btn:active{transform:scale(.98);}
.p-order-btn.in-cart{background:linear-gradient(135deg,var(--success),#087a48);}
.p-order-btn:disabled{opacity:.6; cursor:progress;}

/* ---- কার্ডের নিজস্ব প্রস্থ অনুযায়ী ফ্লুইড স্কেলিং (Container Queries) ----
   ভিউপোর্ট নয়, বরং .p-card এর প্রকৃত রেন্ডার-করা প্রস্থ (cqw = কার্ড-প্রস্থের ১%)
   ভিত্তিতে সাইজ ঠিক হয় — তাই "প্রতি রোতে কয়টি প্রোডাক্ট" সেটিং যেকোনো মান
   (১/২/৩ মোবাইলে, ১-৬ ডেস্কটপে) হলেও প্রতিটি উপাদান স্বয়ংক্রিয়ভাবে মানানসই থাকে। */
@container pcard (max-width:9999px){
  .p-body{padding:clamp(8px,6cqw,16px);}
  .p-name{font-size:clamp(10.5px,4.6cqw,15px);}
  .p-color{font-size:clamp(8.5px,3.6cqw,12px); margin-bottom:clamp(4px,2.2cqw,8px);}
  .p-price-row{gap:clamp(4px,2cqw,8px); margin-bottom:clamp(6px,3cqw,10px);}
  .p-price-now{font-size:clamp(12.5px,6cqw,19px);}
  .p-price-old{font-size:clamp(9px,3.4cqw,12.5px);}
  .p-size-label{font-size:clamp(8.5px,3cqw,11px); margin-bottom:clamp(4px,1.8cqw,6px);}
  .p-size-grid{gap:clamp(2px,1cqw,4px); margin-bottom:clamp(8px,3.2cqw,12px);}
  .p-size-pill{padding:clamp(3px,1.6cqw,6px) 1px; font-size:clamp(8.5px,3.2cqw,11.5px); border-radius:clamp(5px,1.8cqw,8px);}
  .p-order-btn{padding:clamp(8px,3.6cqw,12px); font-size:clamp(10.5px,3.8cqw,13.5px); gap:clamp(3px,1.6cqw,6px); border-radius:clamp(9px,3.6cqw,13px);}
}

#checkout{scroll-margin-top:78px;}
/* box-shadow সরাসরি অ্যানিমেট করলে প্রতি ফ্রেমে রিপেইন্ট হয় (GPU-কম্পোজিটেড নয়, Lighthouse
   এটাকে "non-composited animation" হিসেবে ফ্ল্যাগ করে) — তাই একটা আলাদা ::after রিং
   পিছনে বসিয়ে শুধু transform+opacity অ্যানিমেট করা হচ্ছে, box-shadow-টা স্ট্যাটিক থেকে যায়
   (রিং হিসেবে border ব্যবহার করা হয়েছে, box-shadow নয়, যাতে scale() করলে স্বাভাবিক দেখায়)। */
.checkout-flash{position:relative;}
.checkout-flash::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  border:2px solid rgba(var(--blue-rgb),0.55); opacity:0; transform:scale(1);
  animation:flashGlow 1.1s ease; pointer-events:none;
}
@keyframes flashGlow{
  0%{opacity:.9; transform:scale(1);}
  100%{opacity:0; transform:scale(1.04);}
}

.basket-head{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 4px;}
.basket-head .bh-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px;}
.basket-count{background:var(--blue); color:#fff; font-size:11px; font-weight:800; padding:2px 9px; border-radius:100px;}

.reward-box{padding:14px 16px 18px;}

.reward-msg{
  display:flex; align-items:center; gap:9px; margin-bottom:16px; padding:10px 14px; border-radius:14px;
  font-size:12.5px; font-weight:700; color:var(--blue-dark);
  background:linear-gradient(135deg, rgba(var(--blue-rgb),0.1), rgba(63,208,201,0.08));
  border:1px solid rgba(var(--blue-rgb),0.15); transition:.3s;
}
.reward-msg.done{color:var(--success); background:linear-gradient(135deg, rgba(10,168,96,0.12), rgba(63,208,201,0.08)); border-color:rgba(10,168,96,0.25);}
.reward-msg .rm-ic{font-size:16px; flex:0 0 auto; animation:rmBounce 1.4s ease-in-out infinite;}
.reward-msg.done .rm-ic{animation:none;}
.reward-msg .rm-text{flex:1; line-height:1.4;}
@keyframes rmBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);}}

.progress-track{position:relative; height:12px; border-radius:100px; background:rgba(20,40,80,0.08); overflow:visible; margin:0 4px; box-shadow:inset 0 1px 2px rgba(20,40,80,0.08);}
.progress-fill{
  position:absolute; left:0; top:0; height:100%; border-radius:100px; width:0%;
  background:linear-gradient(90deg,var(--blue),#3fd0c9,var(--blue));
  transition:width .6s cubic-bezier(.4,0,.2,1); box-shadow:0 0 10px rgba(var(--blue-rgb),0.5);
  overflow:hidden;
}
/* আগে background-position অ্যানিমেট হতো (non-composited, প্রতি ফ্রেমে রিপেইন্ট) — এখন
   এই ওভারলেটাকে চারপাশে ১৪px (এক রিপিট-ইউনিট) বেশি বড় রেখে শুধু transform:translateX
   অ্যানিমেট করা হচ্ছে (GPU-কম্পোজিটেড)। বাড়তি ওভারস্ক্যান মার্জিনের কারণে ট্রান্সলেট করার
   সময় প্যারেন্টের overflow:hidden ক্লিপ এরিয়ায় কখনো ফাঁকা জায়গা দেখা যায় না — ঠিক একই
   রকম নিরবচ্ছিন্ন "মার্চিং স্ট্রাইপ" ভিজ্যুয়াল বজায় থাকে। */
.progress-fill::after{
  content:""; position:absolute; top:-14px; bottom:-14px; left:-14px; right:-14px;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 7px, transparent 7px 14px);
  animation:stripeMove 900ms linear infinite; opacity:.7;
}
@keyframes stripeMove{from{transform:translateX(0);} to{transform:translateX(14px);}}

.progress-milestone{
  position:absolute; top:50%; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%;
  background:#fff; border:2.5px solid rgba(20,40,80,0.15); display:flex; align-items:center; justify-content:center;
  font-size:11px; z-index:2; transition:.3s;
}
.progress-milestone.reached{border-color:var(--blue); background:var(--blue); color:#fff; transform:translate(-50%,-50%) scale(1.15); box-shadow:0 3px 8px rgba(var(--blue-rgb),0.4);}
.progress-milestone.final.reached{border-color:var(--success); background:var(--success); box-shadow:0 3px 8px rgba(10,168,96,0.4);}
/* box-shadow রিং অ্যানিমেশনের বদলে ::after দিয়ে border+transform+opacity (GPU-কম্পোজিটেড) —
   .progress-milestone ইতিমধ্যেই position:absolute, তাই ::after সেটার সাপেক্ষেই বসে। */
.progress-milestone.next-target::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(var(--blue-rgb),0.5); opacity:0; transform:scale(1);
  animation:milestonePulse 1.4s ease-in-out infinite; pointer-events:none;
}
@keyframes milestonePulse{
  0%{opacity:.8; transform:scale(1);}
  70%,100%{opacity:0; transform:scale(1.7);}
}

/* ---- Tier chips — অ্যাকর্ডিয়ন-স্টাইল ক্যাপসুল ----
   ডিফল্টে প্রতিটি টিয়ার শুধু আইকন + ২-৩ শব্দের সংক্ষিপ্ত ক্যাপসুল হিসেবে থাকে
   (.tc-short দৃশ্যমান, .tc-text লুকানো) — শুধুমাত্র "বর্তমান লক্ষ্য" টিয়ারটা
   (.next-target, funnel.js থেকে টগল হয়) পূর্ণ বাক্য সহ প্রশস্ত হয়ে খুলে যায়
   (flex-grow দিয়ে বাকি জায়গা দখল করে), আর নতুন টিয়ার একটিভ হলে আগেরটা আবার
   ছোট হয়ে যায় — ডেস্কটপ/মোবাইল উভয় জায়গাতেই একই ফ্লেক্স-বেসড লজিক কাজ করে,
   আলাদা মিডিয়া-কুয়েরির দরকার নেই। */
.tier-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;}
.tier-chip{
  display:flex; align-items:center; gap:5px; padding:6px 11px 6px 8px; border-radius:100px;
  background:rgba(255,255,255,0.65); border:1.5px solid rgba(20,40,80,0.12); font-size:10.5px; font-weight:700;
  color:var(--muted); transition:background .25s ease, border-color .25s ease, color .25s ease, flex-grow .3s ease;
  flex:0 1 auto; max-width:100%; overflow:hidden; cursor:default;
}
.tier-chip .tc-check{
  display:none; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:var(--success); color:#fff; font-size:9.5px; flex:0 0 auto;
}
/* ক্যাপসুল ছোট করা হলেও আইকনের সাইজ অপরিবর্তিত রাখা হয়েছে (শুধু টেক্সট/প্যাডিং কমেছে) */
.tier-chip .tc-ic{font-size:13px; flex:0 0 auto;}
.tier-chip .tc-short{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tier-chip .tc-text{display:none; white-space:normal; line-height:1.4;}
.tier-chip.reached{
  background:linear-gradient(135deg, rgba(10,168,96,0.12), rgba(10,168,96,0.05)); border-color:rgba(10,168,96,0.35); color:var(--ink);
}
.tier-chip.reached .tc-check{display:flex;}
.tier-chip.reached .tc-ic{display:none;}
/* একটা টিয়ার অর্জিত হওয়ার পরও, যতক্ষণ না সর্বশেষ টিয়ারটাও অর্জিত হচ্ছে (পুরো সিস্টেম
   "সম্পন্ন"), ততক্ষণ এটা ছোট "✓ অর্জিত" ক্যাপসুল হিসেবে দৃশ্যমানই থাকে — funnel.js
   #tierChips এ .all-complete ক্লাস বসায় শুধুমাত্র তখনই, যখন সর্বশেষ টিয়ারও পূর্ণ হয়ে
   যায়; তখনই আগের অর্জিত ক্যাপসুলগুলো (যেগুলো আর "বর্তমান লক্ষ্য" নয়) সম্পূর্ণ হাইড হয়ে
   যায়, শুধু সর্বশেষটা "সম্পন্ন" অবস্থায় খোলা থাকে। */
#tierChips.all-complete .tier-chip.reached:not(.next-target){display:none;}
.tier-chip.next-target{
  border-color:var(--blue); background:rgba(var(--blue-rgb),0.08); color:var(--blue-dark);
  flex:1 1 220px; position:relative;
  /* এক্সপ্যান্ড অবস্থায় ellipsis-truncation দরকার হয় না (tc-short তখন হাইডই থাকে) —
     তাই overflow:visible করে দেওয়া হয়েছে, নাহলে নিচের ::after রিং ক্লিপ হয়ে যেত। */
  overflow:visible;
}
.tier-chip.next-target .tc-short{display:none;}
.tier-chip.next-target .tc-text{display:inline;}
/* box-shadow রিং অ্যানিমেশনের বদলে ::after দিয়ে border+transform+opacity (GPU-কম্পোজিটেড) */
.tier-chip.next-target::after{
  content:""; position:absolute; inset:0; border-radius:100px;
  border:2px solid rgba(var(--blue-rgb),0.45); opacity:0; transform:scale(1);
  animation:chipPulse 1.6s ease-in-out infinite; pointer-events:none;
}
@keyframes chipPulse{
  0%{opacity:.7; transform:scale(1);}
  70%,100%{opacity:0; transform:scale(1.06);}
}

.cart-items{padding:4px 12px 8px; display:flex; flex-direction:column; gap:8px;}
.cart-empty{padding:28px 20px; text-align:center; color:var(--muted); font-size:13px;}
.cart-empty .ic{font-size:34px; display:block; margin-bottom:8px;}
.cart-item{display:flex; align-items:center; gap:10px; padding:10px; border-radius:16px; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.6); animation:cartIn .3s ease;}
@keyframes cartIn{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.cart-item .ci-thumb{width:50px; height:58px; border-radius:12px; overflow:hidden; flex:0 0 auto; background:#fff;}
.cart-item .ci-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.cart-item .ci-info{flex:1; min-width:0;}
.cart-item .ci-name{font-weight:800; font-size:12.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cart-item .ci-meta{font-size:11px; color:var(--muted); margin-top:2px;}
.cart-item .ci-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.cart-item .ci-price{font-weight:800; font-size:12.8px; color:var(--blue-dark);}
.ci-qty{display:flex; align-items:center; border:1.5px solid rgba(20,40,80,0.15); border-radius:9px; overflow:hidden;}
.ci-qty button{width:24px; height:24px; border:none; background:rgba(255,255,255,0.7); font-size:13px; font-weight:700; cursor:pointer; color:var(--blue-dark);}
.ci-qty span{width:22px; text-align:center; font-size:12px; font-weight:800;}
.ci-remove{width:26px; height:26px; border-radius:50%; border:none; background:rgba(224,38,63,0.1); color:var(--danger); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.ci-qty button[disabled]{opacity:.35; cursor:not-allowed;}
.cart-item-sticky{background:rgba(255,244,222,0.65); border-color:rgba(200,150,20,0.35);}
.ci-sticky-badge{font-size:10px; vertical-align:middle;}
.ci-size-select{
  font-size:11px; font-weight:700; padding:2px 6px; border-radius:7px; border:1.5px solid rgba(20,40,80,0.15);
  background:#fff; color:var(--ink); max-width:80px;
}

.cart-item-gift{background:rgba(var(--blue-rgb),0.08); border-color:rgba(var(--blue-rgb),0.25);}
.ci-gift-badge{font-size:10px; font-weight:800; color:var(--blue-dark); vertical-align:middle;}
.ci-price-free{color:var(--success, #0aa860);}

.gift-picker{margin:4px 12px 10px; padding:12px; border-radius:16px; background:rgba(var(--blue-rgb),0.06); border:1px dashed rgba(var(--blue-rgb),0.3); animation:cartIn .3s ease;}
.gp-title{font-size:12.5px; font-weight:800; color:var(--blue-dark); margin-bottom:10px;}
.gp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:8px;}
.gp-card{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border-radius:12px;
  background:#fff; border:1.5px solid rgba(20,40,80,0.1); cursor:pointer; text-align:center; transition:.15s;
}
.gp-card:hover{border-color:var(--blue); transform:translateY(-2px);}
.gp-card img{width:48px; height:56px; object-fit:cover; border-radius:8px; background:#f3f5f9;}
.gp-name{
  font-size:10.5px; font-weight:700; line-height:1.3; color:var(--ink); width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.form-card{padding:16px;}
.tf-cf-fields-grid{display:flex; flex-wrap:wrap; margin:0 -6px;}
.tf-cf-field{padding:0 6px; box-sizing:border-box;}
.tf-cf-collapsible-toggle{font-size:12.5px; font-weight:700; color:var(--blue); cursor:pointer; margin-bottom:8px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--ink);}
.field input, .field textarea, .field select{width:100%; padding:13px 14px; border-radius:14px; border:1.5px solid rgba(20,40,80,0.14); background:rgba(255,255,255,0.75); font-size:14.5px; font-family:inherit; color:var(--ink); outline:none; transition:.15s;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--blue); background:#fff;}
.field textarea{resize:none; min-height:64px;}
.radio-row{display:flex; gap:10px; flex-wrap:wrap;}
.radio-card{flex:1 1 120px; padding:12px; border-radius:14px; border:1.5px solid rgba(20,40,80,0.14); background:rgba(255,255,255,0.6); text-align:center; cursor:pointer; font-size:13px; font-weight:700;}
.radio-card small{display:block; font-weight:600; color:var(--muted); margin-top:2px; font-size:11px;}
.radio-card.active{border-color:var(--blue); background:rgba(var(--blue-rgb),0.08); color:var(--blue-dark);}

.free-delivery-note{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(10,168,96,0.12), rgba(63,208,201,0.08)); border:1px solid rgba(10,168,96,0.25);
  animation:fdnPop .35s ease;
}
.free-delivery-note .fdn-ic{font-size:18px; flex:0 0 auto;}
.free-delivery-note .fdn-text{font-size:12.5px; color:var(--ink); line-height:1.5;}
.free-delivery-note .fdn-text b{color:var(--success);}
@keyframes fdnPop{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}

.custom-shipping-msg{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:rgba(var(--blue-rgb),0.08); border:1px solid rgba(var(--blue-rgb),0.2); margin-bottom:12px;
}
.custom-shipping-msg .fdn-ic{font-size:18px; flex:0 0 auto;}
.custom-shipping-msg .fdn-text{font-size:12.5px; color:var(--ink); line-height:1.5;}

.form-card-heading{font-size:14.5px; font-weight:800; margin-bottom:12px; color:var(--ink);}

.field-toggle-row{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; cursor:pointer;}
.field-toggle-row input{width:18px; height:18px; accent-color:var(--blue); flex:0 0 auto;}

.coupon-field .coupon-row{display:flex; gap:8px;}
.coupon-field .coupon-row input{flex:1;}
.coupon-field .tf-coupon-apply{
  flex:0 0 auto; padding:0 18px; border-radius:14px; border:none; background:var(--ink); color:#fff;
  font-size:13px; font-weight:700; cursor:pointer;
}
.coupon-field .coupon-msg{font-size:12px; margin-top:6px; min-height:14px;}
.coupon-field .coupon-msg.success{color:var(--success);}
.coupon-field .coupon-msg.error{color:var(--danger);}

.summary-block{margin-top:16px; padding-top:14px; border-top:1.5px dashed rgba(20,40,80,0.18);}
.summary-row{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 2px; color:var(--muted);}
.summary-row.total{font-size:16.5px; font-weight:900; color:var(--ink); margin-top:4px;}
.summary-row.total span:last-child{color:var(--blue-dark);}
.summary-row.discount span:last-child{color:var(--success); font-weight:700;}

.cta-btn{width:100%; padding:16px; border:none; border-radius:16px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(var(--blue-rgb),0.35); display:flex; align-items:center; justify-content:center; gap:8px;}
.cta-btn:active{transform:scale(.98);}
.cta-btn:disabled{opacity:.65; cursor:progress;}

.reviews{padding:14px; display:flex; flex-direction:column; gap:10px;}
.review{padding:12px 14px; border-radius:16px; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.6);}
.review .rh{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
.review .name{font-weight:800; font-size:13px;}
.review .stars{color:#f5a623; font-size:12px;}
.review p{margin:0; font-size:12.8px; color:var(--muted); line-height:1.5;}

.faq{padding:14px;}
.faq-item{border-bottom:1px solid rgba(20,40,80,0.1);}
.faq-item:last-child{border-bottom:none;}
.faq-q{padding:14px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:13.5px;}
.faq-q .plus{transition:.2s; font-size:18px; color:var(--blue);}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:12.8px; color:var(--muted); line-height:1.6;}
.faq-item.open .faq-a{max-height:200px; padding-bottom:14px;}

footer{text-align:center; padding:26px 20px 10px; font-size:11.5px; color:var(--muted);}

.side-fab-stack{
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; gap:12px;
}
.size-fab{
  position:relative; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.7); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); box-shadow:0 10px 26px rgba(20,40,80,0.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--blue-dark); font-size:19px;
}
.size-fab.tutorial-fab{color:#e0263f;}
.size-fab .lbl{font-size:8.5px; font-weight:800; letter-spacing:.2px;}
/* box-shadow "রিপল" প্রতি ফ্রেমে রিপেইন্ট করত (non-composited) — এখন একটা আলাদা ::after
   রিং (border, transform+opacity দিয়ে অ্যানিমেটেড) দিয়ে একই ভিজ্যুয়াল এফেক্ট, GPU-কম্পোজিটেড। */
.size-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(var(--blue-rgb),0.4); opacity:0; transform:scale(1);
  animation:fabPulse 2.6s ease-in-out infinite; pointer-events:none;
}
.size-fab.tutorial-fab::after{border-color:rgba(224,38,63,0.4); animation-delay:.4s;}
@keyframes fabPulse{
  0%{opacity:.7; transform:scale(1);}
  70%,100%{opacity:0; transform:scale(1.35);}
}

/* ---- Tutorial modal content ---- */
.tutorial-items{display:flex; gap:16px;}
.tutorial-items.tutorial-vertical{flex-direction:column;}
.tutorial-items.tutorial-horizontal{flex-direction:row; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory;}
.tutorial-items.tutorial-horizontal .tutorial-item{flex:0 0 82%; scroll-snap-align:start;}
.tutorial-item.tutorial-text{font-size:13.5px; line-height:1.7; color:var(--ink);}
.tutorial-item.tutorial-text p{margin:0 0 10px;}
.tutorial-item.tutorial-image img{width:100%; border-radius:14px; display:block;}
.tutorial-item.tutorial-video video{width:100%; border-radius:14px; display:block; background:#000;}

.modal-overlay{position:fixed; inset:0; z-index:200; background:rgba(10,18,32,0.5); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:.25s ease; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-card{width:100%; max-width:480px; max-height:82vh; overflow-y:auto; background:rgba(255,255,255,0.92); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border-radius:26px 26px 0 0; padding:22px 20px calc(env(safe-area-inset-bottom) + 24px); transform:translateY(30px); transition:.25s ease; border:1px solid rgba(255,255,255,0.7); box-shadow:0 -10px 40px rgba(20,40,80,0.25);}
.modal-overlay.open .modal-card{transform:translateY(0);}
@media (min-width:640px){ .modal-overlay{align-items:center;} .modal-card{border-radius:26px; max-height:86vh;} }
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.modal-head h3{margin:0; font-size:17px; font-weight:800;}
.modal-close{width:32px; height:32px; border-radius:50%; border:none; background:rgba(20,40,80,0.08); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink);}
.size-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px;}
.size-table th, .size-table td{padding:10px 8px; text-align:center; border-bottom:1px solid rgba(20,40,80,0.1);}
.size-table th{background:rgba(var(--blue-rgb),0.08); color:var(--blue-dark); font-weight:800; font-size:12px;}
.size-table tr:last-child td{border-bottom:none;}
.size-table td:first-child{font-weight:800;}
.modal-note{margin-top:14px; padding:12px 14px; border-radius:14px; background:rgba(var(--blue-rgb),0.07); font-size:12px; color:var(--muted); line-height:1.6;}
.modal-note b{color:var(--ink);}

.toast{position:fixed; left:50%; top:16px; transform:translateX(-50%) translateY(-140px); z-index:100; background:var(--ink); color:#fff; padding:12px 20px; border-radius:100px; font-size:13px; font-weight:700; transition:.3s ease; box-shadow:0 10px 24px rgba(0,0,0,0.25); opacity:0; pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1;}
.toast.error{background:var(--danger);}

/* ---------- Thank You page ---------- */
.tf-ty-wrap{padding-top:24px;}
.tf-ty-hero{padding:34px 24px 28px; text-align:center;}
.tf-ty-check{margin:0 auto 16px;}
.tf-ty-check-circle{stroke:var(--success); stroke-width:2.5; stroke-dasharray:166; stroke-dashoffset:166; animation:tyCircle .5s ease forwards;}
.tf-ty-check-mark{stroke:var(--success); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:tyCheck .35s .45s ease forwards;}
@keyframes tyCircle{to{stroke-dashoffset:0;}}
@keyframes tyCheck{to{stroke-dashoffset:0;}}
.tf-ty-hero h1{font-size:22px; font-weight:900; margin:0 0 8px; color:var(--ink);}
.tf-ty-sub{font-size:13.5px; color:var(--muted); max-width:380px; margin:0 auto; line-height:1.6;}
.tf-ty-order-id{
  display:inline-block; margin-top:16px; background:rgba(var(--blue-rgb),0.08); color:var(--blue-dark);
  padding:8px 18px; border-radius:100px; font-size:13px; font-weight:700;
}

.tf-ty-grid{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.tf-ty-card{padding:18px;}
.tf-ty-card-title{font-weight:800; font-size:14px; margin-bottom:12px;}
.tf-ty-items{display:flex; flex-direction:column; gap:10px;}
.tf-ty-item{display:flex; align-items:center; gap:10px;}
.tf-ty-item img{width:44px; height:50px; object-fit:cover; border-radius:10px; background:#fff; flex:0 0 auto;}
.tf-ty-item-info{flex:1; min-width:0;}
.tf-ty-item-name{font-weight:700; font-size:12.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tf-ty-item-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.tf-ty-item-price{font-weight:800; font-size:12.8px; color:var(--blue-dark);}
.tf-ty-item-free{color:var(--success, #0aa860);}

.tf-ty-totals{margin-top:14px; padding-top:14px; border-top:1.5px dashed rgba(20,40,80,0.15);}
.tf-ty-total-row{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:4px 0;}
.tf-ty-total-row.tf-ty-discount span:last-child{color:var(--success); font-weight:700;}
.tf-ty-total-row.tf-ty-grand{font-size:16px; font-weight:900; color:var(--ink); margin-top:4px;}
.tf-ty-total-row.tf-ty-grand span:last-child{color:var(--blue-dark);}

.tf-ty-info-row{display:flex; justify-content:space-between; gap:10px; font-size:12.8px; padding:8px 0; border-bottom:1px solid rgba(20,40,80,0.06);}
.tf-ty-info-row:last-child{border-bottom:none;}
.tf-ty-info-row .k{color:var(--muted); font-weight:600; flex:0 0 auto;}
.tf-ty-info-row .v{font-weight:700; text-align:right;}

.tf-ty-next{margin-top:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.tf-ty-next-item{font-size:12.8px; color:var(--ink); display:flex; align-items:center; gap:10px;}
.tf-ty-next-item .ic{font-size:16px;}

.tf-ty-cta{margin-top:18px; text-decoration:none;}

@media (min-width:760px){
  .tf-ty-grid{flex-direction:row;}
  .tf-ty-grid .tf-ty-card{flex:1;}
}

@media (min-width:540px){ .wrap{max-width:560px;} }

@media (min-width:640px){
  /* যথেষ্ট চওড়া স্ক্রিনে লোগো + মেনু + কল-বাটন একই সারিতে পাশাপাশি বসে (লোগো -- মেনু -- বাটন) —
     সরু মোবাইলে জায়গা না থাকলেই হ্যামবার্গার-ড্রপডাউন প্যাটার্নে নামে (এটাই ডিফল্ট, উপরে সংজ্ঞায়িত)।
     .topbar-row কে display:contents দিয়ে "আনর‍্যাপ" করা হয়েছে যাতে ব্র্যান্ড ও অ্যাকশন-গ্রুপ সরাসরি
     .topbar এর ফ্লেক্স-চাইল্ড হয়ে যায় ও .topbar-nav এর সাথে একসারিতে সাজানো যায় — order দিয়ে
     ভিজ্যুয়াল ক্রম (DOM ক্রম নয়) নিয়ন্ত্রণ করা হচ্ছে। এই ব্রেকপয়েন্টের উপরে হ্যামবার্গার/ব্যাকড্রপ
     সম্পূর্ণ লুকিয়ে ফেলা হয় এবং মেনু আবার স্বাভাবিক ইনলাইন পিল-রো হিসেবে ফিরে যায় (ড্রপডাউন নয়)। */
  .topbar{display:flex; align-items:center; flex-wrap:nowrap; gap:16px; padding-bottom:10px;}
  .topbar-row{display:contents; padding-bottom:0;}
  .topbar-row .brand{order:1;}
  .topbar-nav{
    order:2; flex:1; justify-content:center;
    position:static; display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; padding:0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:none; box-shadow:none;
    opacity:1; pointer-events:auto; transform:none;
  }
  .topbar-nav a{padding:6px 13px; border-radius:100px; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.7); font-size:11.5px; white-space:nowrap;}
  .topbar-row .topbar-actions{order:3;}
  .menu-toggle, .menu-backdrop{display:none !important;}
}
@media (min-width:960px){
  .topbar{padding:16px 40px;}
  .topbar .brand{font-size:20px;}
  .wrap{max-width:1180px; padding:24px 40px 50px;}
  .hero img{height:360px;}
  .hero .tf-hero-video, .hero .tf-hero-video-embed-wrap{height:360px;}
  .hero h1{font-size:30px;}
  .hero p{font-size:14.5px;}
  .hero .htext{padding:28px 36px 32px;}
  .trust{padding:16px 30px;}
  .trust .t-item{font-size:13px;}
  .trust .t-item .ic{font-size:24px;}
  .product-grid{grid-template-columns:repeat(3,1fr); gap:22px;}
  .p-img-box{aspect-ratio:4/4.8;}
  .why-features-grid{margin-top:20px;}
  .why-grid{grid-template-columns:repeat(4,1fr); padding:22px; gap:16px;}
  .spec-list{display:flex; padding:22px; gap:8px;}
  .spec-row{flex:1; flex-direction:column; align-items:center; text-align:center; gap:6px; border-bottom:none; padding:0; position:relative;}
  .spec-row:not(:last-child)::after{content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:1px; height:34px; background:rgba(20,40,80,0.12);}
  .spec-row .k{flex-direction:column; font-size:11.5px; gap:6px;}
  .spec-row .k .ic{font-size:22px;}
  .spec-row .v{font-size:13px;}
  #checkout-layout{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
  .form-card{padding:24px;}
  .basket-box{position:sticky; top:96px;}
}