/* ═══════════════════════════════════════════════════════════════════════════
   responsive.css — সব স্ক্রিন সাইজের জন্য (ছোট ফোন → ট্যাবলেট → ডেস্কটপ → টিভি)
   • style.css-এর পরে লোড হয়; শুধু layout/আকার ঠিক করে — রঙ/থিম একটুও বদলায় না
   • `body` দিয়ে শুরু করা selector গুলো পেজের নিজস্ব inline CSS-কেও হারায়
   • ফাইলটা মুছে দিলে সাইট আগের অবস্থায় ফিরে যায়
   ═══════════════════════════════════════════════════════════════════════════ */

:root{ --cw:1200px; --dnav:56px; --gridcols:5; }

/* ═══ ১) সব ডিভাইস: কনটেন্ট কেটে যাওয়া ঠেকানো ═══════════════════════════ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img,video,iframe,canvas{ max-width:100%; }
.info-content,.pdd,.post-content,.cn,.pdn,.odv,.mts,.st{ overflow-wrap:anywhere; }
.info-content img,.pdd img,.post-content img{ max-width:100% !important; height:auto !important; }
.info-content iframe,.pdd iframe,.post-content iframe{ max-width:100% !important; }
.info-content table,.pdd table,.post-content table{ display:block; max-width:100%; overflow-x:auto; }
.info-content pre,.pdd pre{ max-width:100%; overflow-x:auto; }

/* মোবাইল ব্রাউজারের ঠিকানা-বার ওঠা/নামায় নিচের অংশ কেটে না যায় */
@supports (height:100dvh){
  body{ min-height:100dvh; }
  .page{ min-height:100dvh; }
  .panel{ max-height:90dvh; }
  .opt-sheet{ max-height:75dvh; }
  .modal{ max-height:90dvh; }
}

/* নচ/হোম-বারওয়ালা ফোনে অ্যাকশন বার নেভের ঠিক ওপরে বসে */
.pdacts{ bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px)); }

/* ═══ ২) ব্যানার ও বোর্ড: ছবির আসল অনুপাত অনুযায়ী — কোনো দিক কাটে না ═══ */
body .bnr-wrap{
  height:auto !important;
  aspect-ratio:var(--bnr-ar,3/1);
  background:var(--k3);
}
body .bnr-track{ height:100% !important; }
body .bnr-slide{ height:100% !important; }
body .bnr-slide img{ object-fit:contain; background:var(--k3); }
body .bnr-e{ min-height:110px; }

body .info-bnr-wrap{
  height:auto !important;
  aspect-ratio:var(--bnr-ar,2.4);
  background:var(--k3);
}
body #infoBnrTrack{ height:100% !important; }
body .info-bnr-slide img{ object-fit:contain; background:var(--k3); }
body .info-bnr-single{ height:auto !important; background:var(--k3); }
body .info-bnr-single img{ height:auto !important; object-fit:contain !important; }

/* কাস্টম ড্যাশবোর্ডের বোর্ড/ছবি এবং আপডেটস পোস্টের ছবি */
body .cd-grid{ align-items:start; }
body .cd-card img{ aspect-ratio:auto; height:auto; object-fit:contain; }
body .cd-full img{ aspect-ratio:auto; }
body .post-img{ max-height:80vh; object-fit:contain; background:var(--k3); }

/* ═══ ৩) অতিরিক্ত ছোট ফোন (≤359px) ═══════════════════════════════════════ */
@media (max-width:359px){
  body .psec{ padding:8px; }
  body .pg{ gap:8px; }
  body .pn{ font-size:.74rem; }
  body .pp{ font-size:.82rem; }
  body .pin{ padding:7px 7px 9px; }
  body .tbar{ padding:11px 10px 8px; }
  body .tt{ font-size:1.05rem; }
  body .bsm{ padding:6px 11px; font-size:.74rem; }
  body .sbar{ padding:9px 9px; gap:7px; }
  body .rzc-row{ padding-left:10px; padding-right:10px; }
  body .rzc-chip{ width:62px; }
  body .rzc-ic{ width:52px; height:52px; }
  body .pdn{ font-size:1.02rem; }
  body .pdp{ font-size:1.3rem; }
  body .bca,body .boa{ font-size:.78rem; padding:10px 6px; }
  body .pdacts{ padding:9px 10px; gap:7px; }
  body .odl{ min-width:58px; }
}

/* ═══ ৪) বড় ফোন ল্যান্ডস্কেপ / ছোট ট্যাবলেট (640–768px) ══════════════════ */
@media (min-width:640px) and (max-width:768px){
  body .page{ max-width:720px; }
  body .pg{ grid-template-columns:repeat(3,1fr); }
  body .pdacts{ max-width:720px; }
}

/* ═══ ৫) ডেস্কটপ ও ল্যাপটপ (≥769px) ══════════════════════════════════════ */
@media (min-width:769px){
  :root{ --cw:960px; --gridcols:4; }

  /* ── ওপরের নেভিগেশন (নিচের বারের বদলে) ── */
  body{ padding-top:var(--dnav); }
  body .desk-nav{
    top:0; bottom:auto; height:var(--dnav);
    border-top:none; border-bottom:1px solid var(--bdr2);
    justify-content:center; gap:6px;
    box-shadow:0 2px 14px rgba(0,0,0,.25);
  }
  body .desk-nav a{
    flex-direction:row; gap:9px; padding:0 24px;
    font-size:.88rem; font-weight:600;
    border-bottom:3px solid transparent;
  }
  body .desk-nav a svg{ width:19px; height:19px; }
  body .desk-nav a.active{ border-bottom-color:var(--g); }
  body .tbar,body .sbar{ top:var(--dnav) !important; }

  /* ── পেজ কনটেইনার ── */
  body .page{ max-width:var(--cw); padding-bottom:48px !important; }
  body .psec{ padding:22px 24px; }
  body .pg{ grid-template-columns:repeat(var(--gridcols),minmax(0,1fr)); gap:18px; }

  /* ── প্রোডাক্ট কার্ড ── */
  body .pc{ border-radius:14px; transition:transform .2s,border-color .2s,box-shadow .2s; }
  body .pin{ padding:12px 14px 15px; }
  body .pn{ font-size:.92rem; margin-bottom:6px; }
  body .pp{ font-size:1.02rem; }
  body .pd{ font-size:.72rem; }
  body .pci .pb,body .disc-badge{ font-size:.7rem; padding:3px 9px; }

  /* ── সার্চ বার ── */
  body .sbar{ justify-content:center; }
  body .sbar .srchbar{ max-width:760px; }

  /* ── ক্যাটাগরি বাটন: মাউসে swipe হয় না তাই লাইন ভেঙে সাজানো ── */
  body .rzc-row{ flex-wrap:wrap; overflow-x:visible; padding:12px 24px 6px; gap:10px; }
  body .rzc-cap{ padding:8px 24px 0; font-size:.78rem; }
  body .rzc-sub{ margin-left:24px; }
  body .rzc-chip{ width:80px; padding:6px 6px 8px; }
  body .rzc-ic{ width:68px; height:68px; }
  body .rzc-ic svg{ width:40px; height:40px; }

  /* ── ব্যানার: বড় স্ক্রিনে খুব লম্বা হয়ে না যায় ── */
  body .bnr-wrap{ max-height:440px; }
  body .bnr-slide img{ object-fit:cover; }
  body .info-bnr-wrap{ max-height:420px; }
  body .info-bnr-slide img{ object-fit:cover; }

  /* ── ছোট স্ক্রিনের মতো বটম-শিট → মাঝখানের ডায়ালগ ── */
  body .overlay{ align-items:center; }
  body .modal{ border-radius:20px; padding-bottom:30px; transform:translateY(24px); }
  body .panel{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(640px,94vw); max-height:88vh;
    border:1px solid var(--g); border-radius:20px;
    padding-bottom:24px;
    transform:translate(-50%,-46%) scale(.98);
    opacity:0; pointer-events:none;
    transition:opacity .25s,transform .3s;
  }
  body .panel.show{ transform:translate(-50%,-50%); opacity:1; pointer-events:all; }
  body .ph2{ display:none; }
  body .opt-sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(520px,94vw); max-height:80vh;
    border:1px solid var(--g); border-radius:18px;
    transform:translate(-50%,-46%) scale(.98);
    opacity:0; pointer-events:none;
    transition:opacity .25s,transform .3s;
  }
  body .opt-sheet.show{ transform:translate(-50%,-50%); opacity:1; pointer-events:all; }
  body .opt-sheet-handle{ display:none; }
  body .toast{ bottom:36px; }

  /* ── প্রোডাক্ট পেজ: বাঁয়ে বড় ছবি, ডানে বিবরণ ── */
  body .car{
    float:left; width:calc(50% - 20px); margin:20px 0 0 24px;
    border-radius:16px; border:1px solid var(--bdr);
  }
  body .cs img{ max-height:640px; }
  body .ce{ height:420px; }
  body .pdi{
    margin:20px 24px 0 calc(50% + 24px);
    border:1px solid var(--bdr); border-radius:16px; padding:26px 28px;
  }
  body .pdi + div{ clear:both; }
  body .pdn{ font-size:1.6rem; line-height:1.35; }
  body .pdd{ font-size:.95rem; }
  body .pdp{ font-size:1.9rem; }
  body .pdacts{
    bottom:20px; left:50%; transform:translateX(-50%);
    width:min(560px,92vw); max-width:none;
    border:1px solid var(--g); border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.55);
    padding:12px; gap:12px;
  }
  body .bca,body .boa{ padding:14px; font-size:.95rem; border-radius:12px; }

  /* ── কার্ট, অর্ডার, তথ্য ইত্যাদি: পড়ার মতো মাঝারি চওড়া কলাম ── */
  body.route-cart .page,body.route-orders .page,body.route-me .page,
  body.route-info .page,body.route-updates .page{ max-width:800px; }
  body.route-orders-detail .page{ max-width:800px; }
  body.route-dashboard .page{ max-width:1100px; }
  body.route-dashboard .cd-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:22px 24px; }
  body.route-cart .cl{ padding:6px 24px; }
  body.route-cart .ci{ padding:16px 0; }
  body.route-cart .ci img{ width:92px; height:92px; }
  body.route-cart .csum{ padding:18px 24px; border-radius:0 0 14px 14px; }
  body.route-orders .ol{ padding:20px 24px; gap:12px; }
  body.route-orders .oc{ padding:16px 18px; }
  body.route-orders-detail .odw{ padding:20px 24px; gap:14px; }
  body.route-me .mw{ padding:22px 24px; }
  body.route-updates #postFeed{ padding:20px 24px !important; }
  body.route-search .sg-list,body.route-search #sgHint{ max-width:760px; margin-left:auto; margin-right:auto; }

  /* ── hover ও ফোকাস (মাউস/টিভি-রিমোটের জন্য) ── */
  body .pc:hover{ transform:translateY(-4px); border-color:var(--g); box-shadow:0 14px 30px rgba(0,0,0,.4); }
  body .desk-nav a:hover{ color:var(--g); }
  body .rzc-chip:hover{ border-color:var(--g); }
  body .oc:hover,body .mei:hover,body .cd-card:hover{ border-color:var(--g); }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--bdr2); border-radius:6px; }

  /* ── নিচের ফুটার (শুধু ডেস্কটপে) ── */
  .rz-foot{ display:none; }
  body.route-home .rz-foot,body.route-product .rz-foot,body.route-search .rz-foot,body.route-cart .rz-foot,
  body.route-orders .rz-foot,body.route-me .rz-foot,body.route-info .rz-foot,body.route-updates .rz-foot,
  body.route-dashboard .rz-foot{ display:block; }
  .rz-foot{ margin-top:8px; border-top:1px solid var(--bdr2); background:var(--k2); }
  .rz-foot-in{
    max-width:var(--cw); margin:0 auto; padding:22px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  }
  .rz-foot-brand{ font-weight:700; color:var(--g); font-size:1.05rem; }
  .rz-foot-links{ display:flex; gap:22px; }
  .rz-foot-links a{ color:var(--gray); text-decoration:none; font-size:.86rem; font-weight:600; }
  .rz-foot-links a:hover{ color:var(--g); }
  .rz-foot-copy{ color:var(--gray); font-size:.78rem; }
}

/* ═══ ৬) বড় ল্যাপটপ/ডেস্কটপ (≥1024px) ════════════════════════════════════ */
@media (min-width:1024px){
  :root{ --cw:1200px; --gridcols:5; }
}

/* ═══ ৭) বড় মনিটর (≥1600px) ═══════════════════════════════════════════════ */
@media (min-width:1600px){
  html{ font-size:17px; }
  :root{ --cw:1440px; --gridcols:6; --dnav:60px; }
}

/* ═══ ৮) ফুল-এইচডি টিভি / বড় মনিটর (≥1900px) ═════════════════════════════ */
@media (min-width:1900px){
  html{ font-size:19px; }
  :root{ --cw:1600px; --gridcols:6; --dnav:64px; }
}

/* ═══ ৯) খুব বড় টিভি/4K (≥2500px) ═════════════════════════════════════════ */
@media (min-width:2500px){
  html{ font-size:25px; }
  :root{ --cw:2100px; --gridcols:7; --dnav:76px; }
}

/* ═══ ১০) কিবোর্ড/টিভি রিমোটে ফোকাস দেখা যাওয়া ═══════════════════════════ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--g); outline-offset:2px; border-radius:6px;
}

/* ═══ ১১) যাদের মোশন কমানো আছে ════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ফুটার মোবাইলে সবসময় লুকানো */
@media (max-width:768px){ .rz-foot{ display:none !important; } }