/* Project: T-Shirt E-commerce Branding
    Theme: Modern, Minimalist, Premium Earth Tones
    Author: Build With Himu
*/

/* --- 1. Global Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    background-color: #FDFBF9 !important; /* Soft Beige Background */
    color: #2D2926 !important; /* Premium Soft Black Text */
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.6;
}

/* --- 2. Header & Navigation --- */
header, 
.main-header, 
.menu-area, 
#navbar_top {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #F1EDE9 !important;
    box-shadow: none !important; /* Removing heavy shadows for a clean look */
}

/* Menu Item Links */
.heder__category li a, 
.catagory_menu ul li a, 
.main-menu ul li a {
    color: #2D2926 !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.heder__category li a:hover, 
.main-menu ul li a:hover {
    color: #BC8F8F !important; /* Terracotta hover effect */
}

/* --- 3. Buttons (Call to Action) --- */
/* Targetting Add to Cart, Checkout, and Store buttons */
.addcartbutton, 
.go_cart, 
.cart_store, 
.main-search button, 
.checkout_btn {
    background-color: #BC8F8F !important; /* Earthy Rose/Terracotta from Image 1 */
    border: 1px solid #BC8F8F !important;
    color: #FFFFFF !important;
    border-radius: 2px !important; /* Modern sharp edges */
    font-weight: 500 !important;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

.addcartbutton:hover, 
.go_cart:hover, 
.main-search button:hover {
    background-color: #A37E7E !important; /* Slightly darker shade on hover */
    border-color: #A37E7E !important;
    transform: translateY(-1px); /* Subtle lift effect */
}

/* --- 4. Search Bar --- */
.main-search input {
    border: 1px solid #E5E1DD !important;
    background-color: #FAFAFA !important;
    border-radius: 2px 0 0 2px !important;
    padding-left: 15px;
}

.main-search input:focus {
    border-color: #BC8F8F !important;
    outline: none;
}

/* --- 5. Product Cards --- */
.product_item {
    background: #FFFFFF !important;
    border: 1px solid #F1EDE9 !important;
    transition: 0.3s;
}

.product_item:hover {
    border-color: #BC8F8F !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02) !important;
}

.product_name a {
    color: #2D2926 !important;
    font-size: 16px;
    font-weight: 500;
}

/* --- 6. Footer Section --- */
footer {
    background-color: #2D2926 !important; /* Deep Charcoal for contrast */
    color: #FFFFFF !important;
    padding-top: 50px;
}

.footer-about p, 
.footer-menu ul li a {
    color: #CBCBCB !important; /* Muted grey for footer text */
    font-size: 14px;
    transition: 0.3s;
}

.footer-menu ul li a:hover {
    color: #BC8F8F !important;
}

.footer-hotlint {
    color: #FFFFFF !important;
    font-size: 20px;
    font-weight: 700;
}

.copyright {
    border-top: 1px solid #3E3935 !important;
    padding: 20px 0;
    font-size: 13px;
}

/* --- 7. Floating WhatsApp Button --- */
.float {
    background-color: #25D366 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}
/* সার্চ আইকনটি সেন্টারে আনার জন্য */
.main-search form button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* অতিরিক্ত প্যাডিং থাকলে তা সরিয়ে ফেলবে */
}

/* আইকনের সাইজ ঠিক করতে চাইলে এটিও ব্যবহার করতে পারেন */
.main-search form button svg, 
.main-search form button i {
    height: 18px !important; /* আইকনটি খুব বড় মনে হলে এখান থেকে ছোট-বড় করতে পারেন */
    width: auto !important;
    margin: 0 !important;
}


.main-search form {
    border-radius: 5px !important; /* পুরো সার্চ বক্সটি হালকা রাউন্ড হবে */
}

.main-search form button {
    border-radius: 0 5px 5px 0 !important; /* শুধুমাত্র বাটনের ডান পাশ রাউন্ড হবে */
}







/* --- 1. Main Menu Bar & All Category Button Background --- */
.menu-area, 
li.all__category__list {
    background-color: #19765b !important;
    border: none !important;
}

/* --- 2. Menu Text & Icon Color (White/Soft White) --- */
.all__category__list a, 
.catagory_menu ul li a, 
.all__category__list i,
li.all__category__list span {
    color: #fbf9fc !important;
}

/* --- 3. Submenu & Dropdown Backgrounds --- */
/* This covers all levels of the category dropdown */
.side__bar, 
.side__barsub, 
.side__barchild, 
ul.Cat_menu, 
.sidebar-menu,
.sidebar-submenu,
.sidebar-childmenu {
    background-color: #19765b !important;
    border: 1px solid #125c46 !important; /* Slightly darker green border for definition */
}

/* --- 4. Dropdown Text & Link Color --- */
.side__bar ul li a, 
.side__barsub ul li a, 
.side__barchild ul li a, 
ul.Cat_menu li a, 
ul.Cat_menu li a span,
.sidebar-menu li a {
    color: #fbf9fc !important;
}

/* --- 5. Hover Effects (For Modern Feel) --- */
/* When you hover over a category, it will get a slightly darker green background */
.side__bar ul li:hover, 
.side__bar ul li:hover > a, 
.sidebar-menu ul li:hover > a,
ul.Cat_menu li:hover {
    background-color: #125c46 !important; /* Darker shade of green */
    color: #ffffff !important;
}

/* --- 6. Arrow/Chevron Icon Color Adjustment --- */
.side-category li i, 
.sidebar-menu li a i, 
.fa-chevron-right {
    color: #fbf9fc !important;
}