:root{     --primary-blue:#007bff;     --primary-green:#43a047;     --primary-orange:#ff9800;     --dark:#222d3a;     --muted:#f7f9fc;     --card-bg:#ffffff;     --accent:#ffd600;     --marquee-gradient: linear-gradient(90deg, #ff9800 0%, #ffae42 50%, #ffd600 100%); } *{box-sizing:border-box} body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--muted); margin:0; color:#1b2540;} .header { background:#F2F2F2; color:#fff; box-shadow:0 2px 18px #e2e2e2; position:sticky; top:0; z-index:999;} .nav-container { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; gap:12px;} .logo-area {     display: flex;     align-items: center;     gap: 12px;     font-size: 2.2em;     font-weight: bold;     /* গ্রাডিয়েন্ট অরেঞ্জ (গাঢ়) */     background: linear-gradient(90deg, #ff7c00 0%, #ff9800 50%, #ffb300 100%);     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     background-clip: text; /* For Firefox */     color: transparent; } .logo-area img { height:60px; border-radius:2px; background:#transparent; padding:1px;} .search-box {     flex: 2;     text-align: center;     display: flex;     justify-content: center;     align-items: center; }  .search-box input {     width: 95%;     max-width: 520px;     min-width: 180px;     padding: 14px 10px;     border-radius: 16px;     border: 2px solid #007bff;     font-size: 1.15em;     background: linear-gradient(90deg, #e3f5ff 0%, #fffbe8 100%);     box-shadow: 0 4px 20px #007bff1a;     transition: border 0.2s, box-shadow 0.2s;     color: #1b2540;     font-weight: 500; }  .search-box input:focus {     border: 2.5px solid #ff9800;     box-shadow: 0 0 0 4px #ff980033, 0 4px 20px #007bff22;     background: linear-gradient(90deg, #fffbe8 0%, #e3f5ff 100%);     outline: none; } .header-btns { display:flex; align-items:center; gap:12px; } .social-icons {     display: flex;     gap: 12px;     align-items: center; }  .order-track-btn {     display: inline-flex;     align-items: center;     gap: 8px;     padding: 8px 18px;     border-radius: 8px;     background: transparent;     color: #000;     font-weight: 700;     font-size: 1.04em;     text-decoration: none;     box-shadow: 0 2px 12px #007bff33;     border: none;     cursor: pointer;     transition: background 0.18s, box-shadow 0.2s, transform 0.15s; } .order-track-btn:hover, .order-track-btn:focus {     background: linear-gradient(90deg, #ff9800 60%, #ffd600 100%);     color: #222d3a;     box-shadow: 0 4px 20px #ff980055;     transform: translateY(-2px) scale(1.03);     outline: none; } .order-track-icon svg {     display: block;     width: 40px;     height: 40px; } .order-track-text {     display: inline-block;     letter-spacing: 0.01em; }   .social-icons a {     color: #fff;     text-decoration: none;     display: inline-flex;     align-items: center;     justify-content: center;     width: 38px;     height: 38px;     border-radius: 50%;     font-size: 20px;     box-shadow: 0 2px 10px #00336644;     transition: background 0.2s, box-shadow 0.2s, color 0.2s; } .social-icons a.facebook {     background: #1877f3; } .social-icons a.youtube {     background: #ff0000; } .social-icons a:hover, .social-icons a:focus {     box-shadow: 0 4px 16px #ff980055;     filter: brightness(1.1); } .social-icons svg {     display: block;     width: 22px;     height: 22px;     fill: currentColor; }   .cart-icon-btn { background:linear-gradient(135deg,var(--primary-blue) 60%,var(--primary-green) 100%); border:none; cursor:pointer; position:relative; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center;} .cart-count { position:absolute; top:-6px; right:-6px; background:#e53935; color:#fff; font-size:0.78rem; font-weight:bold; border-radius:50%; padding:4px 7px; border:2px solid #fff;} /* Marquee: dark gradient background and bold text */ .marquee-area {     background: linear-gradient(90deg, #003366 0%, #0052cc 60%, #2196f3 100%);     background-size: 200% 100%;     color: #fff;     font-size: 1.04em;     border-bottom: 0px solid #eee;     overflow: hidden;     height: 50px;     font-weight: bold;     box-shadow: 0 2px 8px #00336666;     display: flex;              /* Flexbox যুক্ত করলাম */     align-items: center;        /* Vertical center */ } .marquee {     white-space: nowrap;     display: inline-block;     padding-left: 100%;     animation: marquee 40s linear infinite;     /* padding-top: 2px; // ভুল ছিল, এটা বাদ দিন */     font-size: 1.16em; /* চাইলে একটু বড় করতে পারেন */     line-height: 1.3; } @keyframes marquee {     0% { transform: translateX(0);}     100% { transform: translateX(-100%);} } @keyframes marquee { 0% { transform:translateX(0);} 100% { transform:translateX(-100%);} }  .main-section { max-width:1440px; margin:12px auto 36px auto; padding:0 12px; } .hero-section { width:100%; margin-bottom:12px; border-radius:16px; overflow:hidden; box-shadow:0 2px 18px #e5e7ed; position:relative; background:#fff;} /* Hero slider: bigger height for all screens, responsive */ .hero-slider {     position:relative;     width:100%;     height:420px;     min-height:300px;     max-height:60vw;     overflow:hidden;     display:flex;     align-items:center;     justify-content:center; }  .hero-slide {     width:100%; height:100%; object-fit:cover;     opacity:0; transition:opacity .9s; position:absolute; left:0; top:0; } .hero-slide.active { opacity:1; z-index:2;} .hero-slide-caption { position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,0.56); color:var(--accent); padding:10px 14px; border-radius:8px; font-size:1.08em; font-weight:700;} .hero-ad { position:absolute; top:12px; right:12px; background:rgba(255,214,0,0.95); color:var(--dark); font-size:0.99em; font-weight:700; padding:10px 14px; border-radius:8px;}  /* Category menu: more button-like, prominent, responsive */ .category-menu {     display:flex; gap:16px; overflow:auto; padding:8px 6px; background:#fff;     margin-top:8px; border-bottom:1px solid #eee; border-radius:8px; } .category-menu button {     background:var(--primary-blue);     color:#fff;     border:none;     padding:10px 20px;     border-radius:10px;     cursor:pointer;     font-weight:700;     font-size:1.04em;     box-shadow:0 2px 6px #e2e2e2;     margin-bottom:2px;     transition:background .2s, color .2s, box-shadow .2s; } .category-menu button.active, .category-menu button:focus {     background:var(--primary-orange);     color:#fff;     box-shadow:0 3px 8px #ff980046; }  /* Category section */ .category-section { margin:18px 0; background:#fff; border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,0.04);} .category-title { font-size:1.18em; font-weight:800; margin-bottom:10px; color:var(--dark);}  /* Product row: bigger cards, spacing for desktop, tight for mobile */ .products-row {     display:flex;     gap:18px;     overflow-x:auto;     padding-bottom:8px;     scroll-snap-type:x mandatory;     -webkit-overflow-scrolling:touch; } 


:root {
  --product-gap: 18px; /* যদি আপনি গ্যাপ পরিবর্তন করতে চান এখানে পরিবর্তন করুন */
}

/* Parent container — নিশ্চিত করুন আপনার প্রোডাক্টগুলো এই কন্টেইনারের সরাসরি সন্তান (direct children) হিসেবে আছে */
#productArea, .products-row {
  display: flex;
  flex-wrap: wrap;                /* অনেক হলে নিচের লাইনে ভরাট হবে */
  gap: var(--product-gap);        /* আইটেমগুলোর মধ্যে ফাঁকা */
  align-items: flex-start;
  justify-content: flex-start;
}

/* =========================
   Product Card (আপনার মূল স্টাইল বজায় রেখে)
   ========================= */
.product-card {
    /* পরিবর্তিত অংশ: ৫টি আইটেম প্রতি লাইনে রাখার জন্য বেস সাইজ */
    flex: 0 1 calc((100% - (4 * var(--product-gap))) / 5);
    max-width: 250px;
    background: linear-gradient(135deg, #f2f6ff 0%, #f9e8ff 60%, #e3f5ff 100%);
    border-radius: 18px;
    padding: 20px 14px 18px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: center;
    box-shadow: 0 6px 24px 0 rgba(0, 64, 128, 0.10), 0 1.5px 4px 0 rgba(0,0,0,0.07);
    min-height: 340px;
    transition:
      transform 0.18s cubic-bezier(.37,.01,.87,.75),
      box-shadow 0.2s cubic-bezier(.37,.01,.87,.75),
      background 0.4s;
    border: 1px solid #e4e7f3;
    overflow: hidden;
}

.product-card img {
    width: 100%;
    min-width: 250px;
    max-width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: 0 3px 14px #d6eaff7a;
    background: #f9f9fb;
    transition: box-shadow 0.2s, transform 0.2s;
}

.product-card:hover, .product-card:focus-within {
    background: linear-gradient(135deg, #e3f5ff 0%, #fff5f0 60%, #ffd8e4 100%);
    box-shadow: 0 16px 48px 0 rgba(0, 64, 128, 0.21), 0 3px 12px 0 rgba(0,0,0,0.10);
    transform: translateY(-8px) scale(1.033) rotate(-1deg);
    border: 1.5px solid #ff9800;
}

.product-card:hover img, .product-card:focus-within img {
    box-shadow: 0 8px 36px #ff980088, 0 2px 8px #cfd8e7;
    transform: scale(1.04) rotate(1.5deg);
}

.name { font-weight:300; font-size:0.90em; margin-bottom:3px; text-align:center; min-height:36px; }
.desc { color:#555; font-size:1em; margin-bottom:8px; text-align:center; min-height:32px; }
.price-new { color:var(--primary-orange); font-weight:800; font-size:1.3em; margin-top:1px; }
.actions { display:flex; gap:5px; margin-top:auto; width:120%; justify-content:center; font-size:0.9em; font-weight:200; }
.cart-btn, .buy-btn { color:#fff; border:none; border-radius:8px; padding:10px 16px; font-size:0.80em; font-weight:700; cursor:pointer; }
.cart-btn { background:var(--primary-orange); }
.buy-btn { background:var(--primary-green); }

/* =========================
   Cart Modal (আপনার দেওয়া স্টাইল বজায় রাখা হয়েছে)
   ========================= */
.cart-modal {
    display: none;
    position: fixed;
    top: 76px;
    right: 20px;
    width: 390px;
    max-width: 97vw;
    max-height: 88vh;
    background: linear-gradient(135deg, #f7faff 70%, #fffbe8 100%);
    box-shadow: 0 10px 36px 0 #2196f399, 0 2px 12px #007bff22;
    border-radius: 18px;
    overflow: auto;
    z-index: 1200;
    border: 2px solid #e3eaff;
    animation: cartSlideDown 0.35s cubic-bezier(.63,-0.18,.47,1.35);
}
@keyframes cartSlideDown {
    from { opacity: 0; transform: translateY(-44px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cart-modal.active { display: block; }
.cart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1.5px solid #e3eaff;
    background: linear-gradient(90deg, #007bff11 20%, #fffbe8 100%);
    border-radius: 18px 18px 0 0;
    font-size: 1.15em;
    font-weight: 800;
    color: #007bff;
    letter-spacing: 0.01em;
}
.cart-modal-header button {
    background:transparent;
    border:none;
    font-size:22px;
    cursor:pointer;
    color:#ff9800;
    font-weight:900;
    transition: color 0.15s, transform 0.14s;
}
.cart-modal-header button:hover { color: #e53935; transform: scale(1.2) rotate(8deg); }
.cart-list { padding: 10px 14px; min-height: 56px; max-height: 420px; overflow-y: auto; }
.cart-list > div {
    min-height: 80px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1.5px 8px #007bff0b;
    padding: 14px 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: box-shadow 0.22s;
}
.cart-list img { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; box-shadow: 0 2px 8px #e3eaff55; background: #f7faff; }
.cart-list .cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cart-list .cart-item-title { font-weight: 700; font-size: 1.05em; color: #1b2540; }
.cart-list .cart-item-meta { color: #666; font-size: 0.99em; }
.cart-list .cart-item-qty { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.cart-list .cart-item-qty button {
    background: linear-gradient(135deg,#007bff 60%,#ff9800 100%);
    color: #fff; border: none; border-radius: 4px; font-weight: 800; font-size: 1.08em; padding: 2px 10px; cursor: pointer; transition: background 0.16s;
}
.cart-list .cart-item-qty button:hover { background: linear-gradient(135deg,#ff9800 60%,#007bff 100%); }
.cart-list .cart-item-remove button {
    background: transparent; border: none; color: #e53935; font-size: 1.3em; cursor: pointer; outline: none; padding: 0 4px; transition: color 0.16s, transform 0.1s;
}
.cart-list .cart-item-remove button:hover { color: #ff9800; transform: scale(1.2) rotate(-6deg); }
.cart-summary-row { padding: 14px 18px; display: flex; justify-content: space-between; font-weight: 800; font-size: 1.12em; color: #007bff; border-bottom: 1.5px solid #e3eaff; }
.cart-modal .action-btns { display: flex; gap: 10px; padding: 12px 16px 8px 16px; }
.cart-modal .action-btns button { flex: 1; border-radius: 8px; font-size: 1.07em; font-weight: 800; padding: 11px 0; border: none; box-shadow: 0 2px 10px #ff980022; cursor: pointer; transition: background 0.19s, color 0.18s, box-shadow 0.22s, transform 0.16s; }
.cart-modal .cart-btn { background: linear-gradient(90deg, #007bff 65%, #43a047 100%); color: #fff; }
.cart-modal .cart-btn:hover { background: linear-gradient(90deg, #ff9800 65%, #ffd600 100%); color: #1b2540; transform: translateY(-2px) scale(1.04); }
.cart-modal .cart-btn[style*="background:#999"] { background: #bdbdbd !important; color: #fff !important; }
.cart-modal .cart-btn[style*="background:#999"]:hover { background: #ff9800 !important; color: #fff !important; }
.cart-order-form { background: #fffbe8; border-radius: 13px; margin: 12px 10px 8px 10px; box-shadow: 0 1.5px 8px #ff980033; padding: 14px 14px 8px 14px !important; animation: fadeInCartForm 0.33s; }

/* =========================
   Responsive breakpoints — (প্রয়োজনে মান পরিবর্তন করুন)
   ========================= */
@media (max-width: 1200px) {
  /* ৪টি প্রতি সারি */
  .product-card {
    flex-basis: calc((100% - (3 * var(--product-gap))) / 4);
  }
}

@media (max-width: 992px) {
  /* ৩টি প্রতি সারি */
  .product-card {
    flex-basis: calc((100% - (2 * var(--product-gap))) / 3);
  }
}

@media (max-width: 768px) {
  /* ২টি প্রতি সারি */
  .product-card {
    flex-basis: calc((100% - (1 * var(--product-gap))) / 2);
    max-width: none;
  }
}

@media (max-width: 480px) {
  /* ১টি প্রতি সারি */
  .product-card {
    flex-basis: 100%;
    max-width: none;
  }
}


@keyframes fadeInCartForm {     from { opacity: 0; transform: translateY(22px);}     to   { opacity: 1; transform: translateY(0);} }  /* Payment UI styles */ 
.payment-selection {      margin-bottom:10px;      padding:10px 12px;      border-radius:8px;      background: linear-gradient(90deg, #e3f5ff 60%, #fffbe8 100%);     border:1.2px solid #eef2f7;      font-weight: 700;     box-shadow: 0 1.5px 8px #2196f344; } .payment-methods {      display:flex;      gap:16px;      align-items:center;      margin-top:10px;  } .payment-methods label {     background: #fff;     padding: 6px 12px 6px 8px;     border-radius: 7px;     box-shadow: 0 1px 4px #007bff0d;     font-weight: 600;     color: #007bff;     cursor: pointer;     border: 1.2px solid #e3eaff;     transition: background 0.18s, color 0.18s, border 0.18s; } .payment-methods input[type="radio"]:checked + span, 
.payment-methods label:has(input[type="radio"]:checked) {     background: #ff9800;     color: #fff;     border: 1.5px solid #ff9800; } 
.bkash-panel {      border:1.3px dashed #f26522;      padding:13px;     border-radius:8px;      margin-top:8px;      background:linear-gradient(90deg,#fff6f0 70%,#fbe8ff 100%);     box-shadow:0 1.5px 8px #f2652244;     color: #e65100;     font-weight: 600; } .hidden { display:none !important; } .muted { color:#666; font-size:13.5px; font-weight: 400; }  

.cart-order-form input[type="text"], 
.cart-order-form textarea {     width: 100%;     padding: 9px 12px;     border-radius: 7px;     border: 1.3px solid #e3eaff;     font-size: 1.05em;     margin-bottom: 10px;     background: #f7faff;     color: #222d3a;     font-weight: 500;     transition: border 0.15s; } 
.cart-order-form input:focus, .cart-order-form textarea:focus {     border: 1.7px solid #ff9800;     outline: none; }  
.cart-order-form button[type="submit"] {     width: 100%;     padding: 12px 0;     background: linear-gradient(90deg, #43a047 60%, #007bff 100%);     color: #fff;     border: none;     border-radius: 7px;     font-weight: 800;     font-size: 1.11em;     box-shadow: 0 2px 10px #43a0471c;     transition: background 0.17s, color 0.16s; } .cart-order-form button[type="submit"]:hover {     background: linear-gradient(90deg, #ff9800 60%, #ffd600 100%);     color: #222d3a; }   /* Footer */ .footer {     background: #0b74d1; /* primary blue */     color: #fff;     padding: 36px 16px 24px 16px;     font-family: 'Segoe UI', Arial, sans-serif;     font-size: 14px; }  .footer .container {     max-width: 1100px;     margin: 0 auto;     display: flex;     flex-wrap: wrap;     gap: 24px;     justify-content: space-between; }  .footer .block {     flex: 1 1 220px;     min-width: 180px; }  .footer .block h4 {     font-size: 1.1em;     font-weight: 700;     margin-bottom: 12px;     color: #ffd600; /* accent color */ }  .footer .block p, .footer .block div, .footer .block small {     color: #fff;     font-weight: 400;     line-height: 1.6;     margin-bottom: 6px; }  .footer .block small {     font-size: 12px;     color: #dcdcdc; }  /* Links inside footer */ .footer a {     color: #ffd600;     text-decoration: none;     transition: color 0.2s; }  .footer a:hover {     color: #ff9800; }  /* Toast message styling */ .toast {     position: fixed;     left: 50%;     transform: translateX(-50%);     top: 20px;     background: #0fa86b;     color: #fff;     padding: 10px 16px;     border-radius: 8px;     box-shadow: 0 6px 20px rgba(10,10,20,0.12);     z-index: 200;     display: none;     font-weight: 600;     font-size: 14px; }   /* <<< Cart modal scroll fix — paste at end of css/index.css >>> */  /* Make modal a column flex container so list can scroll inside */ .cart-modal {   display: flex;   flex-direction: column;   max-height: calc(100vh - 24px); /* keep whole modal inside viewport */   overflow: hidden; /* important: prevent modal itself from growing beyond viewport */ }  /* header stays fixed height */ .cart-modal-header {   flex: 0 0 auto; }  /* cartList becomes the flexible scrollable area */ #cartList {   flex: 1 1 auto;   min-height: 0; /* important for flex children to allow shrinking and scrolling */   overflow-y: auto; /* fallback if JS not loaded */   -webkit-overflow-scrolling: touch;   padding: 8px 10px; }  /* Make the total / clear-cart area and other sibling divs stay as footer rows */ #cartModal > div:not(.cart-modal-header):not(#cartList):not(#cartOrderForm) {   flex: 0 0 auto; }  /* order form area (footer) stays visible */ #cartOrderForm {   flex: 0 0 auto;   border-top: 1px solid #eee;   background: #fff;   padding: 12px; }  /* ensure on small screens modal width and height behave well */ 


/* Responsive mobile changes (all mobile/tablet media-queries and small-screen overrides)
   NOTE: nenhum código foi removido do original — todas as regras @media foram movidas aqui. */

/* From earlier in the original file: hero slider smaller breakpoints */
@media (max-width:1200px) {     .hero-slider { height:300px; } }
@media (max-width:720px) {     .hero-slider { height:180px; min-height:120px; } }

/* Responsive mobile changes */
@media (max-width:1024px) {     
    .main-section { max-width:100vw; padding:0 4px;}     
    .product-card { flex:0 0 calc((100% - 3*16px)/3.2); max-width:36vw; padding:10px 7px 12px 7px; min-height:230px;}     
    .product-card img { min-width:100px; max-width:170px; height:200px; } }

@media (max-width:720px){     
    .nav-container { flex-direction:column; gap:8px; align-items:stretch;}     
    .logo-area { order:1; display:flex; gap:8px; align-items:center;}     
    .search-box { order:1; text-align:left;}     .search-box input { width:85%; min-width:120px; }     
    .header-btns { order:2; justify-content:space-between; width:100%; padding:0 3px;}     
    .social-icons { display:flex; gap:6px; }     
    .category-menu { gap:5px; padding:4px 2px; border-radius:7px;}     
    .category-menu button { padding:7px 12px; font-size:1em; border-radius:7px;}     
    .main-section { max-width:100vw; padding:0 2px;}     .products-row { gap:7px; }     
    .product-card {         
        flex:0 0 72vw;         
        max-width:220px;         
        min-width:170px;         
        padding:9px 4px 10px 4px;         
        min-height:160px;         
        border-radius:8px;
        font-size:.75em;
        max-height:450px; 
    } 
        
    .product-card img { 
        min-width:200px; 
        max-width:220px; 
        height:250px; 
        border-radius:7px;}     
    .hero-slider { height:160px; min-height:100px;} }

@media (max-width:550px) {     .cart-modal {         top: 0 !important;         right: 0 !important;         left: 0;         width: 99vw;         max-width: 99vw;         border-radius: 0 0 14px 14px;         box-shadow: 0 6px 22px #2196f333;     }     .cart-modal-header{border-radius: 0;} }

@media (max-width:480px){   .cart-modal {     width: 96%;     right: 2%;     left: 2%;     bottom: 12px;     max-height: calc(100vh - 20px);   }   #cartList { max-height: calc(100vh - 340px); } }

@media (max-width:720px){     .footer .container {         flex-direction: column;         gap: 16px;     }     .footer .block {         min-width: auto;     } }

@media (max-width: 720px) {
    .product-card {
        flex: 0 0 calc((100% - 3*12px)/2.2); /* মোবাইলের জন্য width কমানো */
        max-width: 180px; /* সর্বোচ্চ সীমা */
        padding: 14px 10px;
        min-height: 240px; /* প্রয়োজনমতো কমিয়ে দেওয়া যায় */
    }
}




/* ডিফল্টে Desktop/Laptop এ Hide */
.mobile-footer-bar {
  display: none;
}

/* শুধু Mobile এ Show হবে */
@media (max-width: 720px) {
  .mobile-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex; /* এখানে active হবে */
    justify-content: space-around;
    align-items: center;
    padding: 10px 6px;
  }

  .mobile-footer-bar a,
  .mobile-footer-bar button {
    flex: 1;
    text-align: center;
    font-size: 0.9em;
    background: none;
    border: none;
    cursor: pointer;
    color: #222d3a;
  }

  .mobile-footer-bar a:hover,
  .mobile-footer-bar button:hover {
    color: #ff9800;
  }

  /* Main content adjust (বার যাতে ঢেকে না ফেলে) */
  .main-section {
    padding-bottom: 70px;
  }
}

/* শুধু মোবাইলে Hide হবে */
@media (max-width: 720px) {
  .social-links,
  .order-track-btn,
  .header-btns {
    display: none !important;
  }
}
.mobile-footer-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #ddd;
  padding: 6px 0;
  z-index: 10000;
}

.mobile-footer-bar a,
.mobile-footer-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  color: #222;
  text-decoration: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.mobile-footer-bar i {
  font-size: 20px;
  margin-bottom: 2px;
}

/* Hover effects */
.mobile-footer-bar a:hover,
.mobile-footer-bar button:hover {
  color: #2196f3;
}

/* Hide on desktop */
@media (min-width: 721px) {
  .mobile-footer-bar {
    display: none;
  }
}

.cart-modal {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: 360px;
    height: 85vh; /* মোবাইল স্ক্রিনের উচ্চতার 80% */
    max-width: calc(100% - 24px);
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-radius: 10px;
    overflow: hidden;
    transform: translateY(110%);
    transition: transform 0.28s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.cart-modal.active {
    transform: translateY(0);
}

/* Modal Header */
.cart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--primary-blue);
    color: #fff;
}

/* Cart List */
.cart-modal #cartList {
    flex: 1; /* Full available height */
    max-height: 50px;
    overflow-y: auto; /* স্ক্রল যোগ করছে */
    padding: 8px;
}

/* Cart Item */
.cart-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    align-items: flex-start;
    border-bottom: 1px solid #f3f3f3;
}

.cart-item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item .meta {
    flex: 1;
    min-width: 0;
}

.cart-item .meta .title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item .meta .desc {
    color: #666;
    font-size: 13px;
    margin-top: 4px;
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quantity Controls */
.qty-controls {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.qty-controls button {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

/* Cart Total */
#cartTotalValue {
    font-weight: 800;
    color: #222;
}

/* Cart Order Form */
#cartOrderForm {
    padding: 12px;
    display: block;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}

#cartOrderForm input[type="text"],
#cartOrderForm input[type="tel"] {
    width: 100%;
    padding: 8px;
    margin: 6px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Payment Options */
#cartOrderForm .payment-options {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

/* Toast Notifications */
.toast {
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background: #2e7d32;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    display: none;
    z-index: 10000;
}

.toast.show {
    display: block;
}

/* Product Card Description Clamp */
.product-card .desc {
    display: block;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive tweaks for Mobile */
@media (max-width: 720px) {
    .cart-modal {
        width: 96%;
        right: 2%;
        left: 2%;
        bottom: 12px;
        height: 90vh; /* মোবাইলের জন্য উচ্চতা বড় */
    }
}

.cart-icon-btn svg {
    fill: black !important;
    stroke: black !important;
    width: 28px !important; /* আইকন বড় করার জন্য */
    height: 28px !important;
}