/* General Reset & Variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --primary-red: #e60000;
    --dark-black: #111111;
    --text-color: #333;
    --light-bg: #f9f9f9;
    --border-color: #eaeaea;
}

body { background-color: var(--light-bg); color: var(--text-color); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* --- Top Header --- */
.top-header { background: #fff; border-bottom: 1px solid var(--border-color); padding: 15px 0; }
.header-wrapper { display: flex; align-items: center; justify-content: space-between; }
.logo h2 { font-size: 28px; font-weight: 900; margin: 0; }

.search-box {
    display: flex; flex: 1; max-width: 600px; margin: 0 20px;
    border: 2px solid var(--primary-red); border-radius: 4px; overflow: hidden;
}
.search-box input {
    width: 100%; padding: 10px 15px; border: none; outline: none; font-size: 14px;
}
.search-box button {
    background: var(--primary-red); color: #fff; border: none; padding: 0 20px;
    cursor: pointer; font-size: 16px; transition: 0.3s;
}
.search-box button:hover { background: var(--dark-black); }

.header-icons { display: flex; align-items: center; gap: 20px; }
.icon-link { text-decoration: none; color: var(--dark-black); font-weight: 600; display: flex; align-items: center; gap: 5px; font-size: 15px; }
.icon-link:hover { color: var(--primary-red); }

/* --- Mobile Specific Elements (ডেস্কটপ থেকে হাইড করার কোড) --- */
.mobile-toggle { display: none; font-size: 24px; cursor: pointer; color: var(--dark-black); }
.mobile-search-container { display: none; background: #fff; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.mobile-only { display: none !important; }
.mobile-only-icon { display: none !important; } /* ডেস্কটপে অতিরিক্ত আইকন হাইড করবে */


/* --- Responsive Media Queries --- */
@media (max-width: 991px) {
    .desktop-search, 
    .desktop-sidebar, 
    .desktop-only { 
        display: none !important; 
    }
    
    .mobile-toggle, 
    div.mobile-only { 
        display: block !important; 
    }
    
    /* নতুন ক্লাসের মাধ্যমে মোবাইলে ইউজার আইকন শো করানো */
    .mobile-only-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .carousel-section { max-width: 100%; }
    .slider-container { height: 300px; }
    .slide-content h2 { font-size: 24px; }
}

/* --- Layout Wrapper (Sidebar + Carousel) --- */
.layout-wrapper { display: flex; margin-top: 20px; gap: 20px; position: relative; }

/* --- Desktop Sidebar & Mega Menu --- */
.desktop-sidebar {
    width: 260px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-radius: 4px; z-index: 10;
}
.sidebar-header {
    padding: 15px; background: var(--dark-black); color: #fff; font-weight: bold; border-radius: 4px 4px 0 0;
}
.category-list { list-style: none; position: relative; }
.category-list > li { border-bottom: 1px solid var(--border-color); }
.category-list > li > a {
    display: block; padding: 12px 15px; text-decoration: none; color: var(--text-color); font-size: 14px; font-weight: 500; transition: 0.2s;
}
.category-list > li > a:hover { color: var(--primary-red); background: #fdfdfd; }
.category-list > li:last-child { border-bottom: none; }

/* Mega Menu Panel */
.has-mega { position: static; }
.mega-panel {
    position: absolute; left: 260px; top: 0; width: 600px; min-height: 100%; background: #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); display: none; padding: 20px; border-left: 2px solid var(--primary-red); z-index: 20;
}
.has-mega:hover .mega-panel { display: block; }
.mega-panel h4 { margin-bottom: 15px; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; color: var(--primary-red); }
.mega-panel ul { list-style: none; }
.mega-panel ul li a { display: block; padding: 8px 0; text-decoration: none; color: var(--text-color); font-size: 14px; }
.mega-panel ul li a:hover { color: var(--primary-red); padding-left: 5px; transition: 0.3s; }

/* --- Hero Carousel --- */
.carousel-section { flex: 1; max-width: calc(100% - 280px); }
.carousel { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: 400px; background: #000; }
.carousel-inner { display: flex; height: 100%; transition: transform 0.5s ease-in-out; }
.carousel-item { min-width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.carousel-item::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); }
.carousel-caption { position: absolute; top: 50%; left: 50px; transform: translateY(-50%); color: #fff; z-index: 2; max-width: 500px; }
.carousel-caption h2 { font-size: 36px; margin-bottom: 10px; font-weight: 800; text-transform: uppercase; }
.carousel-caption p { font-size: 18px; margin-bottom: 20px; }
.btn-shop { background: var(--primary-red); color: #fff; padding: 10px 25px; text-decoration: none; font-weight: bold; border-radius: 4px; transition: 0.3s; }
.btn-shop:hover { background: #fff; color: var(--primary-red); }

.carousel-control {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff;
    border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 5; transition: 0.3s;
}
.carousel-control:hover { background: var(--primary-red); }
.carousel-control.prev { left: 15px; }
.carousel-control.next { right: 15px; }

/* --- Mobile Off-Canvas Menu --- */
.mobile-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index: 99; display: none; opacity: 0; transition: 0.3s; }
.mobile-overlay.active { display: block; opacity: 1; }

.mobile-menu {
    position: fixed; top: 0; left: -320px; width: 300px; height: 100%; background: #fff; z-index: 100;
    transition: 0.4s ease; overflow-x: hidden; overflow-y: auto; box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
.mobile-menu.active { left: 0; }
.mobile-menu-header { background: #f4f6f8; padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
.user-info { font-weight: bold; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.close-menu { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-color); }

.mobile-menu-content { padding: 20px; }
.track-order-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); font-weight: bold; font-size: 15px; margin-bottom: 15px; }
.menu-section-title { display: flex; justify-content: space-between; font-weight: bold; margin: 15px 0; font-size: 14px; }
.menu-section-title a { text-decoration: underline; color: var(--text-color); font-weight: normal; }

.mobile-nav-list { list-style: none; }
.mobile-nav-list li { margin-bottom: 5px; }
.mobile-nav-list a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; text-decoration: none; color: var(--text-color); font-size: 15px; font-weight: 500; }
hr { border: none; border-top: 1px solid var(--border-color); margin: 15px 0; }

/* Submenu sliding panel */
.mobile-submenu {
    position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: #fff; z-index: 101; transition: 0.3s; padding: 0 20px;
}
.mobile-submenu.active { right: 0; }
.submenu-header { background: var(--dark-black); color: #fff; padding: 20px; margin: 0 -20px 20px -20px; }
.back-menu { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.submenu-title { font-size: 22px; font-weight: bold; margin-bottom: 20px; color: var(--primary-red); }

/* --- Responsive Media Queries --- */
@media (max-width: 991px) {
    .desktop-search, .desktop-only { display: none; }
    .mobile-toggle, .mobile-search-container, .mobile-only { display: block; }
    .header-wrapper { padding: 0 10px; }
    .logo h2 { font-size: 24px; }
    .desktop-sidebar { display: none; }
    .carousel-section { max-width: 100%; }
    .carousel { height: 300px; }
    .carousel-caption h2 { font-size: 24px; }
}

/* --- Desktop Navigation Menu --- */
.desktop-nav-menu {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.nav-container {
    display: flex;
    justify-content: center; /* মেনুগুলো মাঝখানে রাখার জন্য */
}

.main-nav-links {
    list-style: none;
    display: flex;
    gap: 30px; /* লিংকগুলোর মাঝখানের দূরত্ব */
}

.main-nav-links li a {
    text-decoration: none;
    color: var(--dark-black);
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
}

.main-nav-links li a:hover {
    color: var(--primary-red);
}

/* নিশ্চিত করুন যে এটি মোবাইলে দেখা যাবে না */
@media (max-width: 991px) {
    .desktop-only { 
        display: none !important; 
    }
}

/* --- Features Section --- */
.features-section {
    background-color: #ffffff;
    padding: 40px 0;
    margin-top: 30px;
    border-bottom: 1px solid var(--border-color); /* ছবির মত নিচে একটি চিকন দাগ */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    transition: transform 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px); /* মাউস নিলে সামান্য উপরে উঠবে */
}

/* আইকনের রঙ লাল করে দেওয়া হয়েছে থিমের সাথে মিল রাখার জন্য */
.feature-icon i {
    font-size: 38px;
    color: var(--primary-red); 
}

.feature-text h4 {
    font-size: 16px;
    color: var(--dark-black);
    margin-bottom: 5px;
    font-weight: 700;
}

.feature-text p {
    font-size: 14px;
    color: #777;
}

/* --- Responsive Layout for Features --- */

/* ট্যাবলেট ভিউ (৯৯১ পিক্সেল পর্যন্ত) */
@media (max-width: 991px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

/* মোবাইল ভিউ (৫৭৬ পিক্সেল পর্যন্ত) - অরিজিনাল ছবির মত ২টা কলাম এবং সেন্টারড টেক্সট */
@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* মোবাইলেও ২টা কলাম */
        gap: 30px 10px;
    }
    
    .feature-box {
        flex-direction: column; /* আইকন উপরে, টেক্সট নিচে */
        text-align: center;     /* টেক্সট মাঝখানে */
        gap: 10px;
        padding: 5px;
    }

    .feature-icon i {
        font-size: 32px; /* মোবাইলে আইকন একটু ছোট করা হলো */
        color: var(--dark-black); /* অরিজিনাল সাইটের মত আইকনের রঙ কালো/ধূসর */
    }

    .feature-text h4 {
        font-size: 14px; /* মোবাইলে ফন্ট সাইজ একটু ছোট */
        margin-bottom: 5px;
    }

    .feature-text p {
        font-size: 12px;
    }
}

/* --- Sections Header --- */
.slider-section {
    padding: 50px 0;
    background-color: #fff;
}
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.section-header-flex.center {
    justify-content: center;
}
.section-header-flex h2 {
    font-size: 26px;
    font-weight: bold;
    color: var(--dark-black);
}
.see-all-link {
    font-weight: 600;
    color: var(--text-color);
    text-decoration: underline;
}
.see-all-link:hover {
    color: var(--primary-red);
}

/* --- Custom Slider Wrapper --- */
.custom-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.slider-track-container {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
}
.slider-track {
    display: flex;
    gap: 15px; /* Cards gap */
    transition: transform 0.4s ease-in-out;
}

/* Slider Nav Buttons */
.slider-nav {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 16px;
    color: var(--dark-black);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: absolute;
    z-index: 5;
    transition: 0.3s;
}
.slider-nav:hover {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}
.slider-nav.prev-btn { left: -20px; }
.slider-nav.next-btn { right: -20px; }

/* --- Product Card Design --- */
.product-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    min-width: calc(20% - 12px);
    /* 5 items on desktop */
    max-width: calc(20% - 12px);
    /* নতুন: কার্ডকে বড় হতে বাধা দেবে */
    flex: 0 0 calc(20% - 12px);
    /* নতুন: ফ্লেক্সবক্সে নির্দিষ্ট সাইজ ধরে রাখবে */
    position: relative;
    transition: box-shadow 0.3s ease;
}
.product-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.badge.hot-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff6600; /* Orange hot color */
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 2;
    font-weight: bold;
}
.product-img-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    overflow: hidden;
}
.product-img-wrapper img {
    max-width: 100%;
    height: auto;
}
.product-actions {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px 0;
    transition: bottom 0.3s ease;
}
.product-card:hover .product-actions {
    bottom: 0; /* Slides up on hover */
}
.product-actions a {
    color: #fff;
    font-size: 18px;
}
.product-actions a:hover {
    color: var(--primary-red);
}

.product-category {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 5px;
}
.product-title {
    font-size: 15px;
    color: var(--dark-black);
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.4;
    height: 42px; /* Fixed height for consistency */
    overflow: hidden;
}
.product-price {
    font-size: 18px;
    color: var(--dark-black);
    font-weight: bold;
    margin-bottom: 15px;
}
.add-to-cart-btn {
    width: 100%;
    padding: 10px;
    background: var(--dark-black);
    color: #fff;
    border: none;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.3s;
}
/* Red on hover to match theme */
.product-card:hover .add-to-cart-btn {
    background: var(--primary-red); 
}

/* --- Category Card Design --- */
.category-card {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    min-width: calc(16.666% - 12.5px); /* 6 items on desktop */
    transition: box-shadow 0.3s;
}
.category-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.category-card img {
    max-width: 100%;
    height: auto;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .product-card {
        min-width: calc(33.333% - 10px);
        /* 3 items tablet */
        max-width: calc(33.333% - 10px);
        /* নতুন লাইন */
        flex: 0 0 calc(33.333% - 10px);
        /* নতুন লাইন */
    }

    .category-card {
        min-width: calc(25% - 11.25px);
    }

    /* 4 items tablet */
    .slider-nav.prev-btn {
        left: 0px;
    }

    .slider-nav.next-btn {
        right: 0px;
    }
}

@media (max-width: 576px) {
    .product-card {
        min-width: calc(50% - 7.5px);
        /* 2 items on mobile */
        max-width: calc(50% - 7.5px);
        /* নতুন লাইন */
        flex: 0 0 calc(50% - 7.5px);
        /* নতুন লাইন */
        padding: 10px;
    }

    .category-card {
        min-width: calc(33.333% - 10px);
    }

    /* 3 items on mobile */
    .product-title {
        font-size: 13px;
        height: 36px;
    }

    .product-price {
        font-size: 15px;
    }

    /* Make Action bar always visible on mobile since there is no hover */
    .product-actions {
        bottom: 0;
        padding: 5px 0;
    }

    .product-actions a {
        font-size: 15px;
    }
}

/* --- Product Lists Section (Desktop 3 Cols, Mobile Tabs) --- */
.product-lists-section {
    padding: 50px 0;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
}

.lists-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ডেস্কটপে ৩ কলাম */
    gap: 30px;
}

.column-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--dark-black);
    margin-bottom: 25px;
}

.list-column {
    display: block; /* ডেস্কটপে সব কলাম একসাথে দেখাবে */
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}

/* শেষের কলামে বর্ডার থাকবে না */
.list-column:last-child {
    border-right: none;
    padding-right: 0;
}

/* List Item Design (Now a clickable link) */
a.list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    text-decoration: none; /* লিংকের আন্ডারলাইন সরাবে */
    color: inherit;
    transition: transform 0.2s ease;
    cursor: pointer;
}
a.list-item:hover {
    transform: translateX(5px);
}
.list-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #f9f9f9;
    border: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.list-info h4 {
    font-size: 14px;
    color: #444;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}
.list-info .price {
    font-size: 15px;
    font-weight: bold;
    color: var(--dark-black);
}
.list-info del {
    color: #999;
    font-size: 13px;
    font-weight: normal;
    margin-right: 5px;
}
.discount-price {
    color: var(--primary-red); /* ডিসকাউন্ট প্রাইস লাল রঙের হবে */
}

/* Rating Stars */
.rating {
    color: #f39c12; /* হলুদ রঙের স্টার */
    font-size: 11px;
    margin-top: 5px;
}
.rating-count {
    color: #777;
    margin-left: 3px;
}

/* --- Mobile Specific Styles (Tabs behavior) --- */
.mobile-tabs-header {
    display: none; /* ডেস্কটপে লুকানো থাকবে */
}

@media (max-width: 991px) {
    .product-lists-section { padding: 30px 0; }
    
    .lists-container {
        display: block; /* গ্রিড অফ করে দেওয়া হলো */
    }
    
    .list-column {
        display: none; /* ডিফল্টভাবে সব কলাম লুকানো থাকবে */
        border-right: none;
        padding-right: 0;
    }
    
    /* শুধুমাত্র active ক্লাস থাকা কলামটি দেখাবে */
    .list-column.active {
        display: block;
        animation: fadeIn 0.4s ease-in-out;
    }

  /* Tab Buttons Design for Mobile (100% FIXED BY OVERRIDING mobile-only) */
  div.mobile-tabs-header.mobile-only {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      width: 100% !important;
      border-bottom: 1px solid var(--border-color) !important;
      margin-bottom: 25px !important;
  }

  div.mobile-tabs-header.mobile-only::-webkit-scrollbar {
      display: none !important;
  }

  div.mobile-tabs-header.mobile-only .tab-btn {
      flex: 0 0 auto !important;
      min-width: max-content !important;
      white-space: nowrap !important;
      background: none !important;
      border: none !important;
      padding: 12px 18px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      color: #888 !important;
      border-bottom: 2px solid transparent !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
  }

  div.mobile-tabs-header.mobile-only .tab-btn.active {
      border-bottom-color: var(--dark-black) !important;
      color: var(--dark-black) !important;
  }
    /* Active Tab Design */
    .tab-btn.active {
        color: var(--dark-black);
        border-bottom-color: var(--dark-black); /* দ্বিতীয় ছবির মত কালো বর্ডার */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Category Wise Section --- */
.category-wise-section.border-bottom {
    border-bottom: 1px solid var(--border-color);
}
/* যাতে শেষের সেকশনের নিচে বর্ডার না থাকে */
.category-wise-section.border-bottom:last-child {
    border-bottom: none;
}

/* --- Footer Styles --- */
.main-footer {
    background-color: #fff;
    margin-top: 50px;
}
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }

/* Footer Features (Top part) */
.footer-features {
    padding: 30px 0;
}
.features-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.f-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 220px;
}
.f-icon i {
    font-size: 30px;
    color: #666; /* ছবির মত ধূসর রঙ */
}
.f-text h4 {
    font-size: 15px;
    color: var(--dark-black);
    margin-bottom: 5px;
}
.f-text p {
    font-size: 13px;
    color: #777;
}

/* Main Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
    gap: 30px;
    padding: 50px 0;
}
.footer-title {
    font-size: 16px;
    color: var(--dark-black);
    margin-bottom: 20px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-links {
    list-style: none;
}
.footer-links li {
    margin-bottom: 15px;
}
.footer-links li a {
    color: #444;
    font-size: 14px;
    transition: 0.3s;
}
.footer-links li a:hover {
    color: var(--primary-red);
}

/* Static Column (Contact Info) */
.footer-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}
.contact-info p {
    font-size: 15px;
    color: var(--dark-black);
    margin-bottom: 10px;
}
.mt-20 {
    margin-top: 30px;
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: #555;
    font-size: 18px;
    transition: 0.3s;
}
.social-icons a:hover {
    color: var(--primary-red);
}

/* Footer Bottom */
.footer-bottom {
    padding: 20px 0;
}
.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555;
}
.payment-method {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777;
}

/* --- Mobile Responsive & Accordion --- */
.toggle-icon {
    display: none; /* ডেস্কটপে লুকানো থাকবে */
    font-size: 12px;
}

/* ট্যাবলেট এবং মোবাইল ভিউ (অ্যাকর্ডিয়ন প্যাডিং আপডেট) */
@media (max-width: 991px) {
    .footer-grid {
        display: block; 
        padding: 20px 0;
    }
    
    .footer-col {
        border-bottom: 1px solid var(--border-color);
    }
    
    .footer-title {
        padding: 18px 10px; /* এখানে প্যাডিং বাড়ানো হয়েছে যাতে দেখতে ভালো লাগে */
        margin-bottom: 0;
        cursor: pointer;
    }
    
    .static-col {
        border-bottom: none;
        padding: 25px 10px 10px 10px; /* কন্টাক্ট সেকশনেও প্যাডিং যোগ করা হয়েছে */
    }
    .static-col .footer-title {
        cursor: default;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Accordion Logic in CSS */
    .toggle-icon {
        display: block; 
    }
    .footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out; 
    }
    
    .footer-links li {
        padding-left: 10px; /* মেনুর আইটেমগুলো একটু ডানদিকে সরানো হয়েছে */
    }

    .footer-links li:last-child {
        margin-bottom: 20px; 
    }

    .accordion-col.active .footer-links {
        max-height: 250px; 
    }
    
    .bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* শুধুমাত্র মোবাইল ভিউ (ফুটার ফিচার লেআউট ৩য় ছবির মতো করা হয়েছে) */
@media (max-width: 576px) {
    /* Footer Features Layout Update */
    .features-flex {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* ২টা কলাম (2x2 Grid) */
        gap: 30px 15px;
    }
    
    .f-feature {
        flex-direction: column; /* আইকন উপরে, টেক্সট নিচে */
        text-align: center;     /* লেখাগুলো মাঝখানে (Center) */
        gap: 10px;
        min-width: 100%;
    }

    .f-icon i {
        font-size: 28px; /* আইকনের সাইজ মোবাইলের জন্য একটু মানানসই করা হলো */
    }

    .f-text h4 {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .f-text p {
        font-size: 12px;
    }
}

/* --- Cart Icon Badge --- */
.cart-icon-trigger {
    position: relative;
    cursor: pointer;
}
.cart-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--primary-red);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Cart Overlay --- */
.cart-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}
.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Cart Sidebar Layout --- */
.cart-sidebar {
    position: fixed;
    top: 0; right: -400px; /* Initially hidden to the right */
    width: 400px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease;
}
.cart-sidebar.active {
    right: 0;
}

/* Header */
.cart-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.cart-sidebar-header h3 {
    font-size: 16px;
    font-weight: 700;
}
.close-cart {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--dark-black);
    transition: color 0.3s;
}
.close-cart:hover { color: var(--primary-red); }

/* Body (Scrollable items) */
.cart-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.empty-cart-msg {
    text-align: center;
    color: #777;
    margin-top: 50px;
}

/* Individual Cart Item */
.cart-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.cart-item-img {
    width: 70px;
    height: 70px;
    border: 1px solid var(--border-color);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-img img {
    max-width: 100%;
    max-height: 100%;
}
.cart-item-details { flex: 1; padding-right: 20px; }
.cart-item-title {
    font-size: 13px;
    color: var(--dark-black);
    line-height: 1.4;
    margin-bottom: 5px;
    display: block;
}
.cart-item-price {
    font-size: 14px;
    font-weight: bold;
    color: var(--dark-black);
    display: block;
    margin-bottom: 10px;
}

/* Qty Controls */
.cart-qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    width: fit-content;
    border-radius: 3px;
}
.cart-qty-btn {
    background: #fff;
    border: none;
    width: 25px;
    height: 25px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}
.cart-qty-btn:hover { background: #f0f0f0; }
.cart-qty-input {
    width: 30px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: 13px;
    height: 25px;
    pointer-events: none;
}

/* Delete Icon */
.remove-cart-item {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}
.remove-cart-item:hover { color: var(--primary-red); }

/* Footer */
.cart-sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: #fdfdfd;
}
.cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--dark-black);
}
.subtotal-amount { font-size: 16px; }
.btn-checkout {
    display: block;
    width: 100%;
    background: var(--dark-black);
    color: #fff;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
    transition: 0.3s;
}
.btn-checkout:hover { background: var(--primary-red); }
.btn-view-cart {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--dark-black);
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
}
.btn-view-cart:hover { color: var(--primary-red); }

/* --- Mobile View Adjustments --- */
@media (max-width: 576px) {
    .cart-sidebar {
        width: 100%; /* মোবাইলে ফুল স্ক্রিন নিবে */
        right: -100%;
    }
}

/* --- Live Search Dropdown Styles --- */
.search-wrapper {
    position: relative; 
    flex: 1;
    width: 100%;
}
.desktop-search.search-wrapper {
    max-width: 500px;
    margin: 0 20px;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    max-height: 320px; 
    overflow-y: auto; 
    z-index: 1001; 
    display: none; 
    border-radius: 0 0 5px 5px;
}

/* Custom Scrollbar for Search Dropdown */
.search-results-dropdown::-webkit-scrollbar { width: 6px; }
.search-results-dropdown::-webkit-scrollbar-track { background: #f1f1f1; }
.search-results-dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.search-results-dropdown::-webkit-scrollbar-thumb:hover { background: var(--primary-red); }

/* Search Result Individual Item */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #f9f9f9;
    text-decoration: none;
    color: var(--dark-black);
    transition: background 0.2s ease;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f4f6f8; }

.search-result-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px;
}
.search-result-info { display: flex; flex-direction: column; }
.search-result-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.search-result-price { font-size: 13px; color: var(--primary-red); font-weight: bold; }
.no-result-msg { padding: 15px; text-align: center; color: #888; font-size: 14px; }

/* --- Account Sidebar Layout --- */
.account-sidebar {
    position: fixed;
    top: 0; right: -400px; 
    width: 350px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease;
}
.account-sidebar.active {
    right: 0;
}

/* Header */
.account-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.account-header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}
.account-icon-circle {
    width: 40px;
    height: 40px;
    background-color: var(--dark-black);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.account-header-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-black);
}
.close-account {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--dark-black);
    transition: 0.3s;
}
.close-account:hover { color: var(--primary-red); }

/* Body & Navigation List */
.account-sidebar-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.account-nav-list {
    list-style: none;
    margin-bottom: 30px;
}
.account-nav-list li {
    margin-bottom: 15px;
}
.account-nav-list li a {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--dark-black);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0;
    transition: 0.2s;
}
.account-nav-list li a i {
    font-size: 18px;
    width: 25px;
    text-align: center;
    color: #555;
}
.account-nav-list li a:hover {
    color: var(--primary-red);
}
.account-nav-list li a:hover i {
    color: var(--primary-red);
}

/* Welcome Message Box */
.account-welcome-msg {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-top: auto;
}
.account-welcome-msg strong {
    font-size: 15px;
    color: var(--dark-black);
}

/* --- Mobile View Adjustments --- */
@media (max-width: 576px) {
    .account-sidebar {
        width: 100%; /* মোবাইলে ফুল স্ক্রিন নিবে */
        right: -100%;
    }
}


/* --- Wishlist Badge --- */
.wishlist-badge {
    background-color: var(--primary-red);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Wishlist View Layout --- */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

.wishlist-card {
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 5px;
    position: relative;
    background: #fff;
    transition: 0.3s ease;
}
.wishlist-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

.wishlist-remove-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: #888;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: 0.3s;
    z-index: 5;
}
.wishlist-remove-btn:hover { color: var(--primary-red); border-color: var(--primary-red); }

.wishlist-img {
    height: 180px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 15px;
}
.wishlist-img img { max-height: 100%; max-width: 100%; object-fit: contain; }

.w-title { font-size: 14px; color: var(--dark-black); font-weight: 600; line-height: 1.4; margin-bottom: 5px; height: 40px; overflow: hidden; }
.w-price { font-size: 15px; font-weight: bold; color: var(--dark-black); margin-bottom: 8px; }
.w-stock { font-size: 13px; color: #28a745; margin-bottom: 15px; font-weight: 500; } /* In Stock text */

/* উইশলিস্টের বাটন থিমের সাথে মিলিয়ে কালো এবং হোভারে লাল করা হলো */
.w-add-cart-btn {
    width: 100%;
    background: var(--dark-black);
    color: #fff;
    border: none;
    padding: 10px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.3s;
}
.w-add-cart-btn:hover { 
    background: var(--primary-red); 
}

/* --- Share Section --- */
.wishlist-share-section h2 { font-size: 24px; color: var(--dark-black); margin-bottom: 25px; font-weight: 800; }
.share-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.share-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer;
}
.s-icon {
    width: 55px; height: 55px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 22px;
    transition: transform 0.2s;
}
.share-item:hover .s-icon { transform: scale(1.1); }
.share-item span { font-size: 13px; color: var(--dark-black); font-weight: 500; }

/* Social Colors */
.bg-facebook { background: #1877f2; }
.bg-twitter { background: #1da1f2; }
.bg-linkedin { background: #0a66c2; }
.bg-tumblr { background: #35465c; }
.bg-reddit { background: #ff4500; }
.bg-stumbleupon { background: #eb4924; }
.bg-telegram { background: #0088cc; }
.bg-whatsapp { background: #25d366; }
.bg-pocket { background: #ee4056; }
.bg-digg { background: #000000; }
.bg-vk { background: #4a76a8; }
.bg-email { background: #7f7f7f; }
.bg-copy { background: #4a6684; }

/* --- Responsive Wishlist --- */
@media (max-width: 991px) {
    .wishlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
    .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .share-icons-grid { gap: 15px 10px; justify-content: center; }
    .s-icon { width: 45px; height: 45px; font-size: 18px; }
    .w-title { font-size: 13px; }
    .w-add-cart-btn { font-size: 13px; padding: 8px; }
}


/* --- Custom Toast Notification --- */
.custom-toast {
    position: fixed;
    bottom: -100px; /* শুরুতে নিচে লুকানো থাকবে */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-red); /* আপনার থিমের লাল কালার */
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: bold;
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* সুন্দর একটি বাউন্স ইফেক্ট */
}

.custom-toast.show {
    bottom: 30px; /* স্ক্রিনে ভেসে উঠবে */
    opacity: 1;
}

/* লোডিং স্পিনারের অ্যানিমেশন */
.custom-toast .fa-spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}



/* --- Product Details View Styles --- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #777;
    margin-bottom: 25px;
}

.breadcrumb a {
    color: var(--dark-black);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--primary-red);
}

.breadcrumb .fas {
    font-size: 10px;
    color: #ccc;
}

/* মার্জিন বাদ দেওয়া হয়েছে কারণ gap ব্যবহার করেছি */
.product-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 50px; }

/* Image Gallery & Zoom */
.product-image-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    /* এটি গ্রিড লেআউটকে ডানদিকে ভাঙতে দেবে না */
    width: 100%;
}

.thumbnail-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
    /* এটি থাম্বনেইল গ্যালারিকে স্ক্রিনের বাইরে যাওয়া থেকে ১০০% আটকে দেবে */
    width: 100%;
}

/* সুন্দর একটি চিকন স্ক্রলবার দেওয়ার জন্য */
.thumbnail-gallery::-webkit-scrollbar {
    height: 5px;
}

.thumbnail-gallery::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.thumb-item {
    flex: 0 0 auto;
    /* ছবিগুলোকে চ্যাপ্টা হতে দেবে না */
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}


.main-image-container {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    height: 450px;
    background: #f9f9f9;
    cursor: crosshair; /* জুম করার ফিল দেওয়ার জন্য */
    display: flex; justify-content: center; align-items: center;
}
.main-image-container img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.1s ease; /* স্মুথ জুম ইফেক্ট */
}
.main-image-container iframe {
    width: 100%; height: 100%; border: none; display: none;
}

.thumbnail-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.thumbnail-gallery::-webkit-scrollbar {
    display: none;
}

.thumb-item {
    flex: 0 0 auto;
    /* ছবিগুলো চ্যাপ্টা হতে বাধা দেবে */
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item.active { border-color: var(--primary-red); }
.thumb-video-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6); color: #fff; width: 30px; height: 30px;
    display: flex; justify-content: center; align-items: center; border-radius: 50%;
    font-size: 14px; pointer-events: none;
}
.thumb-item:hover .thumb-video-icon { background: var(--primary-red); }

/* Info Area */
.pd-title {
    font-size: 26px;
    color: var(--dark-black);
    margin-bottom: 10px;
    line-height: 1.3;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}
.pd-price { font-size: 28px; font-weight: bold; color: var(--dark-black); margin-bottom: 10px; }
.stock-status { color: #1abc9c; font-size: 14px; font-weight: 600; margin-bottom: 25px; }

/* Buttons matching Red & Black Theme */
.cart-action-flex { display: flex; gap: 15px; margin-bottom: 25px; height: 48px; }
.qty-input-group { display: flex; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
.qty-input-group button { background: #f4f4f4; border: none; width: 40px; cursor: pointer; font-size: 18px; transition: 0.3s;}
.qty-input-group button:hover { background: #e0e0e0; }
.qty-input-group input { width: 50px; text-align: center; border: none; font-weight: bold; font-size: 16px; pointer-events: none; }

.btn-add-cart-lg {
    flex: 1; background: var(--dark-black); color: #fff; border: none;
    border-radius: 4px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s;
}
.btn-add-cart-lg:hover { background: var(--primary-red); }

.btn-buy-now {
    flex: 1; background: #fff; color: var(--dark-black); border: 2px solid var(--dark-black);
    border-radius: 4px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s;
}
.btn-buy-now:hover { background: var(--primary-red); border-color: var(--primary-red); color: #fff; }

.extra-actions { display: flex; gap: 20px; font-size: 14px; color: #555; }
.extra-actions a { color: inherit; text-decoration: none; }
.extra-actions a:hover { color: var(--primary-red); }

/* Desktop Tabs */
.pd-tabs-section { margin-top: 20px; margin-bottom: 40px; }
.pd-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
.pd-tab-btn {
    background: none; border: none; padding: 12px 25px; font-size: 16px;
    font-weight: 600; color: #777; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.3s;
}
.pd-tab-btn.active { color: var(--dark-black); border-bottom-color: var(--primary-red); }
.pd-tab-content { display: none; font-size: 15px; color: #444; line-height: 1.7; animation: fadeIn 0.4s; }
.pd-tab-content.active { display: block; }
.pd-tab-content h3 { color: var(--dark-black); margin-bottom: 15px; }
.pd-tab-content ul { padding-left: 20px; margin-top: 10px; }

/* Mobile Accordion Tabs */
.mobile-accordion-tabs { margin: 30px 0; border-top: 1px solid var(--border-color); }
.accordion-item { border-bottom: 1px solid var(--border-color); }
.accordion-header {
    width: 100%; background: none; border: none; padding: 15px 0; text-align: left;
    font-size: 16px; font-weight: 600; color: var(--dark-black); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}
.accordion-header .fa-minus { display: none; }
.accordion-item.active .accordion-header .fa-plus { display: none; }
.accordion-item.active .accordion-header .fa-minus { display: block; color: var(--primary-red); }
.accordion-body { display: none; padding-bottom: 15px; font-size: 14px; color: #555; line-height: 1.6; }
.accordion-item.active .accordion-body { display: block; animation: fadeIn 0.3s; }

/* Responsive Adjustments */
@media (max-width: 991px) {
    .product-details-grid { grid-template-columns: 1fr; gap: 30px; }
    .main-image-container { height: 400px; }
}
@media (max-width: 576px) {
    .main-image-container {
        height: 320px;
    }

    .pd-title {
        font-size: 22px;
    }

    /* বাটনের মেইন কন্টেইনার */
    .cart-action-flex {
        flex-direction: column;
        height: auto;
        gap: 12px;
        margin-bottom: 30px;
    }

    /* কোয়ান্টিটি ইনপুট যাতে পুরো স্ক্রিন জুড়ে বাজে না দেখায়, তাই মাঝখানে রাখা হলো */
    .qty-input-group {
        width: 100%;
        height: 48px;
        justify-content: center;
    }

    .qty-input-group input {
        width: 70px;
    }

    .qty-input-group button {
        width: 50px;
    }

    /* কার্ট এবং বাই নাও বাটন */
    .btn-add-cart-lg,
    .btn-buy-now {
        width: 100%;
        height: 48px;
        margin: 0;
    }

    /* Fixed Bottom Actions */
    .mobile-fixed-bottom-actions {
        position: fixed; bottom: 0; left: 0; width: 100%; background: #fff;
        display: flex; gap: 10px; padding: 10px; border-top: 1px solid var(--border-color);
        z-index: 999; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    .mobile-fixed-bottom-actions button { margin: 0; }
    #product-view { padding-bottom: 80px; /* Make room for fixed bar */ }
}


/* --- Nav Category Dropdown (All Pages) --- */
.nav-category-dropdown {
    position: relative;
}
.nav-category-btn {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    color: var(--dark-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    width: 260px; /* হোমপেইজের সাইডবারের সমান চওড়া */
    transition: 0.3s;
}
.nav-category-btn:hover {
    border-color: var(--dark-black);
}
.nav-category-btn span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-category-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    border-top: none;
    z-index: 1000;
    display: none; /* ডিফল্টভাবে লুকানো থাকবে */
    border-radius: 0 0 4px 4px;
}
.nav-category-menu.active {
    display: block; /* ক্লিক করলে শো করবে */
    animation: fadeIn 0.2s ease-in-out;
}
.nav-category-menu .mega-panel {
    top: -1px; /* মেগা মেনু প্যানেলটি সোজা রাখার জন্য */
}


/* --- Review Tab Layout --- */
.review-tab-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.review-summary h4, .review-list h4 { font-size: 18px; color: var(--dark-black); margin-bottom: 20px; font-weight: 700; }
.rating-big-score { display: flex; flex-direction: column; margin-bottom: 20px; }
.rating-big-score .score { font-size: 48px; font-weight: bold; color: var(--dark-black); line-height: 1; }
.rating-big-score .count { font-size: 13px; color: #777; margin-top: 5px; }

.rating-bars { margin-bottom: 30px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: #555; }
.star-label { display: flex; align-items: center; gap: 3px; width: 30px; }
.star-label i { font-size: 10px; color: #ccc; }
.bar-bg { flex: 1; height: 6px; background: #eaeaea; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: #f39c12; }
.bar-count { width: 15px; text-align: right; }

.write-review-box h5 { font-size: 15px; color: var(--dark-black); margin-bottom: 5px; }
.write-review-box p { font-size: 13px; color: #777; margin-bottom: 15px; }
.btn-write-review { background: var(--dark-black); color: #fff; padding: 12px 25px; border: none; border-radius: 3px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-write-review:hover { background: var(--primary-red); }

.no-reviews-box { background: #f2f9ff; color: #31708f; padding: 20px; font-size: 14px; font-weight: 500; text-align: center; border-radius: 4px; }

@media (max-width: 768px) {
    .review-tab-layout { grid-template-columns: 1fr; gap: 30px; }
}

/* --- Review Modal Styles --- */
.review-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 1050;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s ease;
}
.review-modal-overlay.active { opacity: 1; visibility: visible; }
.review-modal-box {
    background: #fff; width: 90%; max-width: 600px; padding: 30px;
    border-radius: 5px; position: relative;
    transform: translateY(-20px); transition: 0.3s ease;
}
.review-modal-overlay.active .review-modal-box { transform: translateY(0); }

.close-modal-btn {
    position: absolute; top: 15px; right: 20px; background: none; border: none;
    font-size: 20px; color: #555; cursor: pointer; transition: 0.3s;
}
.close-modal-btn:hover { color: var(--primary-red); }

#reviewModalTitle { font-size: 20px; color: var(--dark-black); margin-bottom: 10px; line-height: 1.4; padding-right: 20px; }
.review-modal-sub { font-size: 13px; color: #666; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }

#reviewForm .form-group { margin-bottom: 15px; }
#reviewForm label { display: block; font-size: 13px; font-weight: bold; color: var(--dark-black); margin-bottom: 8px; }
.req { color: var(--primary-red); }
#reviewForm input[type="text"], #reviewForm input[type="email"], #reviewForm textarea {
    width: 100%; padding: 12px; border: 1px solid var(--border-color);
    border-radius: 3px; font-size: 14px; outline: none; transition: 0.3s;
}
#reviewForm input:focus, #reviewForm textarea:focus { border-color: var(--dark-black); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-checkbox { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; font-size: 12px; color: #555; line-height: 1.4; }

.star-rating-input { display: flex; gap: 5px; font-size: 22px; color: #ccc; cursor: pointer; }
.star-rating-input .fas { color: #f39c12; }

.btn-submit-review { width: 100%; background: var(--dark-black); color: #fff; padding: 14px; border: none; border-radius: 3px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.3s; }
.btn-submit-review:hover { background: var(--primary-red); }

@media (max-width: 576px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .review-modal-box { padding: 20px; }
    #reviewModalTitle { font-size: 18px; }
}




/* =========================================
   CATEGORY / SHOP PAGE STYLES
   ========================================= */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }

/* --- Sidebar & Filters --- */
.shop-sidebar { background: #fff; }
.filter-widget { border-bottom: 1px solid var(--border-color); padding-bottom: 25px; margin-bottom: 25px; }
.filter-widget:last-child { border-bottom: none; }

.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; cursor: pointer; }
.filter-header h4 { font-size: 15px; color: var(--dark-black); font-weight: 700; margin: 0; }
.clear-all { font-size: 13px; color: var(--dark-black); text-decoration: underline; font-weight: 600; }

.active-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-tag { background: var(--dark-black); color: #fff; padding: 6px 12px; font-size: 12px; border-radius: 3px; display: flex; align-items: center; gap: 8px; }
.filter-tag i { cursor: pointer; }

/* Range Slider Custom Design */
.price-labels { font-size: 14px; color: #555; margin-bottom: 20px; }
.range-slider { position: relative; height: 4px; background: #e0e0e0; border-radius: 5px; margin-top: 15px; margin-bottom: 10px; }
.range-slider .progress { position: absolute; left: 25%; right: 25%; height: 100%; background: var(--dark-black); border-radius: 5px; }
.range-slider input[type="range"] { position: absolute; width: 100%; height: 4px; top: -2px; -webkit-appearance: none; background: none; pointer-events: none; }
.range-slider input[type="range"]::-webkit-slider-thumb { height: 16px; width: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--dark-black); pointer-events: auto; -webkit-appearance: none; cursor: pointer; }

.category-select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 3px; font-size: 14px; color: #555; outline: none; }

.btn-apply { width: 100%; background: var(--dark-black); color: #fff; padding: 14px; border: none; font-weight: bold; font-size: 15px; border-radius: 3px; cursor: pointer; transition: 0.3s; }
.btn-apply:hover { background: var(--primary-red); }

/* --- Top Bar & Product Grid --- */
.shop-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.result-count { font-size: 14px; color: #777; }
.shop-controls { display: flex; align-items: center; gap: 30px; }
.sort-dropdown label { font-size: 14px; color: #555; margin-right: 8px; }
.sort-dropdown select { border: none; font-size: 14px; font-weight: 600; outline: none; cursor: pointer; color: var(--dark-black); }
.view-toggles button { background: none; border: none; font-size: 18px; color: #ccc; cursor: pointer; margin-left: 8px; transition: 0.3s; }
.view-toggles button.active, .view-toggles button:hover { color: var(--dark-black); }

.shop-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


/* =========================================
   FIX FOR SHOP / CATEGORY PRODUCT CARDS
   ========================================= */
.shop-product-grid .product-card {
    min-width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* --- Mobile Responsive Filter Drawer --- */
.mobile-filter-bar { display: flex; gap: 15px; margin-bottom: 25px; }
.btn-open-filter, .mobile-sort-select { flex: 1; padding: 12px; border: 1px solid var(--border-color); background: #fff; font-weight: bold; font-size: 14px; text-align: center; border-radius: 3px; cursor: pointer; outline: none; }

.filter-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1050; display: none; }
.filter-overlay.active { display: block; }

@media (max-width: 1200px) { .shop-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
    .shop-layout { grid-template-columns: 1fr; }
    
    /* Left Sidebar to Drawer */
    .shop-sidebar {
        position: fixed; top: 0; left: -320px; width: 320px; height: 100%; background: #f9f9f9;
        z-index: 1060; overflow-y: auto; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex; flex-direction: column; padding: 0; box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    .shop-sidebar.active { left: 0; }
    
    .sidebar-close-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #fff; border-bottom: 1px solid var(--border-color); }
    .sidebar-close-header h3 { font-size: 18px; margin: 0; color: var(--dark-black); }
    .sidebar-close-header button { background: none; border: none; font-size: 20px; color: var(--dark-black); cursor: pointer; }
    
    .filter-widget { background: #fff; padding: 20px; margin-bottom: 10px; border-bottom: none; }
    
    .filter-actions { background: #fff; padding: 20px; margin-top: auto; display: flex; gap: 15px; border-top: 1px solid var(--border-color); }
    .btn-clear { flex: 1; background: #fff; color: var(--dark-black); padding: 14px; border: 1px solid var(--border-color); font-weight: bold; border-radius: 3px; cursor: pointer; }
    .btn-apply { flex: 1; margin: 0; }
}
@media (max-width: 576px) { .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }


/* --- Filter Accordion Styles --- */
.filter-widget.collapsed .filter-body {
    display: none; /* কলাপ্সড অবস্থায় বডি লুকানো থাকবে */
}
.filter-widget .filter-header i {
    transition: transform 0.3s ease; /* আইকন চেঞ্জ হওয়ার সময় স্মুথ এনিমেশন */
}



/* =========================================
   BLOG PAGE STYLES
   ========================================= */
.blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; align-items: start; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* Blog Cards */
.blog-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.blog-img { position: relative; width: 100%; height: 220px; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
.blog-card:hover .blog-img img { transform: scale(1.08); }
.blog-cat { position: absolute; top: 15px; left: 15px; background: var(--primary-red); color: #fff; padding: 4px 12px; font-size: 12px; font-weight: bold; border-radius: 20px; z-index: 2; }

.blog-content { padding: 25px; }
.blog-meta { font-size: 13px; color: #888; margin-bottom: 10px; }
.blog-title { font-size: 18px; margin-bottom: 12px; line-height: 1.4; }
.blog-title a { color: var(--dark-black); text-decoration: none; transition: 0.3s; }
.blog-title a:hover { color: var(--primary-red); }
.blog-excerpt { font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.6; }
.read-more { font-size: 14px; font-weight: bold; color: var(--dark-black); display: inline-flex; align-items: center; gap: 5px; transition: 0.3s; }
.read-more:hover { color: var(--primary-red); }

/* Blog Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 30px; }
.blog-widget { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
.widget-title { font-size: 16px; font-weight: bold; color: var(--dark-black); margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; position: relative; }
.widget-title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 2px; background: var(--primary-red); }

/* Sidebar Elements */
.blog-search { display: flex; }
.blog-search input { flex: 1; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px 0 0 4px; outline: none; font-size: 14px; }
.blog-search button { padding: 0 15px; background: var(--dark-black); color: #fff; border: none; border-radius: 0 4px 4px 0; cursor: pointer; transition: 0.3s; }
.blog-search button:hover { background: var(--primary-red); }

.blog-cat-list { list-style: none; padding: 0; margin: 0; }
.blog-cat-list li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #eee; }
.blog-cat-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.blog-cat-list a { display: flex; justify-content: space-between; color: #555; font-size: 14px; transition: 0.3s; }
.blog-cat-list a:hover { color: var(--primary-red); }

.recent-post-item { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
.recent-post-item:last-child { margin-bottom: 0; }
.recent-post-item img { width: 70px; height: 70px; border-radius: 4px; object-fit: cover; }
.recent-post-item h5 { font-size: 13px; line-height: 1.4; margin-bottom: 5px; }
.recent-post-item h5 a { color: var(--dark-black); transition: 0.3s; }
.recent-post-item h5 a:hover { color: var(--primary-red); }
.recent-post-item span { font-size: 11px; color: #888; }

/* Responsive */
@media (max-width: 991px) {
    .blog-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .blog-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
}


/* =========================================
   BLOG DETAILS PAGE STYLES
   ========================================= */
.blog-details-header { text-align: center; margin-bottom: 30px; }
.bd-category { display: inline-block; background: var(--primary-red); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 13px; font-weight: bold; margin-bottom: 15px; }
.bd-title { font-size: 32px; color: var(--dark-black); margin-bottom: 20px; line-height: 1.3; }
.bd-meta { display: flex; justify-content: center; gap: 20px; color: #777; font-size: 14px; flex-wrap: wrap; }
.bd-meta span { display: flex; align-items: center; gap: 8px; }

.bd-featured-img { width: 100%; max-height: 450px; overflow: hidden; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.bd-featured-img img { width: 100%; height: 100%; object-fit: cover; }

.bd-content p { font-size: 17px; line-height: 1.8; color: #444; margin-bottom: 20px; }
.bd-content h3 { font-size: 24px; color: var(--dark-black); margin: 35px 0 15px; }
    
.bd-content blockquote { background: #f9f9f9; border-left: 4px solid var(--primary-red); padding: 25px; margin: 35px 0; font-size: 18px; font-style: italic; color: #555; border-radius: 0 8px 8px 0; }
    
/* Responsive YouTube Wrapper (16:9 Aspect Ratio) */
.bd-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; border-radius: 8px; margin: 35px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.bd-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.bd-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; padding-top: 25px; border-top: 1px solid #eee; flex-wrap: wrap; gap: 20px; }
.bd-tags a { background: #f4f6f8; color: #555; padding: 6px 12px; border-radius: 4px; font-size: 13px; margin-left: 5px; text-decoration: none; transition: 0.3s; }
.bd-tags a:hover { background: var(--dark-black); color: #fff; }
    
.bd-share { display: flex; align-items: center; gap: 10px; }
.bd-share span { font-weight: bold; color: var(--dark-black); }
.bd-share a { width: 35px; height: 35px; display: inline-flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; font-size: 14px; text-decoration: none; transition: 0.3s; }
.bd-share a:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }

@media (max-width: 768px) {
    .bd-title { font-size: 26px; }
    .bd-content p { font-size: 16px; }
    .bd-footer { flex-direction: column; align-items: flex-start; }
}

/* --- Comment Section Styles --- */
.bd-comment-section { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; }
.bd-comment-section h3 { font-size: 24px; color: var(--dark-black); margin-bottom: 5px; font-weight: 700; }
.bd-comment-section p { font-size: 14px; color: #666; margin-bottom: 25px; }

.blog-comment-form .form-group { margin-bottom: 20px; }
.blog-comment-form label { display: block; font-size: 14px; color: var(--dark-black); font-weight: 600; margin-bottom: 8px; }
.blog-comment-form input, .blog-comment-form textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; font-family: inherit; outline: none; transition: 0.3s; resize: vertical; }
.blog-comment-form input:focus, .blog-comment-form textarea:focus { border-color: var(--dark-black); }

.blog-comment-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.btn-post-comment { width: 100%; background: var(--dark-black); color: #fff; padding: 16px; border: none; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.btn-post-comment:hover { background: var(--primary-red); }

@media (max-width: 768px) {
    .blog-comment-form .form-row { grid-template-columns: 1fr; gap: 0; }
}


/* --- Display Comments Styles --- */
.bd-comments-display { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; margin-bottom: 30px; }
.bd-comments-display h3 { font-size: 22px; color: var(--dark-black); margin-bottom: 25px; font-weight: 700; }

.comment-item { display: flex; gap: 15px; margin-bottom: 25px; border-bottom: 1px solid #f5f5f5; padding-bottom: 25px; }
.comment-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.comment-avatar { width: 50px; height: 50px; border-radius: 50%; background: #ccc; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; flex-shrink: 0; }
.comment-content { flex: 1; }

.comment-author-name { font-size: 15px; font-weight: bold; color: var(--dark-black); margin-bottom: 3px; display: block; }
.comment-date { font-size: 12px; color: #888; margin-bottom: 15px; display: block; }

.comment-moderation { font-size: 14px; font-style: italic; color: #444; margin-bottom: 12px; display: block; font-weight: 500; }
.comment-text { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 15px; }

.comment-reply-btn { font-size: 13px; color: #666; text-decoration: none; font-weight: 600; transition: 0.3s; }
.comment-reply-btn:hover { color: var(--primary-red); }

/* Form border adjustment */
.bd-comment-section { margin-top: 20px; }
.bd-comments-display + .bd-comment-section { border-top: 1px solid #eee; padding-top: 40px; }


/* =========================================
   TRACK ORDER PAGE STYLES
   ========================================= */
.track-order-form-box { max-width: 700px; margin: 0 auto; text-align: left; }
.track-order-form-box .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }

.track-order-form-box .text-left { text-align: left; }
.track-order-form-box label { display: block; font-size: 14px; font-weight: 600; color: var(--dark-black); margin-bottom: 10px; }
.track-order-form-box input { width: 100%; padding: 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; outline: none; transition: 0.3s; color: #555; }
.track-order-form-box input:focus { border-color: var(--dark-black); }

.btn-track { 
    width: 100%; 
    background: var(--dark-black); /* Ager blue rong bad diye Black kora holo */
    color: #fff; 
    padding: 16px; 
    border: none; 
    font-size: 16px; 
    font-weight: bold; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: 0.3s; 
}
.btn-track:hover { 
    background: var(--primary-red); /* Hover korle Red hobe */
}

@media (max-width: 768px) {
    .track-order-form-box .form-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
}


/* =========================================
   CONTACT US PAGE STYLES
   ========================================= */
.contact-hero-section { background: #fff; padding: 70px 0; border-bottom: 1px solid var(--border-color); }
.contact-title { font-size: 46px; color: var(--dark-black); font-weight: 800; margin-bottom: 15px; }
.contact-subtitle { font-size: 16px; color: #555; margin-bottom: 50px; font-weight: 500; }

.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.c-info-box { text-align: left; padding: 20px; }
.c-icon { font-size: 26px; color: var(--dark-black); margin-bottom: 15px; }
.c-info-box h4 { font-size: 16px; font-weight: 700; color: var(--dark-black); margin-bottom: 10px; }
.c-link { display: inline-block; font-size: 15px; color: var(--dark-black); font-weight: 600; text-decoration: underline; margin-bottom: 8px; transition: 0.3s; }
.c-link:hover { color: var(--primary-red); }
.c-info-box p { font-size: 13px; color: #777; line-height: 1.5; }

.contact-middle-section { padding: 70px 15px; background: #fafafa; }
.c-middle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 800px; margin: 0 auto; }
.c-middle-item { display: flex; gap: 40px; }
.c-middle-title { font-size: 26px; color: var(--dark-black); font-weight: 700; width: 160px; }
.c-middle-content p { font-size: 15px; color: #555; margin-bottom: 15px; }
.social-connect a { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--dark-black); text-decoration: none; margin-bottom: 15px; font-weight: 600; transition: 0.3s; }
.social-connect a i { font-size: 18px; width: 20px; text-align: center; }
.social-connect a:hover { color: var(--primary-red); transform: translateX(5px); }

.contact-form-section { background: #e0f2ee; /* ২য় ছবির মত হালকা সায়ান ব্যাকগ্রাউন্ড */ padding: 80px 15px; }
.custom-contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.custom-contact-form .form-group { margin-bottom: 20px; }
.custom-contact-form label { display: block; font-size: 14px; font-weight: bold; color: var(--dark-black); margin-bottom: 8px; }
.custom-contact-form input, .custom-contact-form select, .custom-contact-form textarea { width: 100%; padding: 15px; border: none; border-radius: 4px; font-size: 14px; outline: none; box-shadow: 0 4px 15px rgba(0,0,0,0.03); color: #333; font-family: inherit; }
.custom-contact-form input:focus, .custom-contact-form select:focus, .custom-contact-form textarea:focus { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.custom-contact-form .form-checkbox { display: flex; gap: 10px; align-items: center; margin-bottom: 25px; font-size: 14px; color: #555; }

.btn-submit-contact { width: 100%; background: var(--dark-black); color: #fff; padding: 16px; border: none; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.btn-submit-contact:hover { background: var(--primary-red); }

@media (max-width: 768px) {
    .contact-title { font-size: 32px; }
    .contact-info-grid { grid-template-columns: 1fr; gap: 10px; }
    .c-info-box { text-align: center; }
    .c-middle-grid { grid-template-columns: 1fr; gap: 30px; }
    .c-middle-item { flex-direction: column; gap: 15px; align-items: center; text-align: center; }
    .c-middle-title { width: auto; }
    .custom-contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
}



/* =========================================
   ACCOUNT PAGE STYLES (Sign In / Register)
   ========================================= */
.account-page-container { max-width: 450px; margin: 0 auto; text-align: center; }
.account-page-logo { margin-bottom: 30px; }
.account-page-logo h2 { font-size: 32px; font-weight: 900; margin: 0; }
.account-form-box { border: 1px solid var(--border-color); border-radius: 4px; background: #fff; padding: 0; text-align: left; }

.account-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.acc-tab-btn { flex: 1; background: none; border: none; padding: 18px 10px; font-size: 15px; font-weight: bold; color: #888; cursor: pointer; transition: 0.3s; border-bottom: 2px solid transparent; outline: none; }
.acc-tab-btn.active { color: var(--dark-black); border-bottom-color: var(--dark-black); }
.acc-tab-btn:hover { color: var(--dark-black); }

.acc-form-wrapper { display: none; padding: 35px 30px; animation: fadeIn 0.3s; }
.acc-form-wrapper.active { display: block; }

.acc-form-wrapper .form-group { margin-bottom: 20px; }
.acc-form-wrapper label { display: block; font-size: 13px; color: var(--dark-black); font-weight: 600; margin-bottom: 8px; }
.acc-form-wrapper input[type="text"], .acc-form-wrapper input[type="email"], .acc-form-wrapper input[type="password"] { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; outline: none; transition: 0.3s; }
.acc-form-wrapper input:focus { border-color: var(--dark-black); }

.password-input-wrapper { position: relative; }
.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888; font-size: 16px; }
.toggle-password:hover { color: var(--dark-black); }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 13px; }
.checkbox-group { display: flex; align-items: center; gap: 8px; color: #555; }
.forgot-pass { color: var(--dark-black); text-decoration: underline; font-weight: 600; }
.forgot-pass:hover { color: var(--primary-red); }

.privacy-text { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 25px; }
.privacy-text a { color: var(--dark-black); text-decoration: underline; font-weight: 600; }
.privacy-text a:hover { color: var(--primary-red); }

.btn-acc-submit { width: 100%; background: var(--dark-black); color: #fff; padding: 15px; border: none; font-size: 15px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; }
.btn-acc-submit:hover { background: var(--primary-red); }

.acc-bottom-link { text-align: center; margin-top: 25px; }
.acc-bottom-link a { font-size: 13px; color: var(--dark-black); font-weight: 600; text-decoration: underline; transition: 0.3s; }
.acc-bottom-link a:hover { color: var(--primary-red); }

@media (max-width: 576px) {
    .account-page-container { padding: 0 10px; }
    .account-form-box { border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .acc-form-wrapper { padding: 30px 20px; }
}


/* =========================================
   CHECKOUT PAGE STYLES
   ========================================= */
.checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

/* Left Column */
.checkout-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 25px; border: 1px solid #f0f0f0; }
.checkout-box h3 { font-size: 20px; color: var(--dark-black); margin-bottom: 5px; font-weight: 700; }
.box-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.box-header-flex a { color: var(--primary-red); font-size: 14px; font-weight: 600; text-decoration: underline; }
.sub-text { font-size: 13px; color: #666; margin-bottom: 20px; }
.guest-text { font-size: 12px; color: #888; margin-top: 5px; font-style: italic; }

.checkout-box .form-group { margin-bottom: 15px; }
.checkout-box input[type="text"], .checkout-box input[type="email"], .checkout-box input[type="tel"], .checkout-box input[type="password"], .checkout-box select, .checkout-box textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 14px; outline: none; transition: 0.3s; color: #333; background: #fff; }
.checkout-box input:focus, .checkout-box select:focus, .checkout-box textarea:focus { border-color: var(--dark-black); box-shadow: 0 0 5px rgba(0,0,0,0.05); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.checkout-box .form-checkbox { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--dark-black); font-weight: 500; cursor: pointer; }

/* Radio Options (Shipping & Payment) */
.shipping-option-box, .payment-option-box { border: 1px solid var(--border-color); border-radius: 5px; margin-top: 15px; overflow: hidden; }
.radio-label { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; background: #fafafa; transition: 0.3s; }
.radio-label:last-child { border-bottom: none; }
.radio-label:hover { background: #f0f0f0; }
.radio-flex { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dark-black); font-weight: 500; }
.radio-label .price { font-size: 14px; font-weight: bold; color: var(--dark-black); }
.payment-desc { padding: 15px; font-size: 13px; color: #666; background: #fff; line-height: 1.5; }

/* Actions */
.checkout-actions { margin-top: 30px; }
.policy-text { font-size: 13px; color: #666; margin-bottom: 25px; line-height: 1.5; }
.policy-text a { color: var(--dark-black); text-decoration: underline; }
.action-btn-flex { display: flex; justify-content: space-between; align-items: center; }
.return-cart { color: var(--dark-black); font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.return-cart:hover { color: var(--primary-red); transform: translateX(-5px); }
.btn-place-order { background: var(--dark-black); color: #fff; padding: 18px 40px; font-size: 16px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.btn-place-order:hover { background: var(--primary-red); }

/* Right Column (Order Summary Sticky) */
.checkout-right { position: sticky; top: 20px; }
.order-summary-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; }
.order-summary-box h3 { font-size: 18px; color: var(--dark-black); margin-bottom: 25px; font-weight: 700; }

.summary-items { max-height: 350px; overflow-y: auto; margin-bottom: 20px; padding-right: 5px; }
.summary-items::-webkit-scrollbar { width: 5px; }
.summary-items::-webkit-scrollbar-thumb { background: #ddd; border-radius: 5px; }
.s-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.s-item-img { position: relative; width: 65px; height: 65px; border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; display: flex; justify-content: center; align-items: center; background: #fff; }
.s-item-img img { max-width: 100%; max-height: 100%; }
.s-item-qty { position: absolute; top: -8px; right: -8px; background: #777; color: #fff; font-size: 11px; font-weight: bold; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.s-item-info { flex: 1; }
.s-item-title { font-size: 13px; color: var(--dark-black); font-weight: 500; line-height: 1.4; display: block; margin-bottom: 5px; }
.s-item-price { font-size: 14px; font-weight: bold; color: var(--dark-black); }

.coupon-section { padding: 25px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
.coupon-flex { display: flex; gap: 10px; }
.coupon-flex input { flex: 1; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; outline: none; }
.btn-apply-coupon { background: #eee; color: var(--dark-black); border: none; padding: 0 25px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; }
.btn-apply-coupon:hover { background: var(--dark-black); color: #fff; }

.summary-totals .tot-row { display: flex; justify-content: space-between; font-size: 14px; color: #555; margin-bottom: 15px; }
.summary-totals .total-row { border-top: 1px solid var(--border-color); padding-top: 20px; margin-top: 5px; margin-bottom: 0; align-items: center; }
.total-row span:first-child { font-size: 16px; color: var(--dark-black); font-weight: bold; }
.final-price { font-size: 22px; font-weight: 900; color: var(--dark-black); }

@media (max-width: 991px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-right { position: static; order: -1; margin-bottom: 10px; } /* মোবাইলে সামারি আগে দেখাবে */
    .form-row-2 { grid-template-columns: 1fr; }
    .action-btn-flex { flex-direction: column-reverse; gap: 20px; }
    .btn-place-order { width: 100%; }
}



/* =========================================
   CUSTOM SEARCHABLE DROPDOWN (Vanilla JS)
   ========================================= */
.custom-select-wrapper { position: relative; user-select: none; }
.custom-select-display {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 15px; border: 1px solid var(--border-color); border-radius: 5px;
    background: #fff; cursor: pointer; font-size: 14px; color: #555; transition: 0.3s;
}
.custom-select-display:hover { border-color: var(--dark-black); }
.custom-select-wrapper.active .custom-select-display { border-color: var(--dark-black); box-shadow: 0 0 5px rgba(0,0,0,0.05); }

/* Dropdown Panel */
.custom-select-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%; background: #fff;
    border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 5px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.3s ease;
}
.custom-select-wrapper.active .custom-select-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Search Box Inside Dropdown */
.cs-search-box { padding: 10px; border-bottom: 1px solid #eee; }
.cs-search-box input {
    width: 100%; padding: 10px !important; border: 1px solid #ddd !important;
    border-radius: 4px !important; font-size: 13px !important; outline: none; box-shadow: none !important;
}
.cs-search-box input:focus { border-color: var(--primary-red) !important; }

/* Options List */
.custom-select-options { list-style: none; max-height: 200px; overflow-y: auto; margin: 0; padding: 0; }
.custom-select-options::-webkit-scrollbar { width: 5px; }
.custom-select-options::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.custom-select-options li { padding: 10px 15px; font-size: 14px; color: var(--dark-black); cursor: pointer; border-bottom: 1px solid #f9f9f9; transition: 0.2s; }
.custom-select-options li:hover { background-color: var(--primary-red); color: #fff; }
.custom-select-options li.no-result { color: #888; cursor: default; }
.custom-select-options li.no-result:hover { background-color: transparent; color: #888; }

/* Disabled State */
.custom-select-wrapper.disabled .custom-select-display { background: #f9f9f9; cursor: not-allowed; opacity: 0.7; }
.custom-select-wrapper.disabled:hover .custom-select-display { border-color: var(--border-color); }



/* =========================================
   CARD DESIGN FOR ALL PRODUCTS SECTION
   ========================================= */

/* সেকশনের মূল কার্ড র‍্যাপার */
.section-card-wrapper {
    background-color: #fff;
    border: 1px solid var(--border-color);
    /* ছবির মতো হালকা বর্ডার */
    border-radius: 5px;
    padding: 25px 25px 30px 25px;
    /* ডেস্কটপের জন্য চারপাশের প্যাডিং */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    /* হালকা শ্যাডো */
}

/* হেডারের নিচের বর্ডার এবং স্টাইল */
.section-header-flex.header-with-border {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    /* লাল লাইনের জন্য */
}

/* টাইটেল এবং লাল আন্ডারলাইন (ছবির মতো) */
.title-with-line {
    font-size: 22px !important;
    margin: 0;
    position: relative;
    color: var(--dark-black);
}

.title-with-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    /* হেডারের বর্ডারের ঠিক উপরে বসবে */
    width: 100%;
    height: 2px;
    background-color: var(--primary-red);
    /* লাল রঙের আন্ডারলাইন */
}

/* See All বাটন (ছবির Top 20 বাটনের মতো) */
.btn-see-all {
    background-color: var(--primary-red);
    color: #fff !important;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.btn-see-all:hover {
    background-color: var(--dark-black);
    /* হোভার করলে কালো হবে */
}

/* রেস্পন্সিভ ডিজাইন (মোবাইলে যেন কার্ড সুন্দর দেখায়) */
@media (max-width: 576px) {
    .section-card-wrapper {
        padding: 15px 10px;
        /* মোবাইলে প্যাডিং কমানো হলো */
    }

    .title-with-line {
        font-size: 18px !important;
    }

    .btn-see-all {
        padding: 5px 12px;
        font-size: 12px;
    }

    .title-with-line::after {
        bottom: -16px;
        /* মোবাইলেও লাইনটা ঠিক জায়গায় থাকবে */
    }
}



/* =========================================
   PROMOTIONAL BANNERS SECTION DESIGN
   ========================================= */

.promo-banners-section {
    padding: 40px 0;
    /* উপরে ও নিচে ফাঁকা জায়গা */
    background-color: var(--light-bg, #f4f6f8);
    /* ব্যাকগ্রাউন্ড কালার, চাইলে মুছে দিতে পারেন */
}

/* ফ্লেক্সবক্স দিয়ে পাশাপাশি কলাম তৈরি */
.promo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* দুটি ব্যানারের মাঝখানে ফাঁকা জায়গা */
    justify-content: center;
}

/* প্রতিটি কলামের ডিজাইন (ডেস্কটপে ৫০% জায়গা নেবে) */
.promo-col {
    flex: 1 1 calc(50% - 10px);
    border-radius: 5px;
    /* ব্যানারের কোণা হালকা গোল করার জন্য */
    overflow: hidden;
    /* ছবির কোণা গোল রাখার জন্য */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* সুন্দর একটি শ্যাডো */
}

.promo-banner-link {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    /* হোভার অ্যানিমেশনের জন্য */
}

/* মাউস নিলে ছবিটা হালকা জুম হবে (খুব প্রফেশনাল লুক দেয়) */
.promo-col:hover .promo-img {
    transform: scale(1.03);
}

/* =========================================
   RESPONSIVE DESIGN (FOR MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .promo-col {
        /* মোবাইলে ১০০% জায়গা নেবে, একটার নিচে আরেকটা আসবে */
        flex: 1 1 100%;
    }

    .promo-banners-section {
        padding: 25px 0;
        /* মোবাইলে প্যাডিং একটু কম হবে */
    }
}



/* =======================================================
   Customer Dashboard Styles (Updated to match reference)
======================================================= */
.dashboard-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: start;
}

/* Sidebar Styles */
.dashboard-sidebar {
    width: 250px;
    flex-shrink: 0;
}

/* Avatar Section */
.dash-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-left: 10px;
}

.dash-avatar {
    width: 60px;
    height: 60px;
    background-color: #e0e0e0;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.dash-user-info h4 {
    font-size: 18px;
    color: var(--dark-black);
    margin-bottom: 2px;
}

.dash-user-info span {
    font-size: 14px;
    color: #666;
}

/* Sidebar Menu */
.dash-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dash-menu li {
    margin-bottom: 10px;
}

.dash-link {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 10px 0 10px 15px;
    border-left: 2px solid transparent;
    transition: 0.2s ease;
}

.dash-link:hover {
    color: var(--dark-black);
}

/* Active State matches reference image */
.dash-link.active {
    color: var(--dark-black);
    font-weight: 700;
    border-left: 2px solid var(--dark-black);
}

.dash-icon {
    width: 30px;
    font-size: 16px;
}

/* Content Panel Styles */
.dashboard-content {
    flex: 1;
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 5px;
    background: #fff;
}

.dash-title {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-black);
}

.dash-text {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* Empty States */
.dash-empty-state {
    padding: 20px 0;
}

.btn-browse {
    display: inline-block;
    color: var(--dark-black);
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
}

.btn-browse:hover {
    color: var(--primary-red);
}

/* Address Cards */
.address-cards-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.address-card {
    flex: 1;
    min-width: 200px;
}

.address-title {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.address-empty-text {
    color: #666;
    line-height: 1.6;
    font-style: italic;
    font-size: 14px;
}

/* Account Details Form */
.dash-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.dash-form .form-group {
    flex: 1;
    margin-bottom: 15px;
}

.dash-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--dark-black);
    font-weight: 600;
    font-size: 14px;
}

.dash-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 14px;
    outline: none;
}

.dash-form input:focus {
    border-color: var(--dark-black);
}

.password-change-section {
    margin-top: 30px;
}

.password-change-section h4 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.password-change-section input {
    margin-bottom: 15px;
}

.btn-save-changes {
    padding: 14px 25px;
    background: var(--dark-black);
    color: white;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-save-changes:hover {
    background: var(--primary-red);
}

@media (max-width: 768px) {
    .dashboard-layout {
        flex-direction: column;
        gap: 20px;
    }

    .dashboard-sidebar {
        width: 100%;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .dash-link {
        border-left: none;
        border-bottom: 2px solid transparent;
        display: inline-block;
        padding: 10px;
    }

    .dash-link.active {
        border-left: none;
        border-bottom: 2px solid var(--dark-black);
    }

    .dash-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .dash-form .form-row {
        flex-direction: column;
        gap: 0;
    }
}





/* =========================================
   CART PAGE STYLES (Full View)
========================================= */
.cart-page-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Left Side */
.cart-page-left {
    background: transparent;
}

.cart-table-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    font-weight: bold;
    color: var(--dark-black);
    font-size: 16px;
    margin-bottom: 20px;
}

.cp-item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.cp-item-left {
    display: flex;
    gap: 20px;
}

.cp-item-img {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cp-item-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-black);
    margin-bottom: 5px;
    line-height: 1.4;
    max-width: 300px;
}

.cp-item-price {
    font-size: 15px;
    font-weight: bold;
    color: var(--dark-black);
    margin-bottom: 15px;
}

.cp-qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    width: fit-content;
    border-radius: 3px;
    background: #fff;
}

.cp-qty-btn {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    color: #555;
}

.cp-qty-btn:hover {
    background: #f0f0f0;
}

.cp-qty-input {
    width: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: 14px;
    height: 30px;
    pointer-events: none;
    background: #fff;
}

.cp-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.cp-item-total {
    font-size: 16px;
    font-weight: bold;
    color: var(--dark-black);
}

.cp-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
    margin-top: 15px;
}

.cp-item-remove:hover {
    color: var(--primary-red);
}

/* Right Side (Totals) */
.cart-totals-box {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 5px;
}

.cart-totals-box h3 {
    font-size: 16px;
    font-weight: bold;
    color: var(--dark-black);
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    text-transform: uppercase;
}

.coupon-toggle {
    font-size: 14px;
    color: var(--dark-black);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 15px;
}

.coupon-toggle:hover {
    color: var(--primary-red);
}

.totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.delivery-row {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.delivery-text {
    font-size: 13px;
    color: #888;
    text-align: right;
    max-width: 150px;
    line-height: 1.4;
}

.grand-total {
    align-items: center;
}

.grand-total span:first-child {
    font-size: 16px;
    font-weight: bold;
    color: var(--dark-black);
}

.grand-total span:last-child {
    font-size: 22px;
    font-weight: 900;
    color: var(--dark-black);
}

/* Theme matching button */
.btn-proceed-checkout {
    width: 100%;
    background: var(--dark-black);
    color: #fff;
    padding: 16px;
    border: none;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-proceed-checkout:hover {
    background: var(--primary-red);
}

@media (max-width: 991px) {
    .cart-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .cp-item {
        flex-direction: column;
        gap: 15px;
    }

    .cp-item-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }

    .cp-item-remove {
        margin-top: 0;
    }
}



/* =========================================
   CART PAGE COUPON TOGGLE STYLES
========================================= */
.cart-coupon-section {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.coupon-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--dark-black);
    font-weight: 500;
    cursor: pointer;
}

.coupon-toggle:hover {
    color: var(--primary-red);
}

.coupon-toggle i {
    transition: transform 0.3s ease;
}

.coupon-toggle.active i {
    transform: rotate(180deg);
}

.coupon-form-wrapper {
    margin-top: 15px;
}

.coupon-form-wrapper input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
    transition: 0.3s;
}

.coupon-form-wrapper input:focus {
    border-color: var(--dark-black);
}

/* Apply Button States */
#cartCouponApplyBtn {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-apply-disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

.btn-apply-active {
    background-color: var(--dark-black);
    color: #fff;
    cursor: pointer;
}

.btn-apply-active:hover {
    background-color: var(--primary-red);
}



/* ==================================================
   100% FINAL FIX FOR SQUISHED BUTTONS
   ================================================== */
@media (max-width: 768px) {
    .cart-action-flex {
        flex-direction: column !important;
        height: auto !important;
        gap: 15px !important;
    }

    .cart-action-flex .btn-add-cart-lg,
    .cart-action-flex .btn-buy-now {
        flex: none !important;
        /* এই লাইনটাই বাটন চ্যাপ্টা হওয়া বন্ধ করবে */
        min-height: 50px !important;
        /* বাটনের সাইজ পারফেক্ট রাখবে */
        height: 50px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }
}


/* ==================================================
   FIX FOR STRETCHED QUANTITY BOX
   ================================================== */
@media (max-width: 768px) {
    .cart-action-flex .qty-input-group {
        width: fit-content !important;
        /* বক্সটাকে পুরো স্ক্রিনে ছড়াতে দেবে না, যতটুকু দরকার ঠিক ততটুকুই থাকবে */
        margin: 0 auto !important;
        /* একদম পারফেক্ট মাঝখানে বসাবে */
        height: 45px !important;
    }

    .cart-action-flex .qty-input-group button {
        width: 45px !important;
        height: 100% !important;
    }

    .cart-action-flex .qty-input-group input {
        width: 60px !important;
        height: 100% !important;
        padding: 0 !important;
    }
}


/* ==================================================
   HERO SLIDER MOBILE RESPONSIVE FIX
   ================================================== */
@media (max-width: 768px) {

    /* ১. স্লাইডারের হাইট মোবাইলের সাথে মানানসই করা হলো */
    .carousel {
        height: 220px !important;
    }

    /* ২. ভেতরের লেখাগুলোকে পারফেক্ট পজিশনে আনা হলো */
    .carousel-caption {
        left: 8% !important;
        /* বামদিক থেকে গ্যাপ কমানো হলো */
        max-width: 80% !important;
        /* টেক্সট যাতে স্ক্রিনের বাইরে না যায় */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* ৩. টাইটেল এবং প্যারাগ্রাফের সাইজ মোবাইলের জন্য ঠিক করা হলো */
    .carousel-caption h3,
    .carousel-caption h2 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }

    .carousel-caption p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* প্যারাগ্রাফ বেশি বড় হলে ২ লাইনের পর ... দেখাবে */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ৪. Shop Now বাটনটিকে কিউট ও ছোট করা হলো */
    .btn-shop {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }

    /* ৫. স্লাইডারের ডানে-বামের অ্যারো (Arrow) বাটনগুলো ছোট করা হলো */
    .carousel-control {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .carousel-control.prev {
        left: 10px !important;
    }

    .carousel-control.next {
        right: 10px !important;
    }
}

/* ==================================================
   HERO SLIDER IMAGE RESPONSIVE FIX
   ================================================== */
.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* ছবিকে চ্যাপ্টা হতে দেবে না, সুন্দরভাবে ক্রপ করে বক্স ভরে দেবে */
    object-position: center !important;
    /* ছবির মাঝখানের ফোকাস ঠিক রাখবে */
}


/* ==================================================
   SHOP & CATEGORY GRID - MOBILE FIX (100% PERFECT)
   ================================================== */
@media (max-width: 768px) {

    /* ১. শপ ও ক্যাটাগরি পেজে ২ কলামের গ্রিড নিশ্চিত করা হলো */
    .shop-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* ২. প্রোডাক্ট কার্ডগুলোকে গ্রিডের সাথে পারফেক্টলি ফিট করা */
    .shop-product-grid .product-card {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ৩. ছবির বক্সের হাইট ফিক্সড করা হলো (যাতে ছবি কখনো গায়েব না হয় বা চ্যাপ্টা না হয়) */
    .product-card .product-img-wrapper {
        height: 120px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: #fff !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }

    .product-card .product-img-wrapper img {
        max-height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* ৪. ছবির ওপরের বিরক্তিকর কালো হোভার বারটি মোবাইলে লুকানো হলো (যেহেতু নিচে Add to cart বাটন আছেই) */
    .product-card .product-actions {
        display: none !important;
    }

    /* ৫. টাইটেল এবং প্রাইস সেকশন সুন্দর করে সাজানো */
    .product-card .product-title {
        font-size: 13px !important;
        height: 38px !important;
        line-height: 1.4 !important;
        margin-bottom: auto !important;
        /* প্রাইস এবং বাটনকে নিচে ঠেলে দেবে */
    }

    .product-card .product-price {
        font-size: 15px !important;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    /* ৬. Add to Cart বাটন সাইজ ঠিক করা */
    .product-card .add-to-cart-btn {
        padding: 8px !important;
        font-size: 13px !important;
        margin-top: auto !important;
    }
}


/* ==================================================
   FIX FOR EMPTY PRODUCT STATE (NO PRODUCTS FOUND)
   ================================================== */
.shop-product-grid>div:not(.product-card) {
    grid-column: 1 / -1 !important;
    /* এটি গ্রিডকে ভেঙে পুরো উইডথ নিতে সাহায্য করবে */
    width: 100% !important;
}



/* ==================================================
   100% FINAL FIX FOR CHECKOUT PAGE HORIZONTAL SCROLL
   ================================================== */

/* ১. পুরো ওয়েবসাইটকে মোবাইলের স্ক্রিনের সাথে লক করে দেওয়া */
html,
body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ২. শুধুমাত্র মোবাইলের জন্য চেকআউট পেজের বক্সগুলোর ডিজাইন ফিক্স */
@media (max-width: 576px) {

    /* প্যাডিং কমানো হলো যাতে কন্টেন্ট স্ক্রিনের বাইরে না যায় */
    .checkout-box,
    .order-summary-box {
        padding: 20px 15px !important;
    }

    /* লম্বা লেখাগুলোকে (যেমন ডেলিভারি মেথড) ধাক্কা দিয়ে সুন্দরভাবে নিচে নামানোর লজিক */
    .radio-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* দামটাকে রেডিও বাটনের ঠিক সোজা নিচে বসানোর জন্য */
    .radio-label .price {
        margin-left: 28px !important;
    }

    /* 'Contact information' এবং 'Log in' যেন পাশাপাশি গুঁতোগুঁতি না করে */
    .box-header-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}


/* ==================================================
   100% FINAL FIX FOR CHECKOUT PAGE CONTENT OVERFLOW (CLIPPING)
   ================================================== */
@media (max-width: 576px) {

    /* ১. লেআউট এবং বক্সের গ্যাপ/প্যাডিং কমানো হলো যাতে কন্টেন্ট চাপাচাপি না করে */
    .checkout-layout {
        gap: 20px !important;
    }

    .checkout-box,
    .order-summary-box {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        /* কোনো কিছুকেই বক্সের বাইরে যেতে দেবে না */
    }

    /* ২. ফ্লেক্সবক্সের ম্যাজিক: লম্বা টেক্সটকে বক্সের বাইরে যেতে না দিয়ে ব্রেক করার জন্য min-width: 0 */
    .s-item-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* ৩. প্রোডাক্টের নাম বড় হলে ভেঙে নিচে নামানোর কমান্ড */
    .s-item-title {
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        font-size: 12px !important;
        /* মোবাইলে নাম একটু ছোট হলে সুন্দর ফিট হবে */
        line-height: 1.4 !important;
    }

    /* ৪. প্রাইস এবং টোটাল অ্যামাউন্টের সাইজ মোবাইলের সাথে মানানসই করা হলো */
    .s-item-price {
        font-size: 13px !important;
    }

    .summary-totals .tot-row {
        font-size: 13px !important;
    }

    .final-price {
        font-size: 18px !important;
        /* টোটাল প্রাইস একটু ছোট করা হলো যাতে ডানদিকে ধাক্কা না দেয় */
    }

    /* ৫. কুপন বক্সের ইনপুট ও বাটন মোবাইলের ছোট স্ক্রিনে পাশাপাশি না রেখে নিচে নিচে দেওয়া হলো */
    .coupon-flex {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-apply-coupon {
        width: 100% !important;
        padding: 12px 0 !important;
    }
}