@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//opticobd.com/wp-content/themes/woodmart/fonts/woodmart-font-1-300.woff2?v=8.4.1") format("woff2");
}

:root {
	--wd-hb-opt-h: 70px;
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #333333;
	--wd-text-font-size: 14px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(10,76,106);
	--wd-entities-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: rgb(10,76,106);
	--wd-entities-title-color-hover: rgba(10, 76, 106, 0.67);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(229,184,128);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(10,76,106);
	--wd-alternative-color: #E5B880;
	--btn-default-bgcolor: rgb(255,255,255);
	--btn-default-bgcolor-hover: rgba(30,115,190,0.65);
	--btn-default-color: rgb(0,0,0);
	--btn-default-color-hover: rgb(255,255,255);
	--btn-accented-bgcolor: rgb(0,58,109);
	--btn-accented-bgcolor-hover: rgba(30,115,190,0.65);
	--btn-accented-color: rgb(255,255,255);
	--btn-accented-color-hover: rgb(255,255,255);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(255,255,255);
	background-image: url();
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.page :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,250,252);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 10px;
}

@media (max-width: 1024px) {
	:root {
		--wd-hb-opt-h: 130px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 5px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgba(0,41,89,0.78);
}

@font-face {
	font-family: "hkgroteskpro";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "hkgroteskpro";
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "hkgroteskpro";
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "hkgroteskpro";
	font-weight: 500;
	font-style: normal;
}

/* Hide preloader on pages that are NOT the homepage AND NOT the checkout page */
body:not(.home):not(.woocommerce-checkout) .wd-preloader {
    display: none !important;
}

/* FORCE Round Shape on Social Buttons */
body .woodmart-social-login .social-login-btn,
body .woodmart-social-login a {
    border-radius: 50px !important;
    overflow: hidden !important; /* This cuts off the square corners of the background */
    border: none !important; /* Removes any default square borders */
}

/* Ensure the main Login Button is also rounded */
body .woodmart-login-form button.button[name="login"] {
    border-radius: 50px !important;
}


.wd-toolbar-link .wd-custom-icon img {
    width: auto;
    height: 50px;
}

.widgettitle, .widget-title {
	color: rgb(0 41 89);
}




/* ১. উপরের "Have a coupon?" টগল পুরোপুরি হাইড */
.woocommerce-form-coupon-toggle, 
.woocommerce-checkout > .woocommerce-info {
    display: none !important;
}

/* ২. কুপন বক্স ডিজাইন (টেবিলের ভেতরে ফিট করার জন্য) */
.custom-coupon-row .woocommerce-form-coupon {
    display: flex !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 8px;
}

/* ৩. ইনপুট বক্স ছোট এবং স্লিম করা */
.custom-coupon-row input#coupon_code {
    height: 38px !important; /* উচ্চতা কমানো হয়েছে */
    font-size: 13px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    flex-grow: 1;
    padding: 0 10px !important;
}

/* ৪. এপ্লাই বাটন ছোট এবং স্লিম করা */
.custom-coupon-row button[name="apply_coupon"] {
    height: 38px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    background-color: #1e73be !important; /* OpticoBD Brand Color */
    border-radius: 4px !important;
    font-weight: 600 !important;
    width: auto !important;
    margin: 0 !important;
}

/* ৫. সাকসেস/এরর মেসেজ ডিজাইন (ইনপুটের উপরে যেন সুন্দর দেখায়) */
.woocommerce-error, .woocommerce-message {
    font-size: 13px !important;
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
    border-radius: 5px !important;
}

/* মোবাইল রেস্পন্সিভ */
@media (max-width: 480px) {
    .custom-coupon-row .woocommerce-form-coupon {
        flex-direction: row; /* মোবাইলেও পাশাপাশি থাকবে কারণ এটি ছোট */
    }
}



/* Custom CSS to fix the width of the District/City select2 box */
.woocommerce-checkout #billing_city_field.form-row-wide {
    /* Ensures the container is full width */
    width: 100% !important;
}

/* Fix the Select2 input width inside its container */
.woocommerce-checkout #billing_city_field.form-row-wide .select2-container {
    /* This makes the actual dropdown component fill the container */
    width: 100% !important;
    max-width: none !important; /* Prevents max-width restrictions from WoodMart/WooCommerce */
}

/* Target the input box itself for better mobile compatibility if needed */
.woocommerce-checkout #billing_city_field.form-row-wide .select2-selection__rendered {
    box-sizing: border-box !important;
}



/*hide stock status form frontend */
.wd-price-unit {
display:none;
	}




/* Removes top and bottom gaps only on the Homepage */
.home .my-account .main-page-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.home .wd-content-layout {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.home .entry-content {
    margin-top: -20px !important;
}
.woocommerce-account body, .woocommerce-account .site-wrapper, .woocommerce-account #page, .woocommerce-account main {
    padding: 0 !important;
}

/* ==============================================
  Payment Button alignment correction
/* ==============================================

/* Deposit Box Optimization */
.awcdp-deposits-option {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 20px 0 !important;
    display: block !important;
}

.awcdp-deposits-option ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.awcdp-deposits-option li {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 15px !important;
    border: 1px solid #e5e5e5 !important;
    margin-bottom: -1px !important; /* বর্ডার ডুপ্লিকেট রোধ করতে */
}

/* মোবাইল ডিভাইসের জন্য স্পেশাল এডজাস্টমেন্ট */
@media only screen and (max-width: 768px) {
    .awcdp-deposits-option {
        padding: 0 !important;
    }
    .awcdp-deposits-option label {
        font-size: 14px !important; /* মোবাইল স্ক্রিনে লেখা পড়ার সুবিধার জন্য */
    }
}

/* ==============================================
   WOODMART WHITE GLASSMORPHISM SIDEBAR
/* ==============================================
   UPDATED: LIGHTER GLASSMORPHISM
   ============================================== */

/* 1. Sidebar Background: More Transparent & Less Blur */
.wd-side-hidden {
    /* আগে ছিল 0.85, এখন 0.70 করা হয়েছে যাতে পেছনের কন্টেন্ট হালকা দেখা যায় */
    background-color: rgba(255, 255, 255, 0.65) !important; 
    
    /* আগে ছিল 20px, এখন 10px করা হয়েছে যাতে কাঁচটি বেশি ঘোলা না লাগে */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.08) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.4); 
}

/* 2. Background Overlay: Very Subtle Blur */
.wd-popup-overlay, 
.wd-close-side {
    /* পেছনের সাইটটি যাতে একদম সাদা না হয়ে যায়, হালকা ডার্ক টোন রাখা হয়েছে */
    background-color: rgba(0, 0, 0, 0.05) !important; 
    
    /* পেছনের মেইন ওয়েবসাইট এখন খুব সামান্য (3px) ঝাপসা হবে */
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px);
}

/* 3. Layout & Width Optimization */

/* DESKTOP: Make sidebar wider (550px) */
@media (min-width: 1025px) {
    .wd-side-hidden {
        width: 550px !important;
        max-width: 100vw;
    }
    
    /* Adjust internal Cart widget layout for wider space */
    .cart-widget-side .widget_shopping_cart .mini_cart_item {
        padding-right: 20px;
    }
}

/* MOBILE: Ensure perfect fit without overflow */
@media (max-width: 768px) {
    .wd-side-hidden {
        width: 320px !important; /* Standard safe width for mobile */
        max-width: 90vw !important; /* Prevent edge overflow */
    }
}

/* 4. Color Contrast: Text Readability
   Force text to black since background is now white */
.wd-side-hidden .product-title,
.wd-side-hidden .woocommerce-Price-amount,
.wd-side-hidden .widget-title,
.wd-side-hidden .total strong, 
.wd-side-hidden .subtotal-area,
.wd-side-hidden .wd-tools-text,
.mobile-nav .wd-nav-mobile li a {
    color: #000000 !important;
}

/* Fix for label variations (e.g., Color/Size text) */
.wd-side-hidden dl.variation dt,
.wd-side-hidden dl.variation dd {
    color: #333333 !important;
}

/* 5. Button Safety & Contrast */

/* Checkout Button: Ensure text is WHITE and readable */
.cart-widget-side .checkout {
    color: #ffffff !important;
    /* Keeps theme default background color, just ensures text is white */
}

/* View Cart Button: Keep exactly as is (Theme Default) */
.cart-widget-side .btn-style-default {
    /* No overrides applied here to preserve your current style */
}

/* Close "X" Button: Make it dark to be visible on white */
.wd-side-hidden .close-side-widget {
    color: #000000 !important;
}
.wd-side-hidden .close-side-widget:after,
.wd-side-hidden .close-side-widget:before {
    background-color: #000000 !important;
}

/* 6. Premium Scrollbar (Optional but recommended for Glass look) */
.wd-side-scroll::-webkit-scrollbar {
    width: 6px;
}
.wd-side-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.wd-side-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

body.woodmart-preloader-active {
    overflow: auto !important;
}
/* ==============================================
   WOODMART MOBILE HEADER & FOOTER GLASSMORPHISM
   ============================================== */

/* 1. Mobile Sticky Header (Glass Effect) */
/* শুধুমাত্র যখন স্ক্রল করবেন (Sticky) তখন কাজ করবে, যাতে কন্টেন্টের ওপর ভাসে */
body .whb-sticked .whb-general-header {
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Header Text & Icons Color Fix (Ensure readability) */
body .whb-sticked .whb-general-header a,
body .whb-sticked .wd-tools-icon:before,
body .whb-sticked .wd-header-search-form .search-input {
    color: #000000 !important;
}
/* Hamburger Menu Icon Color */
body .whb-sticked .wd-burger-icon .wd-burger-icon-inner, 
body .whb-sticked .wd-burger-icon .wd-burger-icon-inner:after, 
body .whb-sticked .wd-burger-icon .wd-burger-icon-inner:before {
    background-color: #000000 !important;
}


/* 2. Mobile Bottom Footer / Toolbar (Glass Effect) */
.wd-toolbar {
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Toolbar Icons & Labels Color Fix */
.wd-toolbar .wd-toolbar-item > a {
    color: #555555 !important; /* Default Icon Color */
}
.wd-toolbar .wd-toolbar-item.wd-active > a,
.wd-toolbar .wd-toolbar-item > a:hover {
    color: #000000 !important; /* Active/Hover Color */
}
.wd-toolbar .wd-toolbar-label {
    font-weight: 600;
    color: #333333 !important;
}

/* Optional: Count Badge Style (Cart count number) */
.wd-toolbar .wd-tools-count,
.whb-sticked .wd-tools-count {
    background-color: #000000 !important; /* Black background */
    color: #ffffff !important; /* White text */
}
/* AJAX Search Results Dropdown */
.wd-dropdown-results {
    background-color: rgba(255, 255, 255, 0.85) !important; /* একটু বেশি সাদা রাখা ভালো পড়ার সুবিধার জন্য */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}



.woocommerce-product-gallery { overflow: visible !important; }


/* ১. আমাদের কাস্টম ক্রস বাটনটি ডিফল্টভাবে সব জায়গায় হাইড থাকবে */
.optico-remove-item {
    display: none !important;
}

/* ২. শুধুমাত্র চেকআউট পেজের রিভিউ টেবিলের ভেতর এটি শো করবে */
.woocommerce-checkout-review-order-table .optico-remove-item {
    display: inline-block !important;
    color: #777 !important; /* থিমের সাথে সামঞ্জস্যপূর্ণ গ্রে কালার */
    font-size: 22px !important;
    margin-left: 10px;
    text-decoration: none !important;
    line-height: 1;
    vertical-align: middle;
}
.optico-remove-item:hover {
    color: #000 !important;
}

/* ৩. সাইড কার্টের অরিজিনাল (থিমের) ক্রস বাটনটি বড় এবং ক্লিকেবল করা */
.wd-side-hidden .cart_list li a.remove {
    font-size: 24px !important; /* ক্রসের সাইজ বড় করা */
    width: 32px !important;     /* ক্লিক করার এরিয়া বড় করা */
    height: 32px !important;
    color: #333 !important;     /* থিমের ডিফল্ট কালার */
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
}

/* ৪. সাইড কার্টের ক্রসের পেছনের ছোট ডট বা ব্যাকগ্রাউন্ড সল্ভ করা */
.wd-side-hidden .cart_list li a.remove::after {
    display: none !important; /* যদি কোনো বাড়তি শ্যাডো বা ডট থাকে */
}

a.scrollToTop.button-show {
    display: none;
}



.prad-swatch-item-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Fix Elementor animations not triggering and leaving elements invisible */
.elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
}
@media (max-width: 576px) {
	/* Force HUSKY Filter to display on Mobile */
.woof {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Hide the duplicate "Filter" button HUSKY tries to create */
.woof_mobile_btn_container, .woof_show_mobile_filter_btn {
    display: none !important;
}

/* Fix Custom Mobile Navbar Icon Shrinking */
.wd-toolbar-link .wd-custom-icon img {
    width: 35px !important;       /* Set your desired size */
    height: 35px !important;      /* Keep height same as width */
    min-width: 35px !important;   /* CRITICAL: Forces it to never shrink below 24px */
    object-fit: contain !important; /* Keeps the shape/aspect ratio perfect */
}

/* Optional: Adjust the button container so it doesn't clip */
.wd-toolbar-item {
    flex-shrink: 1; /* Allow the container to shrink, but not the icon inside */
}


/*
 * Adjust Facebook Chat bubble position on mobile devices 
 * to avoid overlapping with Woodmart's sticky mobile footer.
 */
@media (max-width: 1024px) {
    /* Selects the main container of the chat plugin */
    div.fb-customerchat {
        /* 
         * The default 'bottom' value is around 24px.
         * Woodmart's mobile footer is usually 50-60px high.
         * We are setting it to 85px to place it safely above the footer with some spacing.
         * You can adjust this value (e.g., 80px or 90px) if needed.
        */
        bottom: 85px !important;
    }
}

}