/* ==========================================================================
   TAJALEE PRODUCT CARDS SYSTEM (product_cards.css)
   Canonical Styles for Standard, Compact, Timer-Special, and Horizontal Cards
   ========================================================================== */

/* ==========================================================================
   1. OFFICIAL TOMAN CURRENCY UNIT ICON
   ========================================================================== */
.unit,
.price-unit,
.product-price-now .unit,
.product-price-now .unit-sm,
.card.product .unit,
.card.product-horizontal .unit,
.card.product-card-compact .unit,
.product-timer-special .unit {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InRvbWFuLTEgMSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE4MV8xMTIzKSI+CjxnIGlkPSJMYXllciAxIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2Ljg5ODQgMC43NTAyNTlIMTQuNTIyNEMxNC4xNDI1IDAuNzUwMjU5IDEzLjgzNDYgMS4wNTgxOSAxMy44MzQ2IDEuNDM4MDVDMTMuODM0NiAxLjgxNzkgMTQuMTQyNSAyLjEyNTgzIDE0LjUyMjQgMi4xMjU4M0gxNi44OTg0QzE3LjI3ODIgMi4xMjU4MyAxNy41ODYyIDEuODE3OSAxNy41ODYyIDEuNDM4MDVDMTcuNTg2MiAxLjA1ODE5IDE3LjI3ODIgMC43NTAyNTkgMTYuODk4NCAwLjc1MDI1OVoiIGZpbGw9IiM4ZjliYWQiLz4KPHBhdGggaWQ9IlZlY3Rvcl8yIiBkPSJNMjEuMjQ3NCAzLjgxNDI0QzIxLjIyNjUgMy40MzkwOCAyMS4xNjQgMi45NDY2OSAyMS4wNTk4IDIuMzM3MDZDMjAuOTk5IDEuOTgyNzUgMjAuOTM2NSAxLjY1MDE0IDIwLjg3MjIgMS4zMzkyNUMyMC44MDAyIDAuOTkxODgyIDIwLjQ1MjggMC43NzY1MTQgMjAuMTEwNiAwLjg2NjgyOUMxOS43OTQ1IDAuOTUwMTk3IDE5LjU5ODMgMS4yNjQ1NiAxOS42NjI1IDEuNTg0MTRDMTkuNzI2OCAxLjkwMzcyIDE5Ljc4NzYgMi4yMjMzIDE5Ljg0ODQgMi41NjM3MkMxOS45NDc0IDMuMTE2MDMgMjAuMDA3MyAzLjU0MzI5IDIwLjAyODEgMy44NDU1QzIwLjA0OSA0LjIyMDY2IDE5LjkzNjkgNC41MTI0NSAxOS42OTIxIDQuNzIwODdDMTkuNDQ3MiA0LjkyOTI5IDE5LjAyMjUgNS4wMzM1IDE4LjQxODEgNS4wMzM1SDYuNjcyNzNWMy40NzAzNUM2LjY3MjczIDIuODAzNCA2LjU1Mjg5IDIuMjEyMDEgNi4zMTMyMSAxLjY5NjE3QzYuMDczNTMgMS4xODAzMyA1LjcyOTYzIDAuNzc2NTE0IDUuMjgxNTMgMC40ODQ3MjVDNC44MzM0MyAwLjE5MjkzNyA0LjMxMjM3IDAuMDQ3MDQyOCAzLjcxODM4IDAuMDQ3MDQyOEMzLjE1NTY0IDAuMDQ3MDQyOCAyLjY1MjgzIDAuMTk4MTQ4IDIuMjA5OTMgMC41MDAzNTdDMS43NjcwNCAwLjgwMjU2NiAxLjQyMzE1IDEuMjE0MiAxLjE3ODI1IDEuNzM1MjVDMC45MzMzNiAyLjI1NjMgMC44MTA5MTMgMi44MzQ2NiAwLjgxMDkxMyAzLjQ3MDM1QzAuODEwOTEzIDQuNDA4MjQgMS4wNzkyNSA1LjEzNzcxIDEuNjE1OTQgNS42NTg3NkMyLjE1MjYyIDYuMTc5ODEgMi44NTg2NCA2LjQ0MDM0IDMuNzM0MDEgNi40NDAzNEg1LjQyMjIxVjYuNTM0MTJDNS40MjIyMSA2Ljc4NDIzIDUuMzIzMjEgNi45ODIyMyA1LjEyNTIxIDcuMTI4MTJDNC45MjcyMSA3LjI3NDAyIDQuNjM1NDMgNy4zOTkwNyA0LjI0OTg1IDcuNTAzMjhDMy44NjQyNyA3LjYwNzQ5IDMuMjE4MTcgNy43NTMzOCAyLjMxMTU0IDcuOTQwOTZMMi4yOTA3IDcuOTQ1M0MxLjkxNjQxIDguMDE5OTkgMS42NzY3MyA4LjM4ODIgMS43NjAwOSA4Ljc2MDc1QzEuODQwODYgOS4xMjIwMSAyLjE5NTE3IDkuMzUyMTQgMi41NTczIDkuMjgwMDZDMi43MDQ5MyA5LjI1MDU0IDIuODUxNyA5LjIyMTAxIDIuOTk5MzMgOS4xOTE0OEMzLjk3ODkgOC45OTM0OCA0LjcyMTQgOC43OTU0OCA1LjIyNjgyIDguNTk3NDlDNS43MzIyNCA4LjM5OTQ5IDYuMDk5NTggOC4xNDE1NyA2LjMyODg0IDcuODIzNzNDNi41NTgxIDcuNTA1ODggNi42NzI3MyA3LjA3NjAyIDYuNjcyNzMgNi41MzQxMlY2LjQ0MDM0SDE4LjQxODFDMTkuMDUzOCA2LjQ0MDM0IDE5LjU4NzggNi4zMTUyOCAyMC4wMjAzIDYuMDY1MThDMjAuNDUyOCA1LjgxNTA3IDIwLjc3MDYgNS40ODk0MiAyMC45NzM4IDUuMDg4MjFDMjEuMTc3IDQuNjg3IDIxLjI2ODIgNC4yNjIzNCAyMS4yNDc0IDMuODE0MjRaTTUuNDUzNDcgNS4wMzM1SDMuNzM0MDFDMy4xNDAwMSA1LjAzMzUgMi43MDc1NCA0LjkxNjI2IDIuNDM2NTkgNC42ODE3OUMyLjE2NTY1IDQuNDQ3MzIgMi4wMzAxNyA0LjA0MzUgMi4wMzAxNyAzLjQ3MDM1QzIuMDMwMTcgMi44NTU1MSAyLjE3ODY3IDIuMzYzMTEgMi40NzU2NyAxLjk5MzE3QzIuNzcyNjcgMS42MjMyMiAzLjE4NjkgMS40MzgyNSAzLjcxODM4IDEuNDM4MjVDNC4yOTE1MyAxLjQzODI1IDQuNzI0IDEuNjE4MDEgNS4wMTU3OSAxLjk3NzU0QzUuMzA3NTggMi4zMzcwNiA1LjQ1MzQ3IDIuODM0NjYgNS40NTM0NyAzLjQ3MDM1VjUuMDMzNVoiIGZpbGw9IiM4ZjliYWQiLz4KPHBhdGggaWQ9IlZlY3Rvcl8zIiBkPSJNNi4yMzUwNyAxMi44NDEzQzYuMjM1MDcgMTIuNDA5NyA1Ljg4NTE1IDEyLjA1OTcgNS40NTM1IDEyLjA1OTdDNS4wMjE4NCAxMi4wNTk3IDQuNjcxOTIgMTIuNDA5NyA0LjY3MTkyIDEyLjg0MTNDNC42NzE5MiAxMy4yNzMgNS4wMjE4NCAxMy42MjI5IDUuNDUzNSAxMy42MjI5QzUuODg1MTUgMTMuNjIyOSA2LjIzNTA3IDEzLjI3MyA2LjIzNTA3IDEyLjg0MTNaIiBmaWxsPSIjOGY5YmFkIi8+CjxwYXRoIGlkPSJWZWN0b3JfNCIgZD0iTTIwLjc3MjQgMTIuMzQ4OUMyMC41NDMyIDExLjgxMjMgMjAuMjIwMSAxMS4zODU5IDE5LjgwMzMgMTEuMDY3MkMxOS4zODY0IDEwLjc0OTMgMTguOTA3MSAxMC41OTA0IDE4LjM2NTIgMTAuNTkwNEMxNy42ODc4IDEwLjU5MDQgMTcuMTA5NCAxMC44MjMxIDE2LjYzMDEgMTEuMjg2QzE2LjE1MDcgMTEuNzQ5NyAxNS43OTY0IDEyLjM4OCAxNS41NjcxIDEzLjIwMDlMMTUuMDY2OSAxNC45OTg1QzE1LjAxNDggMTUuMjE3MyAxNC45MTMyIDE1LjM4MTUgMTQuNzYyMSAxNS40OTA5QzE0LjYxMSAxNS42MDAzIDE0LjQxMDQgMTUuNjU1IDE0LjE2MDMgMTUuNjU1QzEzLjY5MTMgMTUuNjU1IDEzLjM1NTMgMTUuNjA2NCAxMy4xNTIgMTUuNTA2NUMxMi45NDg4IDE1LjQwNzUgMTIuODEzNCAxNS4yMzMgMTIuNzQ1NiAxNC45ODI5QzEyLjY3NzkgMTQuNzMyOCAxMi42NDQgMTQuMzI2MyAxMi42NDQgMTMuNzYzNkwxMi42Mjg0IDkuNzQ2MjlDMTIuNjI4NCA5LjM1MDMgMTIuNTYwNyA5LjAwMjA2IDEyLjQyNTIgOC42OTg5OEMxMi4yODk3IDguMzk2NzcgMTIuMDc2MSA4LjE1OTY5IDExLjc4NDMgNy45ODc3NUMxMS40OTI1IDcuODE1OCAxMS4xMjI2IDcuNzI5ODMgMTAuNjc0NCA3LjcyOTgzSDEwLjE1ODZDOS43MDAwOCA3LjcyOTgzIDkuMzIyMzIgNy44MTU4IDkuMDI1MzIgNy45ODc3NUM4LjcyODMyIDguMTU5NjkgOC41MTQ2OSA4LjM5NDE3IDguMzg0NDMgOC42OTExN0M4LjI1NDE3IDguOTg4MTcgOC4xODkwNCA5LjMzOTg3IDguMTg5MDQgOS43NDYyOUw4LjIwNDY3IDE0LjEwNzVDOC4yMDQ2NyAxNC43MTE5IDguMTIxMyAxNS4xODg3IDcuOTU0NTYgMTUuNTM3OEM3Ljc4NzgzIDE1Ljg4NzcgNy41MDY0NiAxNi4xNDIyIDcuMTEwNDYgMTYuMzAzN0M2LjcxNDQ2IDE2LjQ2NjEgNi4xNjIxNSAxNi41NDYgNS40NTM1MiAxNi41NDZINS4yMjZDNC41Nzk4OSAxNi41NDYgNC4wNDg0MiAxNi40MTE0IDMuNjMxNTggMTYuMTM5NkMzLjIxNDc0IDE1Ljg2ODYgMi45MDczMiAxNS40OTcgMi43MDkzMiAxNS4wMjE5QzIuNTExMzIgMTQuNTQ3OCAyLjQxMjMyIDE0LjAwNDEgMi40MTIzMiAxMy4zODg0QzIuNDEyMzIgMTMuMTcwNSAyLjQ0NjE5IDEyLjg3NDMgMi40ODc4NyAxMi41OTNDMi41NDk1MyAxMi4xNzQ0IDIuMTgzMDYgMTEuODE5MiAxLjc2NjIyIDExLjg5MjJDMS40OTg3NCAxMS45MzkgMS4yOTQ2NyAxMi4xNTQ0IDEuMjU4MTkgMTIuNDIzNkMxLjIxNDc3IDEyLjc0MDYgMS4xOTMwNiAxMy4wNjE5IDEuMTkzMDYgMTMuMzg4NEMxLjE5MzA2IDE0LjE4MDQgMS4zNDY3NyAxNC45MjY0IDEuNjU0MTkgMTUuNjIzN0MxLjk2MTYxIDE2LjMyMiAyLjQxNzUzIDE2Ljg4NDcgMy4wMjE5NSAxNy4zMTJDMy42MjYzNyAxNy43NDAxIDQuMzYxMDUgMTcuOTUyOCA1LjIyNiAxNy45NTI4SDUuNDUzNTJDNi4zODA5OSAxNy45NTI4IDcuMTM5MTIgMTcuNzk2NSA3LjcyNzkxIDE3LjQ4MzlDOC4zMTY2OSAxNy4xNzEzIDguNzQ5MTcgMTYuNzI4NCA5LjAyNTMyIDE2LjE1NTJDOS4zMDE0OCAxNS41ODI5IDkuNDM0MzUgMTQuODk5NSA5LjQyMzkzIDE0LjEwNzVMOS40MDgzIDkuNzQ2MjlDOS40MDgzIDkuNTA2NjEgOS40NTc4IDkuMzQ1OTUgOS41NTY4IDkuMjYxNzJDOS42NTU4IDkuMTc4MzUgOS44NTY0IDkuMTM2NjYgMTAuMTU4NiA5LjEzNjY2SDEwLjY3NDRDMTAuOTU1OCA5LjEzNjY2IDExLjE0ODYgOS4xODM1NiAxMS4yNTI4IDkuMjc3MzVDMTEuMzU3IDkuMzcxMTQgMTEuNDA5MSA5LjUyNzQ1IDExLjQwOTEgOS43NDYyOUwxMS40MjQ4IDEzLjc2MzZDMTEuNDI0OCAxNC40NzMxIDExLjUwNTUgMTUuMDY3MSAxMS42NjcxIDE1LjU0NTZDMTEuODI4NiAxNi4wMjUgMTIuMTA3MyAxNi4zOTc1IDEyLjUwMzMgMTYuNjYzMkMxMi44OTkzIDE2LjkyOSAxMy40NTE3IDE3LjA2MTggMTQuMTYwMyAxNy4wNjE4QzE0LjQ2MjUgMTcuMDYxOCAxNC43NTQzIDE2Ljk5NDEgMTUuMDM1NiAxNi44NTg2QzE1LjMxNyAxNi43MjQgMTUuNTYxOSAxNi41MzY1IDE1Ljc3MDMgMTYuMjk1OUwxNS44MzI5IDE2LjMyNzJDMTYuNjQ1NyAxNi43NDQgMTcuMjUwMSAxNy4wMjg4IDE3LjY0NjEgMTcuMTc5MUMxOC4wNDIxIDE3LjMzMDIgMTguNDM4MSAxNy40MDU3IDE4LjgzNDEgMTcuNDA1N0MxOS4yMzAxIDE3LjQwNTcgMTkuNTg3IDE3LjI5NDYgMTkuOTM2MSAxNy4wNjk3QzIwLjI4NTIgMTYuODQ1NiAyMC41NjkyIDE2LjQ4NjEgMjAuNzg4IDE1Ljk5MTFDMjEuMDA2OSAxNS40OTcgMjEuMTE2MyAxNC44NjM5IDIxLjExNjMgMTQuMDkxOUMyMS4xMTYzIDEzLjQ2NjYgMjEuMDAxNyAxMi44ODY1IDIwLjc3MjQgMTIuMzQ4OVpNMTkuNjMxMyAxNS42MDAzQzE5LjQ1NDIgMTUuODY2IDE5LjE4ODQgMTUuOTk4OSAxOC44MzQxIDE1Ljk5ODlDMTguNTYzMiAxNS45OTg5IDE4LjI3NjYgMTUuOTM5IDE3Ljk3NDQgMTUuODE5MUMxNy42NzIyIDE1LjcwMDIgMTcuMTY2NyAxNS40NjIyIDE2LjQ1ODEgMTUuMTA3OUwxNi4zNDg3IDE1LjA0NTRMMTYuNzU1MSAxMy41NzZDMTYuOTAxIDEzLjA0NDUgMTcuMTEyIDEyLjY0ODUgMTcuMzg4MiAxMi4zODhDMTcuNjY0MyAxMi4xMjg0IDE3Ljk5IDExLjk5NzIgMTguMzY1MiAxMS45OTcyQzE4Ljg2NTQgMTEuOTk3MiAxOS4yNDU3IDEyLjE4MzEgMTkuNTA2MyAxMi41NTIyQzE5Ljc2NjggMTIuOTIyMSAxOS44OTcgMTMuNDM1MyAxOS44OTcgMTQuMDkxOUMxOS44OTcgMTQuODMyNiAxOS44MDg1IDE1LjMzNDYgMTkuNjMxMyAxNS42MDAzWiIgZmlsbD0iIzhmOWJhZCIvPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xODFfMTEyMyI+CjxyZWN0IHdpZHRoPSIyMC40MzkxIiBoZWlnaHQ9IjE3LjkwNTkiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjgxMDkxMyAwLjA0NzA0MjgpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+") center no-repeat !important;
    background-size: contain !important;
    width: 17px !important;
    height: 17px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    position: relative !important;
    top: -1px !important;
    line-height: 1 !important;
}

.unit-sm {
    width: 14px !important;
    height: 14px !important;
}

/* Universal RTL layout for prices & units (Unit on the Left) */
.product-price-now,
.card.product .product-price-now,
.product .product-price-now,
.product-square .product-price-now,
.card.product-card-compact .product-price-current,
.product-horizontal--footer .product-price-now {
    white-space: nowrap !important;
    display: inline-flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   2. STANDARD PRODUCT CARD (.card.product)
   ========================================================================== */
.card.product {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: 100% !important;
}

.card.product:hover {
    transform: translateY(-5px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 14px 30px rgba(13, 38, 68, 0.12) !important;
}

.card.product .card-body {
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
}

.card.product .product-badge-container {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.card.product .product-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    line-height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.card.product .badge-discount {
    background-color: #f8a203 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(248, 162, 3, 0.35) !important;
}

.card.product .badge-special {
    background-color: #0d2644 !important;
    color: #ffffff !important;
}

.card.product .product-colors {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 4 !important;
    display: flex !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.card.product .product-colors li {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
}

.card.product .product-thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
    height: auto !important;
    border: none !important;
}

.card.product .product-thumbnail a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.card.product .product-thumbnail img,
.product-square .product-thumbnail img,
.card.product-card-compact .product-thumbnail img,
.product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: hidden !important;
}

.card.product:hover .product-thumbnail img {
    transform: scale(1.05) !important;
}

.card.product .product-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

.card.product .product-title {
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.card.product .product-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 20px !important;
    max-height: 40px !important;
}

.card.product .product-title a:hover {
    color: #0d2644 !important;
}

.card.product .product-footer {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 10px !important;
    margin-top: auto !important;
    min-height: 48px !important;
}

/* Quick Add to Cart Action Button */
.btn-quick-cart {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    background-color: #f1f5f9 !important;
    color: #0d2644 !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 5 !important;
    padding: 0 !important;
    outline: none !important;
}

.btn-quick-cart:hover {
    background-color: #0d2644 !important;
    color: #ffffff !important;
    border-color: #0d2644 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(13, 38, 68, 0.25) !important;
}

.btn-quick-cart:active {
    transform: scale(0.96) !important;
}

.btn-quick-cart i {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Price Container with Guaranteed Baseline Alignment */
.card.product .price-container,
.product-timer-special .price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    min-height: 38px !important;
    gap: 2px !important;
}

.card.product .product-price-old,
.product-timer-special .product-price-old {
    font-size: 11px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    line-height: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}

.card.product .product-price-now,
.product-timer-special .product-price-now {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0d2644 !important;
    line-height: 18px !important;
    letter-spacing: -0.5px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
}

/* Regular / No-Discount Price: Larger typography and icon to fill space elegantly */
.card.product .price-container:not(:has(.product-price-old)) .product-price-now,
.card.product .price-container > .product-price-now:only-child,
.product-timer-special .price-container:not(:has(.product-price-old)) .product-price-now,
.product-timer-special .price-container > .product-price-now:only-child {
    font-size: 17.5px !important;
    font-weight: 800 !important;
    line-height: 22px !important;
    letter-spacing: -0.5px !important;
}

.card.product .price-container:not(:has(.product-price-old)) .product-price-now .unit,
.card.product .price-container > .product-price-now:only-child .unit,
.product-timer-special .price-container:not(:has(.product-price-old)) .product-price-now .unit,
.product-timer-special .price-container > .product-price-now:only-child .unit {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px !important;
}

.card.product .product--link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

/* ==========================================================================
   3. SPECIAL TIMER / COUNTDOWN PRODUCT CARD (.product-timer-special)
   ========================================================================== */
.product-timer-special {
    border: 1.5px solid #fed7aa !important;
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 40%) !important;
    box-shadow: 0 4px 16px rgba(248, 162, 3, 0.08) !important;
}

.product-timer-special:hover {
    border-color: #f8a203 !important;
    box-shadow: 0 16px 36px rgba(248, 162, 3, 0.16) !important;
}

.product-timer-special .badge-special-timer {
    background: linear-gradient(135deg, #0d2644 0%, #1e3a8a 100%) !important;
    color: #f8a203 !important;
    gap: 4px !important;
    border: 1px solid rgba(248, 162, 3, 0.3) !important;
    font-size: 10.5px !important;
    padding: 3px 8px !important;
}

.product-timer-special .badge-special-timer i {
    color: #f8a203 !important;
    animation: pulse-flash 1.5s infinite !important;
}

@keyframes pulse-flash {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.product-countdown-wrapper {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 3 !important;
    display: flex !important;
    justify-content: center !important;
}

.countdown-timer {
    background: rgba(13, 38, 68, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(248, 162, 3, 0.35) !important;
    border-radius: 30px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    direction: rtl !important;
}

.countdown-timer .timer-icon {
    color: #f8a203 !important;
    font-size: 13px !important;
    margin-left: 2px !important;
}

.countdown-timer .timer-unit {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}

.countdown-timer .timer-num {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    min-width: 14px !important;
    text-align: center !important;
}

.countdown-timer .timer-lbl {
    font-size: 8.5px !important;
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

.countdown-timer .timer-colon {
    color: #f8a203 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}

.product-stock-progress {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
}

.stock-progress-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    margin-bottom: 3px !important;
}

.stock-count {
    font-weight: 700 !important;
    color: #ea580c !important;
}

.progress-bar-bg {
    width: 100% !important;
    height: 5px !important;
    background-color: #ffedd5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.progress-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f8a203 0%, #ea580c 100%) !important;
    border-radius: 10px !important;
    transition: width 0.5s ease !important;
}

/* ==========================================================================
   4. HORIZONTAL PRODUCT CARD (.card.product-horizontal)
   ========================================================================== */
.card.product-horizontal {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.card.product-horizontal:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(13, 38, 68, 0.08) !important;
}

.product-horizontal--content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

.product-horizontal--content img {
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    background-color: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}

.product-horizontal--content h3 {
    margin-right: 12px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.product-horizontal--content h3 a {
    text-decoration: none !important;
    color: #1e293b !important;
    transition: color 0.2s ease !important;
}

.card.product-horizontal:hover .product-horizontal--content h3 a {
    color: #0d2644 !important;
}

.product-horizontal--footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px dashed #f1f5f9 !important;
    padding-top: 8px !important;
    margin-top: auto !important;
}

.product-horizontal--footer .product-colors {
    display: flex !important;
    gap: 3px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-horizontal--footer .product-colors li {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.product-horizontal--footer .product-price-now {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0d2644 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.card.product-horizontal .product--link {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
}

/* ==========================================================================
   5. COMPACT / SLIDER PRODUCT CARD (.card.product-card-compact)
   ========================================================================== */
.card.product-card-compact {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: 100% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.card.product-card-compact:hover {
    transform: translateY(-4px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 24px rgba(13, 38, 68, 0.1) !important;
}

.card.product-card-compact .product-badge-container {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 4 !important;
}

.card.product-card-compact .product-thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
    border: none !important;
}

.card.product-card-compact .product-thumbnail a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.card.product-card-compact .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

.card.product-card-compact:hover .product-thumbnail img {
    transform: scale(1.05) !important;
}

.card.product-card-compact .product-title {
    font-size: 12.5px !important;
    line-height: 19px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.card.product-card-compact .product-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 19px !important;
    max-height: 38px !important;
}

.card.product-card-compact .product-title a:hover {
    color: #0d2644 !important;
}

.card.product-card-compact .product-footer {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    border-top: 1px dashed #f1f5f9 !important;
    padding-top: 8px !important;
    margin-top: auto !important;
    min-height: 42px !important;
}

.card.product-card-compact .price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    min-height: 34px !important;
    gap: 1px !important;
}

.card.product-card-compact .product-price-old {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    line-height: 13px !important;
    height: 13px !important;
}

.card.product-card-compact .product-price-current {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0d2644 !important;
    line-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Regular / No-Discount Compact Price */
.card.product-card-compact .price-container:not(:has(.product-price-old)) .product-price-current,
.card.product-card-compact .price-container > .product-price-current:only-child {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
    letter-spacing: -0.5px !important;
}

.card.product-card-compact .price-container:not(:has(.product-price-old)) .product-price-current .unit,
.card.product-card-compact .price-container > .product-price-current:only-child .unit {
    width: 18px !important;
    height: 18px !important;
    margin-right: 5px !important;
}

.card.product-card-compact .product-card-overlay-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}