/* ELFER luxury UI polish — spacing, cards, badges, alignment */

:root {
    --lux-card-surface: #141414;
    --lux-card-radius: 10px;
    --lux-pad-card: 16px 20px;
    --lux-nav-gap: 22px;
}

@media (min-width: 1200px) {
    :root {
        --lux-nav-gap: 26px;
    }
}

/* —— 1. Header & hero —— */
.lux-nav {
    gap: var(--lux-nav-gap) !important;
}

.lux-category-btn {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

.lux-category-btn:hover {
    border-color: rgba(216, 173, 106, 0.35) !important;
    background: rgba(216, 173, 106, 0.08) !important;
}

.lux-service-item {
    gap: 14px !important;
    padding: 12px 16px !important;
}

.lux-service-item i {
    font-size: 28px !important;
    color: var(--lux-gold) !important;
    flex-shrink: 0;
}

.lux-service-item b {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--lux-text) !important;
}

.lux-service-item small {
    font-size: 10.8px !important;
    color: var(--lux-muted) !important;
    opacity: 0.88;
    margin-top: 3px !important;
}

/* —— 2. Product cards —— */
.tag-hot {
    background: linear-gradient(135deg, rgba(228, 193, 120, 0.96), rgba(166, 124, 61, 0.94)) !important;
    color: #1a1510 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    padding: 3px 9px !important;
    border-radius: 4px 0 10px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.elfer-luxury .perfume-card,
body.elfer-luxury .perfume-card {
    background: var(--lux-card-surface) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: var(--lux-card-radius) !important;
}

.perfume-card .img-wrap {
    aspect-ratio: 4 / 5 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)) !important;
}

.perfume-card .img-wrap img {
    object-fit: contain !important;
    object-position: center center !important;
    padding: 14px 12px !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
}

.perfume-card:hover .img-wrap img {
    transform: scale(1.02) !important;
}

.perfume-card-body {
    padding: 14px 16px 16px !important;
    text-align: start;
}

.perfume-card-brand {
    font-size: 10px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-gold) !important;
    margin: 0 0 4px !important;
}

.perfume-card-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    color: var(--lux-text) !important;
}

.perfume-card-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.perfume-card-rating .rating-stars {
    line-height: 1;
}

.perfume-card-rating-num {
    font-size: 11px;
    color: var(--lux-muted);
}

.perfume-card-price {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--lux-gold-2, var(--lux-gold)) !important;
    letter-spacing: 0.02em;
}

.perfume-card-price .price-current {
    font-size: inherit !important;
}

/* —— 3. Brands & rankings —— */
.elfer-luxury .brand-card,
body.elfer-luxury .brand-card {
    background: var(--lux-card-surface) !important;
    border-radius: var(--lux-card-radius) !important;
    border: 1px solid var(--lux-line) !important;
    padding: 20px 16px !important;
}

.brand-logo-circle--md {
    width: 72px !important;
    height: 72px !important;
}

.brand-logo-circle img {
    max-width: 78% !important;
    max-height: 78% !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
}

.brand-card h3 {
    margin-top: 12px !important;
}

.lux-rank {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-family: Georgia, "Playfair Display", "Times New Roman", serif !important;
    color: var(--lux-gold) !important;
    border: 1px solid rgba(216, 173, 106, 0.38) !important;
    border-radius: 50% !important;
    background: rgba(216, 173, 106, 0.06) !important;
}

.lux-brand-card .brand-logo-box,
.brands-page .brand-logo-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px;
    padding: 12px !important;
}

.lux-brand-card .brand-logo-box img,
.brands-page .brand-logo-box img {
    max-width: 80% !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* —— 5. Global surfaces —— */
.elfer-luxury {
    --lux-panel: #0a0a0a;
    --lux-panel-card: #141414;
}

.elfer-luxury .pd-card,
.elfer-luxury .pd-section,
.elfer-luxury .pd-side-card,
.elfer-luxury .lux-list-panel,
.elfer-luxury .lux-row-card {
    border-radius: var(--lux-card-radius) !important;
}

.elfer-luxury .lux-section .perfume-card,
.elfer-luxury .lux-section .brand-card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* Price display consistency */
.price-current {
    font-variant-numeric: tabular-nums;
}