/* Product card refresh — 2026-08-11
   Visual layer only: preserves existing links, cart actions and product data. */
:root {
    --product-card-gold: #d8a02d;
    --product-card-gold-dark: #ad7414;
    --product-card-ink: #29221c;
    --product-card-muted: #8b847c;
    --product-card-line: #eee9e1;
    --product-card-surface: #ffffff;
    --product-card-soft: #fff8e8;
}

/* Shared card shell across home, search, category and offer views */
.prod-card,
.xt-card,
.product-card,
.offer-card,
.list-prod-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: var(--product-card-surface) !important;
    border: 1px solid rgba(203, 183, 145, .34) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(77, 55, 23, .10) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.prod-card:hover,
.xt-card:hover,
.product-card:hover,
.offer-card:hover,
.list-prod-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(216, 160, 45, .64) !important;
    box-shadow: 0 18px 42px rgba(77, 55, 23, .16) !important;
}

/* A generous neutral stage preserves the complete product instead of cropping it. */
.prod-media,
.product-media,
.product-image,
.offer-img,
.list-prod-media,
.product-grid .product-card > img:first-child {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(220px, 25vw, 310px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.98), rgba(253,250,245,.88) 61%, rgba(244,238,227,.88) 100%) !important;
}

.prod-media > a,
.product-media > a,
.product-image > a,
.offer-img > a,
.list-prod-media > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.prod-media img,
.product-media img,
.product-image img,
.offer-img img,
.list-prod-media img,
.product-grid .product-card > img:first-child {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    transition: transform .35s ease !important;
}

.prod-card:hover .prod-media img,
.xt-card:hover .product-media img,
.product-card:hover .product-media img,
.offer-card:hover .offer-img img,
.list-prod-card:hover .list-prod-media img {
    transform: scale(1.035) !important;
}

/* Standardize product metadata and prioritize the Arabic reading order. */
.prod-info,
.product-info,
.offer-info,
.list-prod-info,
.product-grid .product-card > h3,
.product-grid .product-card > p {
    min-width: 0 !important;
}

.prod-info,
.product-info,
.offer-info,
.list-prod-info {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 15px 18px 18px !important;
    text-align: right !important;
}

.prod-cat,
.product-category,
.product-sku {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    color: var(--product-card-gold-dark) !important;
    background: var(--product-card-soft) !important;
    border: 1px solid rgba(216, 160, 45, .20) !important;
    border-radius: 999px !important;
    font-size: .70rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.prod-name,
.product-name,
.offer-name,
.product-grid .product-card > h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: var(--product-card-ink) !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.product-pricing,
.prod-pricing,
.offer-pricing {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    min-height: 28px !important;
    margin-top: auto !important;
}

.prod-price,
.offer-price,
.price-current,
.product-price,
.product-grid .product-card > p {
    margin: 0 !important;
    color: var(--product-card-gold-dark) !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.prod-price-old,
.offer-price-old,
.price-old,
.product-price-old {
    color: var(--product-card-muted) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    text-decoration-thickness: 1px !important;
}

/* Make existing cart and wishlist controls a clear bottom action bar. */
.prod-actions,
.product-actions,
.offer-actions,
.list-prod-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 13px 0 0 !important;
    padding: 13px 18px 18px !important;
    border-top: 1px dashed var(--product-card-line) !important;
    opacity: 1 !important;
    transform: none !important;
}

.prod-action-cart,
.list-add-btn,
.add-to-cart,
.add-cart-btn,
.product-add-btn,
.product-actions .action-btn:not(.wish) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 13px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #d5a239, #b77b17) !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 16px rgba(183, 123, 23, .20) !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
}

.prod-action-cart:hover,
.list-add-btn:hover,
.add-to-cart:hover,
.add-cart-btn:hover,
.product-add-btn:hover,
.product-actions .action-btn:not(.wish):hover {
    background: linear-gradient(135deg, #bd821d, #98600d) !important;
}

.prod-action-wish,
.wishlist-btn,
.product-actions .action-btn.wish {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    color: var(--product-card-gold-dark) !important;
    background: var(--product-card-soft) !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

.prod-action-wish:hover,
.wishlist-btn:hover,
.product-actions .action-btn.wish:hover {
    color: #fff !important;
    background: var(--product-card-gold-dark) !important;
}

/* Cards that contain only an image, title and price (legacy category view). */
.product-grid .product-card {
    padding: 0 !important;
}

.product-grid .product-card > h3 {
    padding: 15px 18px 0 !important;
}

.product-grid .product-card > h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

.product-grid .product-card > p {
    padding: 7px 18px 18px !important;
}

@media (max-width: 640px) {
    .prod-card,
    .xt-card,
    .product-card,
    .offer-card,
    .list-prod-card {
        border-radius: 18px !important;
    }

    .prod-media,
    .product-media,
    .product-image,
    .offer-img,
    .list-prod-media,
    .product-grid .product-card > img:first-child {
        height: clamp(205px, 72vw, 280px) !important;
        padding: 12px !important;
    }

    .prod-info,
    .product-info,
    .offer-info,
    .list-prod-info {
        padding: 13px 14px 15px !important;
    }

    .prod-actions,
    .product-actions,
    .offer-actions,
    .list-prod-actions {
        padding: 11px 14px 14px !important;
    }
}