style.css

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Assistant:wght@300;400;600;700&display=swap');

:root {
    --deep-cocoa: #3E2723;
    --milk-chocolate: #795548;
    --creamy-white: #FDFBF7;
    --zesty-orange: #FF9800;
    --mint-leaf: #009688;
    --luxury-gold: #C5A063;
}

body {
    font-family: 'Assistant', sans-serif;
}

.font-dancing {
    font-family: 'Dancing Script', cursive;
}

.font-assistant {
    font-family: 'Assistant', sans-serif;
}

.bg-deep-cocoa {
    background-color: var(--deep-cocoa);
}

.bg-milk-chocolate {
    background-color: var(--milk-chocolate);
}

.bg-creamy-white {
    background-color: var(--creamy-white);
}

.bg-zesty-orange {
    background-color: var(--zesty-orange);
}

.bg-mint-leaf {
    background-color: var(--mint-leaf);
}

.bg-luxury-gold {
    background-color: var(--luxury-gold);
}

.text-deep-cocoa {
    color: var(--deep-cocoa);
}

.text-milk-chocolate {
    color: var(--milk-chocolate);
}

.text-creamy-white {
    color: var(--creamy-white);
}

.text-zesty-orange {
    color: var(--zesty-orange);
}

.text-mint-leaf {
    color: var(--mint-leaf);
}
.text-luxury-gold {
    color: var(--luxury-gold);
}

/* Additional Luxury Details */
.luxury-stars {
    display: inline-flex;
    gap: 2px;
}

.luxury-stars svg {
    filter: drop-shadow(0 0 2px var(--luxury-gold));
}

.btn-luxury {
    background: linear-gradient(135deg, var(--luxury-gold) 0%, var(--milk-chocolate) 100%);
    color: white;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(193,160,99,0.4);
    transition: all 0.3s ease;
}

.btn-luxury:hover {
    box-shadow: 0 6px 20px rgba(193,160,99,0.6);
    transform: translateY(-2px);
}
.border-deep-cocoa {
    border-color: var(--deep-cocoa);
}

.border-luxury-gold {
    border-color: var(--luxury-gold);
}

.product-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.quick-add-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .quick-add-btn {
    opacity: 1;
}