/* ============================================
   CSS کامل chashno.com - همه استایل‌ها
   نسخهٔ قابل استقرار: chashno-wp-custom/assets/chashno-frontend.css
   ============================================ */

:root {
    --btn-primary-color: #4DB6AC;
    --btn-primary-hover: #26A69A;
    /* Design polish — هماهنگ با WoodMart + Elementor */
    --chashno-cta-orange: #e65100;
    --chashno-cta-orange-hover: #bf360c;
    --chashno-image-bg: #faf8f5;
    --chashno-text-heading: #2c2c2c;
    --chashno-radius-card-inner: 12px;
}

/* ============================================
   1. حاشیه دور کارت محصول
   ============================================ */
.product-grid-item,
.product-element,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    border: 1px solid #e5e5e5 !important;
    border-radius: 15px !important;
    padding: 15px !important;
    padding-bottom: 70px !important;
    position: relative !important;
    text-align: right !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.product-grid-item:hover,
.product-element:hover,
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: var(--btn-primary-color) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   2. عنوان محصول - راست‌چین و فاصله کم
   ============================================ */
.product-title,
.woocommerce-loop-product__title,
.wd-entities-title,
h2.woocommerce-loop-product__title,
h3.woocommerce-loop-product__title,
.product-title a {
    text-align: right !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    font-size: 16px !important;
    color: #333 !important;
}

/* ============================================
   3. قیمت - راست‌چین و زیر هم
   ============================================ */
.price,
.wrap-price,
.price-wrapper {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
    width: auto !important;
    padding-left: 60px !important;
    margin: 0 !important;
}

/* قیمت اصلی (خط خورده) - بالا */
.price del,
.price del .amount,
.price del .woocommerce-Price-amount {
    color: #999 !important;
    font-size: 13px !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
    font-weight: normal !important;
    display: block !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* قیمت تخفیف خورده (سبز) - پایین */
.price ins,
.price ins .amount,
.price ins .woocommerce-Price-amount,
.price > .amount:not(del),
.price .woocommerce-Price-amount:not(del) {
    color: var(--btn-primary-color) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: block !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* قیمت تکی (بدون تخفیف) */
.price > .amount:only-child,
.price .woocommerce-Price-amount:only-child {
    color: var(--btn-primary-color) !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

/* ============================================
   4. دکمه سبد خرید - چپ پایین با آیکون
   ============================================ */
.product-grid-item .add_to_cart_button,
.product-element .add_to_cart_button,
.wd-add-btn a,
.woocommerce ul.products li.product .button,
.wd-action-btn.wd-add-btn > a {
    position: absolute !important;
    left: 15px !important;
    bottom: 15px !important;
    top: auto !important;
    right: auto !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    
    background-color: var(--btn-primary-color) !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(77, 182, 172, 0.3) !important;
    
    /* آیکون SVG سبد خرید */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ffffff' d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 22px !important;
    
    /* مخفی کردن متن */
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    /* Transition */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* هاور دکمه */
.product-grid-item .add_to_cart_button:hover,
.product-element .add_to_cart_button:hover,
.wd-add-btn a:hover,
.woocommerce ul.products li.product .button:hover,
.wd-action-btn.wd-add-btn > a:hover {
    background-color: var(--btn-primary-hover) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(77, 182, 172, 0.4) !important;
}

/* حذف pseudo-elements */
.product-grid-item .add_to_cart_button::before,
.product-grid-item .add_to_cart_button::after,
.wd-add-btn a::before,
.wd-add-btn a::after,
.product-element .add_to_cart_button::before,
.product-element .add_to_cart_button::after,
.wd-action-btn.wd-add-btn > a::before,
.wd-action-btn.wd-add-btn > a::after {
    display: none !important;
    content: "" !important;
    background: none !important;
}

/* حذف span داخل دکمه */
.product-grid-item .add_to_cart_button span,
.wd-add-btn a span,
.product-element .add_to_cart_button span,
.wd-action-btn.wd-add-btn > a span {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================
   5. ستاره‌های امتیاز - راست‌چین
   ============================================ */
.star-rating {
    float: right !important;
    margin-bottom: 8px !important;
    clear: both !important;
}

.star-rating span::before,
.star-rating::before {
    color: #FFC107 !important;
}

/* ============================================
   6. تصویر محصول
   ============================================ */
.product-grid-item .product-image-wrapper,
.product-element .product-image-wrapper {
    margin-bottom: 10px !important;
}

/* ============================================
   7. استایل موبایل
   ============================================ */
@media screen and (max-width: 768px) {
    
    /* دکمه کوچکتر در موبایل */
    .product-grid-item .add_to_cart_button,
    .product-element .add_to_cart_button,
    .wd-add-btn a,
    .woocommerce ul.products li.product .button,
    .wd-action-btn.wd-add-btn > a {
        width: 38px !important;
        height: 38px !important;
        left: 10px !important;
        bottom: 10px !important;
        background-size: 18px 18px !important;
        box-shadow: 0 3px 8px rgba(77, 182, 172, 0.3) !important;
    }
    
    .product-grid-item .add_to_cart_button:hover,
    .product-element .add_to_cart_button:hover,
    .wd-add-btn a:hover,
    .woocommerce ul.products li.product .button:hover,
    .wd-action-btn.wd-add-btn > a:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(77, 182, 172, 0.4) !important;
    }
    
    /* قیمت کوچکتر و راست‌چین در موبایل */
    .price,
    .wrap-price,
    .price-wrapper {
        bottom: 10px !important;
        right: 10px !important;
        padding-left: 50px !important;
        gap: 2px !important;
        text-align: right !important;
    }
    
    .price del,
    .price del .amount,
    .price del .woocommerce-Price-amount {
        font-size: 11px !important;
    }
    
    .price ins,
    .price ins .amount,
    .price ins .woocommerce-Price-amount,
    .price > .amount:not(del),
    .price .woocommerce-Price-amount:not(del) {
        font-size: 15px !important;
    }
    
    .price > .amount:only-child,
    .price .woocommerce-Price-amount:only-child {
        font-size: 15px !important;
    }
    
    /* عنوان کوچکتر */
    .product-title,
    .woocommerce-loop-product__title,
    .wd-entities-title,
    h2.woocommerce-loop-product__title,
    h3.woocommerce-loop-product__title {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        text-align: right !important;
    }
    
    /* کارت محصول */
    .product-grid-item,
    .product-element,
    .woocommerce ul.products li.product {
        padding: 12px !important;
        padding-bottom: 60px !important;
    }
    
    /* ستاره‌ها */
    .star-rating {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
}

/* موبایل کوچک - زیر 480px */
@media screen and (max-width: 480px) {
    
    .product-grid-item .add_to_cart_button,
    .product-element .add_to_cart_button,
    .wd-add-btn a,
    .woocommerce ul.products li.product .button,
    .wd-action-btn.wd-add-btn > a {
        width: 35px !important;
        height: 35px !important;
        left: 8px !important;
        bottom: 8px !important;
        background-size: 16px 16px !important;
    }
    
    .price del,
    .price del .amount {
        font-size: 10px !important;
    }
    
    .price ins,
    .price ins .amount,
    .price > .amount:not(del) {
        font-size: 14px !important;
    }
    
    .product-title,
    .woocommerce-loop-product__title {
        font-size: 13px !important;
    }
    
    .product-grid-item,
    .woocommerce ul.products li.product {
        padding: 10px !important;
        padding-bottom: 55px !important;
    }
}

/* ============================================
   8. یکدستی تصویر محصول (WoodMart grid)
   ============================================ */
.product-grid-item.wd-product .product-element-top,
.woocommerce ul.products li.product .product-element-top {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--chashno-radius-card-inner) !important;
    overflow: hidden !important;
    background: var(--chashno-image-bg) !important;
    margin-bottom: 12px !important;
}

.product-grid-item .product-element-top .product-image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.product-grid-item .product-element-top .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.product-grid-item .product-element-top .hover-img {
    border-radius: inherit !important;
}

.product-grid-item .product-element-top .hover-img img {
    object-fit: contain !important;
    object-position: center !important;
}

/* ============================================
   9. برچسب تخفیف یکدست
   ============================================ */
.product-grid-item .product-labels .onsale.product-label,
.product-grid-item .product-labels .product-label.onsale,
ul.products li.product .onsale {
    background: var(--chashno-cta-orange) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    min-height: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.product-grid-item .product-labels {
    z-index: 3 !important;
}

/* ============================================
   9b. رفع تداخل برچسب ترب‌پی با برچسب تخفیف
   افزونه توروب‌پی (torobpay) را به گوشه چپ-بالا
   منتقل می‌کنیم تا با .product-labels (راست-بالا)
   تداخل نداشته باشد.
   ============================================ */
.torobpay-product-badge {
    right: auto !important;
    left: 10px !important;
    top: 10px !important;
    z-index: 2 !important;
}

/* روی موبایل کارت‌ها کوچک‌ترند — فاصله کمتر */
@media (max-width: 480px) {
    .torobpay-product-badge {
        left: 6px !important;
        top: 6px !important;
    }
}

/* ============================================
   10. هدر موبایل — فضای نفس + آیکون‌های کوچک‌تر
   ============================================ */
@media screen and (max-width: 1024px) {
    .whb-main-header .whb-flex-row.whb-general-header-inner {
        row-gap: 10px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .whb-main-header .wd-el-search .searchform input[type="text"],
    .whb-main-header .wd-search-form input[type="text"] {
        min-height: 44px !important;
    }

    .wd-social-icons.icons-size-large .wd-social-icon,
    .wd-social-icons.icons-size-large a.wd-social-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
}

/* ============================================
   11. تایپوگرافی ملایم (عناوین کارت)
   ============================================ */
.wd-entities-title a,
.product-title a,
.woocommerce-loop-product__title a {
    color: var(--chashno-text-heading) !important;
    line-height: 1.5 !important;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================
   12. فوتر Elementor — فاصله خواناتر
   ============================================ */
.elementor-location-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    padding-top: 0.5rem !important;
}

.chashno-footer-menu li {
    margin-bottom: 12px !important;
}

/* ============================================
   13. بنر قابل‌خواندن — در Elementor به سکشن کلاس «chashno-hero-readable» بدهید
   ============================================ */
.elementor-section.chashno-hero-readable {
    position: relative !important;
    overflow: hidden !important;
}

.elementor-section.chashno-hero-readable::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.22) 45%,
        rgba(0, 0, 0, 0.06) 100%
    ) !important;
}

.elementor-section.chashno-hero-readable > .elementor-container {
    position: relative !important;
    z-index: 2 !important;
}