/* ╔══════════════════════════════════════════════════════════════╗
   ║       YOLORA — LUXURY CSS PACK (YSL/Dior Dark Cinematic)     ║
   ║  High-End Cinematic Dark Edition · Gold Accents              ║
   ║  Pure CSS · Modular · Zero Dependencies · 60-30-10 System    ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
    /* ─── 60% BASE (Dominant Dark) ─── */
    --yl-black: #0A0A0A;
    --yl-charcoal: #121212;
    --yl-gray-800: #1a1a1a;
    --yl-gray-900: #222222;
    
    /* ─── 30% SECONDARY (Soft Off-White for readability) ─── */
    --yl-white: #F5F5F5;
    --yl-gray-300: #d4d4d4;
    --yl-gray-400: #a3a3a3;
    --yl-gray-500: #737373;
    
    /* ─── 10% ACCENT (Elegant Soft Gold) ─── */
    --yl-gold: #C9A96E;
    --yl-gold-light: #DFB87A;
    --yl-gold-dark: #A88D56;

    /* ─── Gradients & Effects ─── */
    --yl-gold-gradient: linear-gradient(135deg, #A88D56 0%, #DFB87A 50%, #A88D56 100%);
    --yl-gold-gradient-hover: linear-gradient(135deg, #8E7441 0%, #C9A96E 50%, #8E7441 100%);
    --yl-hero-overlay: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.85) 100%);
    
    /* ─── Shadows ─── */
    --yl-shadow-dark: 0 8px 30px rgba(0,0,0,0.6);
    --yl-shadow-gold: 0 4px 24px rgba(201,169,110,0.2);
    --yl-shadow-gold-hover: 0 8px 32px rgba(201,169,110,0.4);

    /* ─── Typography ─── */
    --yl-font-heading: 'Cinzel', 'Playfair Display', serif;
    --yl-font-body: 'Inter', 'Poppins', sans-serif;
    
    /* ─── Transitions ─── */
    --yl-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --yl-duration: 0.4s;
    --yl-duration-fast: 0.25s;
}

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL BASE STYLES & OVERRIDES (Cinematic Dark Mode)
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
    background-color: var(--yl-black) !important;
    color: var(--yl-white) !important;
    font-family: var(--yl-font-body) !important;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
}

/* Force dark backgrounds on all container sections to override light defaults */
.bg-white, .bg-gray-50, section.bg-luxury-offwhite, .bg-luxury-offwhite, aside .bg-white, .prose.bg-gray-50, footer {
    background-color: var(--yl-black) !important;
    color: var(--yl-white) !important;
    border-color: var(--yl-gray-800) !important;
}

/* Text coloring overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--yl-font-heading) !important;
    color: var(--yl-white) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

p, span, div {
    color: var(--yl-white);
}

.text-gray-900, .text-gray-800, .text-gray-700, .text-luxury-charcoal {
    color: var(--yl-white) !important;
}

.text-gray-600, .text-gray-500, .text-gray-400 {
    color: var(--yl-gray-400) !important;
}

/* Borders */
.border, .border-b, .border-t, .border-l, .border-r, .border-gray-200, .border-gray-300 {
    border-color: var(--yl-gray-800) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--yl-black); }
::-webkit-scrollbar-thumb { background: var(--yl-gray-800); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--yl-gold); }


/* ═══════════════════════════════════════════════════════════════
   2. TOP BAR & NAVBAR
   ═══════════════════════════════════════════════════════════════ */

/* Top Bar */
#top-bar, .bg-luxury-offwhite.text-luxury-charcoal.border-b {
    background: var(--yl-black) !important;
    border-bottom: 1px solid var(--yl-gray-800) !important;
    color: var(--yl-gray-400) !important;
    font-weight: 300;
    letter-spacing: 0.1em;
}
#top-bar a:hover { color: var(--yl-gold) !important; }

/* Navbar Matte Black */
#main-nav {
    background: rgba(10,10,10,0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--yl-gray-800) !important;
    transition: all var(--yl-duration) var(--yl-ease);
}
#main-nav.scrolled {
    background: var(--yl-black) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* Navbar Links */
.mega-menu-item > a {
    color: var(--yl-white) !important;
    font-family: var(--yl-font-body) !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    transition: color var(--yl-duration-fast) var(--yl-ease) !important;
    position: relative;
}
.mega-menu-item > a:hover { color: var(--yl-gold) !important; }

/* Elegant Hover Underline */
.mega-menu-item > a > span.absolute.bottom-0 {
    background: var(--yl-gold) !important;
    height: 1px !important;
}

/* Mega menu dropdown dark */
.hidden.lg\:block.border-b.border-gray-200.bg-white {
    background: var(--yl-black) !important;
    border-bottom: 1px solid var(--yl-gray-800) !important;
}
.mega-menu-item .shadow-2xl {
    border-top: 1px solid var(--yl-gold) !important;
    background: var(--yl-black) !important;
    box-shadow: var(--yl-shadow-dark) !important;
}
.mega-menu-tab.active-tab {
    border-left-color: var(--yl-gold) !important;
    color: var(--yl-gold) !important;
}

/* Logo specific font stylish text */
.logo-text {
    font-family: var(--yl-font-heading) !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    letter-spacing: 0.25em !important;
    color: var(--yl-white) !important;
    text-transform: uppercase;
}

/* Desktop Search */
#desktop-search-input {
    background: var(--yl-gray-900) !important;
    border: 1px solid var(--yl-gray-800) !important;
    border-radius: 0 !important;
    color: var(--yl-white) !important;
    font-family: var(--yl-font-body) !important;
}
#desktop-search-input:focus {
    border-color: var(--yl-gold) !important;
    box-shadow: none !important;
    outline: none;
}

/* Cart Badge */
#cart-count-badge {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
    border-radius: 50%;
    border: none;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   3. HERO SLIDER — Cinematic Dark
   ═══════════════════════════════════════════════════════════════ */
#hero-slider-wrapper { position: relative; }

/* Cinematic Overlay */
.hero-slide > div.absolute {
    background: var(--yl-hero-overlay) !important;
}

/* Hero Text */
.hero-slide h2 {
    font-family: var(--yl-font-heading) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 300 !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.hero-slide p {
    font-family: var(--yl-font-body) !important;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 13px !important;
    color: var(--yl-gray-300) !important;
}

/* Hero CTA Button */
.hero-slide a[href*="shop"],
.hero-slide a[href*="authenticity"],
.hero-slide a[href*="category"] {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
    border: 1px solid var(--yl-gold) !important;
    border-radius: 0 !important;
    font-family: var(--yl-font-body) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    padding: 14px 44px !important;
    box-shadow: var(--yl-shadow-gold);
    transition: all var(--yl-duration) var(--yl-ease) !important;
    text-transform: uppercase;
}
.hero-slide a:hover {
    background: transparent !important;
    color: var(--yl-gold) !important;
    box-shadow: none !important;
}

/* Arrows */
.hero-prev-btn, .hero-next-btn {
    background: transparent !important;
    border: 1px solid var(--yl-gray-500) !important;
    color: var(--yl-white) !important;
    border-radius: 50% !important;
    transition: all var(--yl-duration-fast) var(--yl-ease) !important;
}
.hero-prev-btn:hover, .hero-next-btn:hover {
    border-color: var(--yl-gold) !important;
    color: var(--yl-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. SECTION HEADINGS & UNDERLINES
   ═══════════════════════════════════════════════════════════════ */
section h2 {
    font-family: var(--yl-font-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400 !important;
}

/* Underline removal for minimal style, replaced by elegant spacing */
section h2::after { display: none !important; }

/* "View All" Links */
section a[href*="shop.php"].text-primary {
    color: var(--yl-gold) !important;
    font-family: var(--yl-font-body) !important;
    letter-spacing: 0.2em !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--yl-gold);
    padding-bottom: 2px;
}
section a[href*="shop.php"].text-primary:hover {
    color: var(--yl-white) !important;
    border-bottom-color: var(--yl-white);
}


/* ═══════════════════════════════════════════════════════════════
   5. PRODUCT CARDS & SEPHORA 4-COLUMN GRID
   ═══════════════════════════════════════════════════════════════ */

/* Sephora Grid Overrides (4 columns strict on desktop, 2 on mobile) */
.grid.grid-cols-2 {
    display: grid !important;
    gap: 24px !important;
}
@media (min-width: 1024px) {
    .grid.grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1023px) {
    .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
}

/* Base Card Style */
.grid .bg-white.rounded-lg.shadow-md,
.product-slide .bg-white.rounded-xl {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important; 
    transition: all var(--yl-duration) var(--yl-ease) !important;
    box-shadow: none !important;
    padding-bottom: 20px;
}
.grid .bg-white.rounded-lg.shadow-md:hover,
.product-slide .bg-white.rounded-xl:hover {
    transform: translateY(-4px);
}

/* Image Container */
.grid .bg-white.rounded-lg div.relative.bg-gray-100,
.product-slide div.relative.bg-gray-100 {
    background: transparent !important;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}

.grid .bg-white.rounded-lg img.object-cover,
.product-slide img.object-cover {
    transition: transform 1s var(--yl-ease) !important;
}
.grid .bg-white.rounded-lg:hover img.object-cover,
.product-slide:hover img.object-cover {
    transform: scale(1.05) !important;
}

/* Product names */
.product-name, h3.font-serif.font-bold {
    font-family: var(--yl-font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em;
    color: var(--yl-white) !important;
    font-size: 16px !important;
    text-transform: uppercase;
}

/* Prices */
.product-price, #displayPrice {
    font-family: var(--yl-font-body) !important;
    color: var(--yl-gold) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em;
}

/* Sephora Style Quick Look / Hover Overlay */
.group .absolute.bottom-4.right-4,
.product-slide .absolute.bottom-4.right-4 {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: all var(--yl-duration) var(--yl-ease) !important;
}
.group:hover .absolute.bottom-4.right-4,
.product-slide:hover .absolute.bottom-4.right-4 {
    opacity: 1;
    transform: translateY(0);
}

/* Overlay Buttons */
.group .absolute.bottom-4.right-4 button,
.group .absolute.bottom-4.right-4 a,
.product-slide button.bg-white.text-black {
    background: rgba(10,10,10,0.85) !important;
    backdrop-filter: blur(8px);
    color: var(--yl-white) !important;
    border: none !important;
    border-top: 1px solid var(--yl-gold) !important;
    border-radius: 0 !important;
    width: 100% !important;
    padding: 14px 0 !important;
    font-family: var(--yl-font-body) !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.group .absolute.bottom-4.right-4 button:hover,
.group .absolute.bottom-4.right-4 a:hover,
.product-slide button.bg-white.text-black:hover {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. BADGES (New, Sale, Sold Out)
   ═══════════════════════════════════════════════════════════════ */
/* Badges */
.bg-primary.text-white.text-\[10px\],
.bg-white\/90.backdrop-blur-sm.text-primary,
.bg-secondary {
    background: var(--yl-black) !important;
    color: var(--yl-gold) !important;
    border: 1px solid var(--yl-gold) !important;
    font-family: var(--yl-font-body) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. SEPHORA SIDEBAR FILTERS (shop.php)
   ═══════════════════════════════════════════════════════════════ */
aside .bg-white.p-6.rounded-lg {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 16px 0 0 !important;
}
aside h3.font-serif {
    font-family: var(--yl-font-body) !important;
    text-transform: uppercase;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    border-bottom: 2px solid var(--yl-gray-800) !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    color: var(--yl-white) !important;
}
aside ul li a {
    color: var(--yl-gray-400) !important;
    font-family: var(--yl-font-body) !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
aside ul li a:hover {
    color: var(--yl-white) !important;
}
aside ul li a.font-bold, aside ul li a.text-secondary, aside ul li a.text-primary {
    color: var(--yl-gold) !important;
    font-weight: 600 !important;
    border-left-color: var(--yl-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. MAIN BUTTONS — Gold CTAs
   ═══════════════════════════════════════════════════════════════ */

/* Standard Buttons (Add to Cart, Buy Now) */
button.bg-luxury-gold,
.bg-luxury-gold,
button.bg-primary.text-white,
button.bg-black.text-white {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
    border: 1px solid var(--yl-gold) !important;
    border-radius: 0 !important;
    font-family: var(--yl-font-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    padding: 12px 24px;
    transition: all var(--yl-duration) var(--yl-ease) !important;
}

button.bg-luxury-gold:hover,
.bg-luxury-gold:hover,
button.bg-primary.text-white:hover,
button.bg-black.text-white:hover {
    background: transparent !important;
    color: var(--yl-gold) !important;
    box-shadow: 0 0 20px rgba(201,169,110,0.2) !important;
}

/* Secondary / Outline buttons */
a.border-2.border-black {
    border: 1px solid var(--yl-white) !important;
    color: var(--yl-white) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
}
a.border-2.border-black:hover {
    border-color: var(--yl-gold) !important;
    color: var(--yl-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */
#desktopImageContainer { border-radius: 0; }

/* Thumbnails */
.thumb-item {
    border-radius: 0 !important;
    border-color: var(--yl-gray-800) !important;
}
.thumb-item:hover, .thumb-item.border-primary {
    border-color: var(--yl-gold) !important;
}

/* Title on detail page */
h1.font-serif.font-bold {
    color: var(--yl-white) !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Stars */
.text-yellow-400 { color: var(--yl-gold) !important; }

/* Sizes / Shades */
.variant-size-btn, .variant-shade-btn {
    border-radius: 0 !important;
    border-color: var(--yl-gray-800) !important;
    background: var(--yl-black) !important;
    color: var(--yl-gray-300) !important;
}
.variant-size-btn:hover, .variant-shade-btn:hover {
    border-color: var(--yl-gold) !important;
    color: var(--yl-gold) !important;
}
.variant-size-btn.bg-black, .variant-shade-btn.ring-primary {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
    border-color: var(--yl-gold) !important;
}

/* Quantity selector */
.border.border-orange-400, .border.border-gray-200 {
    border-color: var(--yl-gray-800) !important;
    border-radius: 0 !important;
}
.bg-orange-400, .bg-gray-100 {
    background: var(--yl-gray-900) !important;
    color: var(--yl-white) !important;
}
.bg-orange-400:hover, .bg-gray-100:hover {
    color: var(--yl-gold) !important;
}

/* Trust badges box */
.bg-green-50.border.border-green-100 {
    background: var(--yl-charcoal) !important;
    border: 1px solid var(--yl-gray-800) !important;
    border-radius: 0 !important;
}
.bg-green-50 .fa-shield-alt, .fa-truck.text-primary, .fa-globe-asia.text-primary {
    color: var(--yl-gold) !important;
}

/* Countdown */
#countdown-container {
    background: var(--yl-black) !important;
    border: 1px solid var(--yl-gold) !important;
    border-radius: 0 !important;
}
#countdown-container .text-red-600 {
    color: var(--yl-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   9. CATEGORIES & FEATURES
   ═══════════════════════════════════════════════════════════════ */
/* Circles */
section .aspect-square.rounded-full {
    border: 1px solid var(--yl-gray-800) !important;
    transition: border-color var(--yl-duration) var(--yl-ease);
}
section .group:hover .aspect-square.rounded-full {
    border-color: var(--yl-gold) !important;
}
/* Feature icons */
section .fa-shipping-fast, section .fa-check-circle, section .fa-lock, section .fa-headset {
    color: var(--yl-white) !important;
    transition: color var(--yl-duration) var(--yl-ease);
}
section .p-4:hover i { color: var(--yl-gold) !important; }


/* ═══════════════════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer {
    background: var(--yl-black) !important;
    border-top: 1px solid var(--yl-gray-800) !important;
}
footer h3, footer h4 {
    color: var(--yl-white) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
footer a {
    color: var(--yl-gray-400) !important;
}
footer a:hover {
    color: var(--yl-gold) !important;
}

/* Footes Icons */
footer .text-primary, footer .fa-map-marker-alt, footer .fa-phone {
    color: var(--yl-gold) !important;
}

/* Newsletter */
footer input[type="email"] {
    background: var(--yl-gray-900) !important;
    border: 1px solid var(--yl-gray-800) !important;
    border-radius: 0 !important;
    color: var(--yl-white) !important;
}
footer input[type="email"]:focus {
    border-color: var(--yl-gold) !important;
}
footer button.bg-primary {
    background: var(--yl-white) !important;
    color: var(--yl-black) !important;
    border-radius: 0 !important;
}
footer button.bg-primary:hover {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
}


/* ═══════════════════════════════════════════════════════════════
   11. FORMS & INPUTS
   ═══════════════════════════════════════════════════════════════ */
input, select, textarea {
    background: var(--yl-charcoal) !important;
    border: 1px solid var(--yl-gray-800) !important;
    color: var(--yl-white) !important;
    border-radius: 0 !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--yl-gold) !important;
    box-shadow: none !important;
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════
   12. MOBILE MENU & BOTTOM NAV
   ═══════════════════════════════════════════════════════════════ */
#mobile-menu { background: var(--yl-black) !important; }
.fixed.bottom-0 {
    background: var(--yl-black) !important;
    border-top: 1px solid var(--yl-gray-800) !important;
}
.fixed.bottom-0 a { color: var(--yl-gray-500) !important; }
.fixed.bottom-0 a:hover, .fixed.bottom-0 a.text-primary {
    color: var(--yl-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   13. ANIMATIONS & REVEALS
   ═══════════════════════════════════════════════════════════════ */
.lux-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--yl-ease), transform 1s var(--yl-ease);
}
.lux-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger delays */
.lux-delay-1 { transition-delay: 0.1s; }
.lux-delay-2 { transition-delay: 0.2s; }
.lux-delay-3 { transition-delay: 0.3s; }
.lux-delay-4 { transition-delay: 0.4s; }


/* ═══════════════════════════════════════════════════════════════
   14. TEXT UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-primary { color: var(--yl-gold) !important; }
.bg-primary { background-color: var(--yl-gold) !important; }
.border-primary { border-color: var(--yl-gold) !important; }


/* ═══════════════════════════════════════════════════════════════
   15. RESPONSIVE POLISH
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Mobile Logo Text Optimization */
    .logo-text { font-size: 20px !important; }
    
    #hero-slider-wrapper { height: 75vh !important; }
    .hero-slide h2 { font-size: 1.5rem !important; }
    
    .grid .bg-white.rounded-lg.shadow-md {
        border-width: 1px 0 !important; /* Cleaner mobile borders */
    }
}

/* ═══════════════════════════════════════════════════════════════
   16. CART PAGE OVERRIDES (cart.php)
   ═══════════════════════════════════════════════════════════════ */
.bg-luxury-offwhite.min-h-screen {
    background: var(--yl-black) !important;
}
/* Table wrapper & Summary Box */
.lg\:w-2\/3 .bg-white.rounded-lg,
.lg\:w-1\/3 .bg-white.rounded-lg {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid var(--yl-gray-800) !important;
    color: var(--yl-white) !important;
}
.lg\:w-1\/3 .bg-white.rounded-lg {
    border-color: var(--yl-gold) !important;
    background: #0d0d0d !important;
}
/* Table headers */
thead.bg-luxury-offwhite {
    background: transparent !important;
    border-bottom: 2px solid var(--yl-gray-800);
}
thead th { color: var(--yl-gray-400) !important; }

/* Text colors in Cart */
.text-luxury-charcoal, .text-gray-800 { color: var(--yl-white) !important; }
.divide-luxury-border > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--yl-gray-800) !important;
}
.bg-primary.text-white[href*="checkout"] {
    background: var(--yl-gold) !important;
    color: var(--yl-black) !important;
    border: 1px solid var(--yl-gold) !important;
    border-radius: 0 !important;
}
.bg-primary.text-white[href*="checkout"]:hover {
    background: transparent !important;
    color: var(--yl-gold) !important;
}