/* ==========================================================================
   WingPilot Shop — Minimal & Premium E-commerce UI
   Based strictly on Astra + WooCommerce current HTML
   ========================================================================== */

:root {
    /* پالت رنگی مینیمال و تمیز */
    --wps-bg-card:    #ffffff;       /* رنگ پس‌زمینه کارت‌ها */
    --wps-text-dark:  #111827;       /* زغالی تیره برای تیترها */
    --wps-text-muted: #6b7280;       /* طوسی ملایم برای توضیحات و قیمت خط‌خورده */
    --wps-border:     #e5e7eb;       /* طوسی بسیار محو برای حاشیه‌ها */
    --wps-accent:     #000000;       /* رنگ اکست (مشکی خالص برای دکمه‌های هاور) */
    
    /* ابعاد و شعاع */
    --wps-radius-lg:  16px;
    --wps-radius-md:  12px;
    --wps-radius-sm:  8px;
    
    /* سایه‌های نرم و حرفه‌ای */
    --wps-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.05);
    --wps-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --wps-shadow-lg:  0 12px 24px -4px rgba(0, 0, 0, 0.08);
    
    --wps-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   ۱) نوار ابزار فروشگاه (Toolbar)
   -------------------------------------------------------------------------- */
.ast-shop-toolbar-container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    border-radius: var(--wps-radius-md);
    padding: 12px 16px;
    margin-bottom: 32px !important;
    box-shadow: var(--wps-shadow-sm);
    gap: 12px;
}

.ast-shop-toolbar-aside-wrap {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
}

/* دکمه فیلتر */
.astra-shop-filter-button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--wps-bg-card) !important;
    border: 1px solid var(--wps-border) !important;
    border-radius: var(--wps-radius-sm);
    color: var(--wps-text-dark) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: var(--wps-transition);
}
.astra-shop-filter-button:hover {
    border-color: var(--wps-text-dark) !important;
    box-shadow: var(--wps-shadow-sm);
}
/* قفل ابعاد آیکون فیلتر */
.astra-shop-filter-button svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* مرتب‌سازی */
.woocommerce-ordering {
    margin: 0 !important;
    border: 1px solid var(--wps-border);
    border-radius: var(--wps-radius-sm);
    background: var(--wps-bg-card);
    overflow: hidden;
    display: flex;
}
.woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    border: none !important;
    padding: 10px 16px 10px 40px; /* فضای آیکون در چپ */
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wps-text-dark);
    cursor: pointer;
    min-width: 180px;
    outline: none;
}

/* سوییچ گرید/لیست */
.ast-products-view {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: var(--wps-radius-sm);
}
.ast-view-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    color: var(--wps-text-muted);
    cursor: pointer;
    transition: var(--wps-transition);
}
.ast-view-trigger svg { width: 16px !important; height: 16px !important; fill: currentColor; }
.ast-view-trigger.active { background: var(--wps-bg-card); color: var(--wps-text-dark); box-shadow: var(--wps-shadow-sm); }

/* --------------------------------------------------------------------------
   ۲) چیدمان شبکه محصولات (Grid)
   -------------------------------------------------------------------------- */
.ast-woocommerce-container ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ast-woocommerce-container ul.products::before, 
.ast-woocommerce-container ul.products::after { display: none !important; }

/* --------------------------------------------------------------------------
   ۳) کارت محصول
   -------------------------------------------------------------------------- */
.ast-woocommerce-container ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border) !important;
    border-radius: var(--wps-radius-lg);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    transition: var(--wps-transition);
    position: relative;
    text-align: right;
}

.ast-woocommerce-container ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--wps-shadow-lg);
    border-color: transparent !important;
}

/* --- تصویر محصول --- */
.astra-shop-thumbnail-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    background: #f9fafb; /* پس‌زمینه محو برای عکس‌های ترانسپرنت */
}
.astra-shop-thumbnail-wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
li.product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.04);
}

/* --- دکمه شناور کارت (سبد خرید / انتخاب گزینه‌ها) --- */
.ast-on-card-button {
    position: absolute !important;
    bottom: 16px;
    left: 16px; /* در قالب‌های RTL چپ قرار می‌گیرد */
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    border-radius: 50%;
    color: var(--wps-text-dark) !important;
    box-shadow: var(--wps-shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: var(--wps-transition);
    text-decoration: none !important;
}
li.product:hover .ast-on-card-button {
    opacity: 1;
    transform: translateY(0);
}
.ast-on-card-button:hover {
    background: var(--wps-accent) !important;
    color: #ffffff !important;
}

/* قفل قطعی ابعاد آیکون داخل دکمه */
.ast-on-card-button svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    fill: currentColor !important;
    flex-shrink: 0;
}

/* Tooltip دکمه شناور */
.ast-card-action-tooltip {
    position: absolute;
    right: calc(100% + 12px); /* نمایش تولتیپ در سمت راست دکمه */
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background: var(--wps-text-dark);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--wps-transition);
    box-shadow: var(--wps-shadow-sm);
    pointer-events: none;
}
/* فلش کوچک تولتیپ */
.ast-card-action-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--wps-text-dark);
}
.ast-on-card-button:hover .ast-card-action-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* --- محتوای متنی کارت (عنوان و قیمت) --- */
.astra-shop-summary-wrap {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1;
    margin: 0 !important;
}

/* عنوان محصول */
.woocommerce-loop-product__title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    color: var(--wps-text-dark) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.ast-loop-product__link:hover .woocommerce-loop-product__title {
    color: var(--wps-text-muted) !important;
}
.ast-loop-product__link { text-decoration: none !important; }

/* قیمت */
li.product .price {
    margin: auto 0 0 0 !important;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
li.product .price .amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--wps-text-dark);
}
li.product .price .woocommerce-Price-currencySymbol {
    font-size: 12px;
    font-weight: 600;
    color: var(--wps-text-muted);
}

/* --- توضیحات محصول (لیست ویژگی‌ها) --- */
.ast-woo-shop-product-description {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px dashed var(--wps-border);
}
.ast-woo-shop-product-description ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ast-woo-shop-product-description li {
    position: relative;
    padding-right: 14px;
    margin-bottom: 8px !important;
    line-height: 1.5;
}
.ast-woo-shop-product-description li:last-child { margin-bottom: 0 !important; }
/* بولت سفارشی */
.ast-woo-shop-product-description li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wps-border);
}
/* خنثی کردن استایل‌های اینلاین داخل تگ‌های span */
.ast-woo-shop-product-description span {
    color: var(--wps-text-muted) !important;
    font-size: 13px !important;
}
.ast-woo-shop-product-description strong {
    color: var(--wps-text-dark) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   ۴) ریسپانسیو
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ast-woocommerce-container ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 768px) {
    /* دکمه همیشه نمایش داده شود در موبایل (چون Hover نداریم) */
    .ast-on-card-button {
        opacity: 1;
        transform: translateY(0);
        bottom: 12px; left: 12px;
        width: 40px; height: 40px;
    }
    .ast-card-action-tooltip { display: none !important; } /* مخفی کردن تولتیپ در موبایل */
    
    .ast-woocommerce-container ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
    
    .ast-shop-toolbar-container { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
    .ast-shop-toolbar-aside-wrap { justify-content: space-between; width: 100%; }
    .woocommerce-ordering { flex: 1; }
    .woocommerce-ordering select.orderby { width: 100%; min-width: 0; }
    
    .astra-shop-summary-wrap { padding: 16px !important; }
    .woocommerce-loop-product__title { font-size: 14px !important; min-height: 3.2em; }
    li.product .price .amount { font-size: 15px; }
    
    /* مخفی کردن توضیحات طولانی در موبایل برای شلوغ نشدن فضا */
    .ast-woo-shop-product-description { display: none !important; }
}