@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//sasaninezhad.ir/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.3") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//sasaninezhad.ir/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: iranyekan;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: vazir;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: IRansansX;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: IRansansX;
	--wd-widget-title-font: iranyekan;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: IRansansX;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-primary-color: rgb(15,61,46);
	--wd-alternative-color: rgb(200,164,77);
	--btn-default-font-family: iranyekan;
	--btn-default-font-weight: 200;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(15,61,46);
	--btn-accented-bgcolor-hover: rgb(30,90,70);
	--wd-form-brd-width: 2px;
	--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-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left 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;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}

}
:root{
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 8px;
}



.wd-page-title {
background-color: #0a0a0a;
}

/* ==========================================================================
   SASANI NEZHAD  --  SIDE CART STYLING   [ FINAL -- COMPLETE ]
   --------------------------------------------------------------------------
   WHERE TO PASTE :
       Dashboard  ->  Theme Settings  ->  Custom CSS  ->  Global Custom CSS
       This single file replaces every earlier version. Nothing else needed.

   WHAT IT DOES :
       Restyles the off-canvas ( side ) shopping cart to match the brand,
       and repairs the layout that Elementor was breaking.

   THE STRUCTURE IT TARGETS ( confirmed from the live site ) :
       <div class="cart-widget-side wd-side-hidden wd-left wd-opened">   <- WoodMart shell
         <div class="wd-heading"> ... </div>
         <div class="widget woocommerce widget_shopping_cart">
           <div class="widget_shopping_cart_content">
             <div class="elementor-menu-cart__products">                 <- Elementor content
             <div class="elementor-menu-cart__subtotal">
             <div class="elementor-menu-cart__footer-buttons">
               <a class="elementor-button elementor-button--view-cart">
               <a class="elementor-button elementor-button--checkout">

       WoodMart supplies the panel; Elementor supplies everything inside it.
       That is why the buttons were grey -- Elementor paints .elementor-button
       with its own #69727d by default.

   LAYOUT : RTL. Thumbnail on the right, product name to its left,
            price on a second line aligned under the name.

   NOTE   : If the styling ever disappears again, it is NOT this file --
            it is LiteSpeed Cache's UCSS stripping it out. Turn off
            "Generate UCSS" and "Load CSS Asynchronously".
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) BRAND PALETTE
   Change a value here once and it updates everywhere below.
   -------------------------------------------------------------------------- */
:root {
    --sn-green-dark : #0F3D2E;  /* Main background      */
    --sn-green-deep : #091E17;  /* Deepest tone         */
    --sn-gold       : #C8A44D;  /* Borders & highlights */
    --sn-cream      : #F5F1E8;  /* Typography           */
    --sn-thumb      : 78px;     /* Thumbnail size       */
    --sn-gap        : 12px;     /* Image-to-text gap    */
}


/* --------------------------------------------------------------------------
   2) THE PANEL  --  shell, heading, padding
   -------------------------------------------------------------------------- */
html body .cart-widget-side {
    background-color : var(--sn-green-dark) !important;
    color            : var(--sn-cream) !important;
    overflow-x       : hidden !important;
}

html body .cart-widget-side .wd-heading {
    background-color : var(--sn-green-deep) !important;
    border-bottom    : 1px solid var(--sn-gold) !important;
    padding          : 16px 18px !important;
}

html body .cart-widget-side .wd-heading .title {
    color       : var(--sn-gold) !important;
    font-family : inherit !important;
    font-weight : 700 !important;
    font-size   : 16px !important;
}

/* The close ( X ) control at the top. */
html body .cart-widget-side .wd-heading a,
html body .cart-widget-side .wd-heading .close-side-widget {
    color   : var(--sn-cream) !important;
    opacity : 1 !important;
}

html body .cart-widget-side .widget_shopping_cart_content {
    box-sizing : border-box !important;
    max-width  : 100% !important;
    padding    : 0 18px 18px 18px !important;
}


/* --------------------------------------------------------------------------
   3) PRODUCT ROWS
   Each row is a flex line so the image can never stretch full width again.
   -------------------------------------------------------------------------- */
html body .elementor-menu-cart__products .cart_item,
html body .elementor-menu-cart__products .woocommerce-cart-form__cart-item,
html body .elementor-menu-cart__products .elementor-menu-cart__product {
    display        : flex !important;
    flex-direction : row !important;
    flex-wrap      : wrap !important;
    align-items    : flex-start !important;
    column-gap     : var(--sn-gap) !important;
    row-gap        : 0 !important;
    width          : 100% !important;
    max-width      : 100% !important;
    box-sizing     : border-box !important;
    margin         : 0 !important;
    padding        : 14px 0 14px 32px !important;   /* Left room for the x. */
    border-bottom  : 1px solid rgba(200, 164, 77, 0.25) !important;
    border-top     : none !important;
    text-align     : right !important;
    direction      : rtl !important;
    position       : relative !important;
}

/* 3a) Image cell -- fixed width, first in source = rightmost in RTL. */
html body .elementor-menu-cart__product-image,
html body .elementor-menu-cart__products .product-thumbnail {
    flex      : 0 0 var(--sn-thumb) !important;
    width     : var(--sn-thumb) !important;
    max-width : var(--sn-thumb) !important;
    margin    : 0 !important;
    padding   : 0 !important;
    order     : 1 !important;
}

/* The image itself -- five locks so nothing can resize it. */
html body .elementor-menu-cart__products img,
html body .widget_shopping_cart_content img {
    width         : var(--sn-thumb) !important;
    height        : var(--sn-thumb) !important;
    min-width     : var(--sn-thumb) !important;
    max-width     : var(--sn-thumb) !important;
    object-fit    : cover !important;
    border-radius : 8px !important;
    border        : 1px solid var(--sn-gold) !important;
    display       : block !important;
    float         : none !important;
    margin        : 0 !important;
    padding       : 0 !important;
}

/* 3b) Product name -- fills the space left of the image. */
html body .elementor-menu-cart__product-name,
html body .elementor-menu-cart__products .product-name {
    flex          : 1 1 0 !important;
    min-width     : 0 !important;
    order         : 2 !important;
    margin        : 0 !important;
    padding       : 0 !important;
    color         : var(--sn-cream) !important;
    font-family   : inherit !important;
    font-size     : 13px !important;
    font-weight   : 700 !important;
    line-height   : 1.7 !important;
    text-align    : right !important;
    overflow-wrap : break-word !important;
}

html body .elementor-menu-cart__product-name a,
html body .elementor-menu-cart__products .product-name a {
    color           : var(--sn-cream) !important;
    font-family     : inherit !important;
    font-weight     : 700 !important;
    text-decoration : none !important;
}

/* 3c) Price / quantity -- own line, aligned under the name. */
html body .elementor-menu-cart__product-price,
html body .elementor-menu-cart__products .product-price,
html body .elementor-menu-cart__products .quantity {
    flex          : 1 0 100% !important;
    order         : 3 !important;
    box-sizing    : border-box !important;
    width         : 100% !important;
    padding-right : calc(var(--sn-thumb) + var(--sn-gap)) !important;
    margin        : 4px 0 0 0 !important;
    color         : var(--sn-gold) !important;
    font-family   : inherit !important;
    font-size     : 12px !important;
    font-weight   : 700 !important;
    text-align    : right !important;
    direction     : rtl !important;
}


/* --------------------------------------------------------------------------
   4) REMOVE ( x ) BUTTON
   Elementor wraps it in TWO layers:
       <div class="elementor-menu-cart__product-remove"> <a class="remove">
   The outer div is only a positioner; the inner link is the visible circle.
   Styling both would produce two stacked circles -- hence the split below.
   -------------------------------------------------------------------------- */

/* 4a) Outer layer -- invisible positioner. */
html body .elementor-menu-cart__product-remove,
html body .elementor-menu-cart__products .product-remove {
    position         : absolute !important;
    left             : 0 !important;
    right            : auto !important;
    top              : 16px !important;
    width            : 26px !important;
    height           : 26px !important;
    background       : none !important;
    background-color : transparent !important;
    border           : none !important;
    border-radius    : 0 !important;
    box-shadow       : none !important;
    margin           : 0 !important;
    padding          : 0 !important;
    z-index          : 6 !important;
}

/* 4b) Inner link -- the actual button. */
html body .elementor-menu-cart__products a.remove,
html body .elementor-menu-cart__products a.remove_from_cart_button,
html body .elementor-menu-cart__product-remove a {
    position         : static !important;
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    width            : 26px !important;
    height           : 26px !important;
    box-sizing       : border-box !important;
    margin           : 0 !important;
    padding          : 0 !important;
    border           : 1px solid rgba(200, 164, 77, 0.55) !important;
    border-radius    : 50% !important;
    background-color : rgba(200, 164, 77, 0.15) !important;
    text-decoration  : none !important;
    /* Hide whatever glyph Elementor placed inside -- we draw our own. */
    color            : transparent !important;
    font-size        : 0 !important;
    line-height      : 0 !important;
    transition       : all 0.2s ease !important;
}

/* Some Elementor builds inject an icon element instead of a text x. */
html body .elementor-menu-cart__products a.remove svg,
html body .elementor-menu-cart__products a.remove i,
html body .elementor-menu-cart__product-remove a svg,
html body .elementor-menu-cart__product-remove a i {
    display : none !important;
}

/* 4c) The x is drawn by CSS, so it can never go missing. */
html body .elementor-menu-cart__products a.remove::before,
html body .elementor-menu-cart__product-remove a::before {
    content     : "\2715" !important;
    display     : block !important;
    color       : var(--sn-gold) !important;
    font-family : Arial, sans-serif !important;
    font-size   : 13px !important;
    font-weight : 700 !important;
    line-height : 1 !important;
}

html body .elementor-menu-cart__products a.remove::after {
    content : none !important;
}

/* 4d) Hover turns red -- makes its purpose unmistakable. */
html body .elementor-menu-cart__products a.remove:hover,
html body .elementor-menu-cart__product-remove a:hover {
    background-color : #C0392B !important;
    border-color     : #C0392B !important;
    transform        : scale(1.1) !important;
}

html body .elementor-menu-cart__products a.remove:hover::before,
html body .elementor-menu-cart__product-remove a:hover::before {
    color : #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   5) SUBTOTAL LINE
   -------------------------------------------------------------------------- */
html body .elementor-menu-cart__subtotal {
    display         : flex !important;
    flex-direction  : row !important;
    align-items     : center !important;
    justify-content : space-between !important;
    width           : 100% !important;
    max-width       : 100% !important;
    box-sizing      : border-box !important;
    border          : none !important;
    border-bottom   : 1px solid rgba(200, 164, 77, 0.3) !important;
    margin          : 0 0 16px 0 !important;
    padding         : 14px 0 !important;
    color           : var(--sn-cream) !important;
    font-family     : inherit !important;
    font-size       : 14px !important;
    font-weight     : 700 !important;
    text-align      : right !important;
    direction       : rtl !important;
}

html body .elementor-menu-cart__subtotal .woocommerce-Price-amount,
html body .elementor-menu-cart__subtotal bdi,
html body .elementor-menu-cart__subtotal strong {
    color       : var(--sn-gold) !important;
    font-family : inherit !important;
    font-size   : 16px !important;
    font-weight : 700 !important;
}


/* --------------------------------------------------------------------------
   6) ACTION BUTTONS
   Elementor's default grey ( #69727d ) is overridden here, and the two
   buttons are forced into one row with equal widths.
   -------------------------------------------------------------------------- */

/* 6a) The row. */
html body .elementor-menu-cart__footer-buttons {
    display        : flex !important;
    flex-direction : row !important;
    flex-wrap      : nowrap !important;
    align-items    : stretch !important;
    gap            : 10px !important;
    width          : 100% !important;
    max-width      : 100% !important;
    box-sizing     : border-box !important;
    margin         : 0 !important;
    padding        : 0 !important;
}

/* 6b) Shared shape for both buttons. */
html body .elementor-menu-cart__footer-buttons a.elementor-button,
html body .elementor-menu-cart__footer-buttons a.elementor-button.elementor-size-md {
    flex            : 1 1 0 !important;
    width           : 50% !important;
    min-width       : 0 !important;
    box-sizing      : border-box !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    margin          : 0 !important;
    padding         : 13px 6px !important;
    border-radius   : 8px !important;
    font-family     : inherit !important;
    font-size       : 13px !important;
    font-weight     : 700 !important;
    line-height     : 1.4 !important;
    text-align      : center !important;
    text-decoration : none !important;
    white-space     : nowrap !important;
    box-shadow      : none !important;
    text-shadow     : none !important;
    transition      : all 0.25s ease !important;
}

/* The label sits in a span -- it must inherit the button's color. */
html body .elementor-menu-cart__footer-buttons .elementor-button-text {
    color       : inherit !important;
    font-family : inherit !important;
    font-size   : inherit !important;
    font-weight : inherit !important;
}

/* 6c) "View cart" -- outlined gold ( secondary action ). */
html body .elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
html body .elementor-menu-cart__footer-buttons a[href*="/cart"] {
    background       : transparent !important;
    background-color : transparent !important;
    background-image : none !important;
    border           : 2px solid var(--sn-gold) !important;
    color            : var(--sn-gold) !important;
}

html body .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover,
html body .elementor-menu-cart__footer-buttons a[href*="/cart"]:hover {
    background-color : var(--sn-gold) !important;
    color            : var(--sn-green-deep) !important;
}

/* 6d) "Checkout" -- solid gold ( primary action ).
   Placed after the view-cart rule on purpose, so it wins when both match. */
html body .elementor-menu-cart__footer-buttons a.elementor-button--checkout,
html body .elementor-menu-cart__footer-buttons a[href*="checkout"] {
    background       : var(--sn-gold) !important;
    background-color : var(--sn-gold) !important;
    background-image : none !important;
    border           : 2px solid var(--sn-gold) !important;
    color            : var(--sn-green-deep) !important;
}

html body .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover,
html body .elementor-menu-cart__footer-buttons a[href*="checkout"]:hover {
    background-color : var(--sn-cream) !important;
    border-color     : var(--sn-cream) !important;
    color            : var(--sn-green-deep) !important;
}


/* --------------------------------------------------------------------------
   7) EMPTY CART MESSAGE
   -------------------------------------------------------------------------- */
html body .elementor-menu-cart__empty-message,
html body .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
    color       : var(--sn-cream) !important;
    font-family : inherit !important;
    font-size   : 14px !important;
    font-weight : 700 !important;
    text-align  : center !important;
    padding     : 40px 10px !important;
}


/* --------------------------------------------------------------------------
   8) Z-INDEX  --  keeps the cart above the Elementor header.
   Elementor's own off-canvas uses 2147483630, so we sit just above it.
   -------------------------------------------------------------------------- */
html body .wd-side-hidden,
html body .cart-widget-side {
    z-index : 2147483640 !important;
}

html body .wd-close-side {
    z-index : 2147483635 !important;
}

html body .elementor-location-header,
html body header.elementor-element,
html body .elementor-sticky--effects,
html body .elementor-sticky--active {
    z-index : 100 !important;
}


/* --------------------------------------------------------------------------
   9) MOBILE  --  smaller thumbnails so titles keep enough room.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    :root {
        --sn-thumb : 62px;
    }

    html body .elementor-menu-cart__footer-buttons a.elementor-button {
        padding   : 11px 4px !important;
        font-size : 12px !important;
    }
}

/* ========================= END OF SIDE CART CSS =========================== */

/* --- DUPLICATE REMOVE BUTTON FIX --- */
/* Elementor outputs more than one remove link inside the same wrapper. */
/* Keep the first one, hide every sibling link that follows it.        */
html body .elementor-menu-cart__product-remove a ~ a,
html body .elementor-menu-cart__products a.remove ~ a.remove,
html body .elementor-menu-cart__products a.remove ~ a.remove_from_cart_button {
    display : none !important;
}

/* Safety: nothing may spill outside the 26px button area. */
html body .elementor-menu-cart__product-remove {
    overflow : hidden !important;
}
/*
 * Remove the gap between the custom header and the first section.
 * 1. WoodMart's default top padding on the page content wrapper.
 * 2. Elementor container flex-gap, in case the header sits in the page itself.
 */
body .main-page-wrapper {
    padding-top: 0 !important;
}

body .site-content,
body .content-layout-wrapper {
    padding-top: 0 !important;
    margin-top : 0 !important;
}

/* Kill the flex gap of the container that holds the header widget */
html body .e-con:has(.sn-master-header-wrapper),
html body .e-con:has(.sn-master-header-wrapper) > .e-con-inner {
    --gap    : 0px !important;
    gap      : 0 !important;
    row-gap  : 0 !important;
}

html body .elementor-widget-html:has(.sn-master-header-wrapper) {
    margin-bottom: 0 !important;
}
/*
 * Kill the leftover title block and content padding on Elementor pages only.
 * Shop and archive titles stay untouched.
 */
body.elementor-page .page-title,
body.elementor-page .title-size-small,
body.elementor-page .title-size-default {
    display: none !important;
}

body.elementor-page .main-page-wrapper,
body.elementor-page .site-content,
body.elementor-page .container > .row {
    padding-top: 0 !important;
    margin-top : 0 !important;
}