/* Product Card Redesign - Professional B2B Design */

/* ============================================
   PRIMARY FONT - VAZIRMATN
   ============================================ */
* {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================
   CARD CONTAINER
   ============================================ */
.ar-article-card {
    width: 100% !important;
    max-width: 400px !important; /* Increased from 360px for wider cards */
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 24px !important; /* Uniform padding for consistency */
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
    border: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important; /* Ensure padding is included in width */
}

.ar-article-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* ============================================
   PRODUCT IMAGE SECTION
   ============================================ */
.ar-article-card__header {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important; /* 1:1 aspect ratio */
    margin-bottom: 16px !important;
    background: #F9FAFB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ar-product-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
}

.ar-product-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 180px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ============================================
   STATUS BADGE (NEW)
   ============================================ */
.ar-product-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: #6BCB3D !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    z-index: 10 !important;
    letter-spacing: 0.5px !important;
}

/* ============================================
   PRODUCT TITLE
   ============================================ */
.ar-article-card__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
}

.ar-article-card__content > div:first-child {
    margin-bottom: 4px !important;
    padding: 0 !important; /* Ensure no padding for consistency */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ar-text--size-ms1 {
    font-size: 16px !important; /* Reduced from 18px for subtlety */
    font-weight: 500 !important; /* Reduced from 600 for delicacy */
    line-height: 1.5 !important; /* Increased for better readability */
    color: #374151 !important; /* Softer dark gray instead of pure black */
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important; /* Subtle letter spacing */
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
}

.ar-article-card--link {
    text-decoration: none !important;
    color: inherit !important;
}

.ar-article-card--link:hover {
    color: inherit !important;
}

/* ============================================
   ITEM NUMBER (SKU)
   ============================================ */
.ar-color-foreground-fg-2 {
    font-size: 14px !important;
    color: #9CA3AF !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
}

/* ============================================
   PRICING SECTION
   ============================================ */
.ar-spacing--right-m {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
}

.ar-text--style-bold {
    font-size: 20px !important; /* Reduced from 22px - smaller price font */
    font-weight: 600 !important; /* Reduced from 700 for delicacy */
    color: #1F2937 !important; /* Softer dark gray instead of pure black */
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important; /* Increased for readability */
    letter-spacing: -0.02em !important; /* Subtle letter spacing */
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
}

.ar-text--size-ms-1 {
    font-size: 12px !important; /* Slightly reduced for subtlety */
    font-weight: 400 !important; /* Light weight for delicacy */
    color: #6B7280 !important; /* Softer gray */
    margin: 0 !important;
    line-height: 1.5 !important; /* Increased for readability */
    letter-spacing: 0.01em !important; /* Subtle letter spacing */
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
}

/* ============================================
   QUANTITY & ADD-TO-CART ROW
   ============================================ */
.ar-quantity-cart-row {
    display: flex !important;
    flex-direction: row !important; /* LTR: Cart button on left, quantity on right */
    align-items: center !important;
    justify-content: space-between !important; /* Space between cart and quantity */
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 0 !important; /* Ensure no padding for consistency */
    direction: ltr !important; /* LTR direction for this row */
}

.ar-amount-btn {
    display: flex !important;
    flex-direction: row !important; /* Normal order: + on left, - on right */
    align-items: center !important;
    justify-content: center !important;
    background: #F3F4F6 !important;
    border-radius: 8px !important;
    height: 40px !important;
    min-width: 110px !important; /* Wider to accommodate buttons */
    padding: 0 4px !important;
    border: none !important;
    direction: ltr !important; /* LTR direction for number input */
}

.ar-amount-btn--action {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #374151 !important;
    font-size: 20px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    transition: background 0.15s ease !important;
    line-height: 1 !important;
    min-width: 36px !important;
}

.ar-amount-btn--action:hover {
    background: #E5E7EB !important;
}

.ar-amount-btn--plus {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.ar-amount-btn--minus {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.ar-amount-btn--input {
    flex: 1 !important; /* Take remaining space between buttons */
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    padding: 0 4px !important;
    width: auto !important;
    min-width: 30px !important;
    -moz-appearance: textfield !important; /* Remove Firefox spinner */
}

.ar-amount-btn--input::-webkit-inner-spin-button,
.ar-amount-btn--input::-webkit-outer-spin-button {
    -webkit-appearance: none !important; /* Remove Chrome/Safari spinner */
    margin: 0 !important;
}

.ar-amount-btn--input:focus {
    outline: none !important;
}

/* Add to Cart Button */
.ar-add-to-cart-btn {
    width: 44px !important;
    height: 44px !important;
    background: #6BCB3D !important;
    border: none !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.ar-add-to-cart-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: #FFFFFF !important;
    stroke: currentColor !important;
    fill: none !important;
}

.ar-add-to-cart-btn:hover {
    background: #5AB82E !important;
}

.ar-add-to-cart-btn i,
.ar-add-to-cart-btn svg {
    color: #FFFFFF !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* ============================================
   STOCK STATUS
   ============================================ */
.ar-stock-status {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important; /* Slightly reduced for subtlety */
    font-weight: 400 !important; /* Light weight for delicacy */
    color: #6B7280 !important; /* Softer gray */
    margin-top: auto !important;
    text-align: right !important; /* RTL alignment */
    direction: rtl !important; /* RTL direction */
    padding-top: 12px !important;
    border-top: 1px solid #F3F4F6 !important;
}

.ar-stock-dot {
    width: 8px !important;
    height: 8px !important;
    background: #6BCB3D !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.ar-stock-text {
    color: #6B7280 !important; /* Softer gray */
    font-weight: 400 !important; /* Light weight for delicacy */
    letter-spacing: 0.01em !important; /* Subtle letter spacing */
}

.ar-stock-text strong {
    font-weight: 500 !important; /* Reduced from default for subtlety */
    color: #374151 !important; /* Softer dark gray */
}

/* ============================================
   REMOVE UNNECESSARY ELEMENTS
   ============================================ */
.ar-spacing--left-m,
.ar-spacing--bottom-m {
    margin: 0 !important;
    padding: 0 !important;
}

.ar-flex-wrap {
    display: none !important;
}

/* ============================================
   GRID LAYOUT ADJUSTMENTS - 4 PER ROW
   ============================================ */
.ar-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important; /* Reduced from 1440px for more compact layout */
    margin: 0 auto !important;
    padding: 0 4rem 4rem 4rem !important; /* Increased from 2rem for more breathing room */
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .ar-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 16px !important;
        padding: 0 1.5rem 2rem 1.5rem !important; /* Match shop-context-section mobile padding */
    }
    
    .ar-article-card {
        max-width: 100% !important;
        padding: 16px 20px !important;
    }
}

@media (max-width: 480px) {
    .ar-grid {
        grid-template-columns: 1fr !important;
    }
}