/**
 * Atelier Button System
 * Aísla todos los controles interactivos del hover azul de Kadence / WordPress
 * y unifica el lenguaje visual dorado + oscuro de 2D Custom Apparel.
 */

:root {
    --sf-night: #060a12;
    --sf-surface: #0f1828;
    --sf-chrome: #eef4ff;
    --sf-primary: #ff4d00;
    --sf-primary-mid: #ff6a1a;
    --sf-primary-bright: #ffb000;
    --sf-primary-deep: #e31b23;
    --sf-secondary: #22e890;
    --sf-secondary-bright: #00e878;
    --sf-secondary-deep: #009650;
    --sf-ember: var(--sf-primary);
    --sf-flame: var(--sf-primary-bright);
    --sf-crimson: var(--sf-primary-deep);
    --sf-electric: var(--sf-secondary-bright);
    --sf-neon: var(--sf-secondary);
    --sf-neon-deep: var(--sf-secondary-deep);
    --color-alabaster: var(--sf-night);
    --color-slate-dark: #0a101c;
    --color-slate-light: #9aa8bc;
    --color-gold: var(--sf-primary);
    --color-gold-dark: var(--sf-primary-bright);
    --radius-button: 6px;
}

/* Perímetro de la experiencia Atelier (SPA + ERP) */
#atelier-viewport,
#atelier-checkout-view,
#glass-cart,
#atelier-auth,
#atelier-dashboard,
#atelier-contact,
#atelier-social,
#atelier-terms,
#atelier-privacy,
#atelier-claims,
#atelier-about,
#atelier-wizard,
#atelier-wholesale,
#atelier-static-pages,
#product-detail-modal,
#the-lab,
#atelier-admin-root,
#atelier-admin-lockscreen,
#atelier-admin-vault,
#atelier-expanded-view {
    --wp-admin-theme-color: var(--color-gold);
    --wp-admin-theme-color-darker-10: var(--color-gold-dark);
}

#atelier-dialog-root {
    --color-alabaster: #0b1524;
    --color-slate-dark: #121c2c;
    --color-slate-light: #b8c0cc;
    --color-gold: #ff4d00;
    --color-gold-dark: #ffb000;
    --wp-admin-theme-color: var(--color-gold);
    --wp-admin-theme-color-darker-10: var(--color-gold-dark);
}

#atelier-dialog-root button {
    -webkit-appearance: none;
    appearance: none;
    font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-decoration: none !important;
    box-shadow: none;
}

#atelier-dialog-root button:hover,
#atelier-dialog-root button:focus,
#atelier-dialog-root button:focus-visible {
    outline: none;
    text-decoration: none !important;
}

#atelier-viewport button,
#atelier-viewport input[type="button"],
#atelier-viewport input[type="submit"],
#atelier-viewport input[type="reset"],
#atelier-checkout-view button,
#atelier-checkout-view input[type="button"],
#atelier-checkout-view input[type="submit"],
#glass-cart button,
#glass-cart input[type="button"],
#glass-cart input[type="submit"],
#atelier-auth button,
#atelier-auth input[type="button"],
#atelier-auth input[type="submit"],
#atelier-dashboard button,
#atelier-dashboard input[type="button"],
#atelier-dashboard input[type="submit"],
#atelier-contact button,
#atelier-contact input[type="button"],
#atelier-contact input[type="submit"],
#atelier-social button,
#atelier-social input[type="button"],
#atelier-social input[type="submit"],
#atelier-terms button,
#atelier-privacy button,
#atelier-claims button,
#atelier-about button,
#atelier-wizard button,
#atelier-wizard input[type="button"],
#atelier-wizard input[type="submit"],
#atelier-wholesale button,
#atelier-wholesale input[type="button"],
#atelier-wholesale input[type="submit"],
#atelier-static-pages button,
#product-detail-modal button,
#the-lab button,
#atelier-admin-root button,
#atelier-admin-root input[type="button"],
#atelier-admin-root input[type="submit"],
#atelier-admin-lockscreen button,
#atelier-admin-lockscreen input[type="submit"],
#atelier-admin-vault button,
#atelier-admin-vault input[type="button"],
#atelier-admin-vault input[type="submit"],
#atelier-expanded-view button,
#atelier-expanded-view input[type="button"],
#atelier-expanded-view input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-decoration: none !important;
    box-shadow: none;
}

/* Neutraliza hover/focus heredado del tema (Kadence suele forzar azul aquí) */
#atelier-viewport button:hover,
#atelier-viewport button:focus,
#atelier-viewport button:focus-visible,
#atelier-viewport input[type="button"]:hover,
#atelier-viewport input[type="submit"]:hover,
#atelier-checkout-view button:hover,
#atelier-checkout-view button:focus,
#atelier-checkout-view button:focus-visible,
#atelier-checkout-view input[type="submit"]:hover,
#glass-cart button:hover,
#glass-cart button:focus,
#atelier-auth button:hover,
#atelier-auth button:focus,
#atelier-dashboard button:hover,
#atelier-dashboard button:focus,
#atelier-contact button:hover,
#atelier-contact button:focus,
#atelier-social button:hover,
#atelier-social button:focus,
#atelier-terms button:hover,
#atelier-terms button:focus,
#atelier-privacy button:hover,
#atelier-privacy button:focus,
#atelier-claims button:hover,
#atelier-claims button:focus,
#atelier-about button:hover,
#atelier-about button:focus,
#atelier-wizard button:hover,
#atelier-wizard button:focus,
#atelier-wholesale button:hover,
#atelier-wholesale button:focus,
#atelier-static-pages button:hover,
#product-detail-modal button:hover,
#the-lab button:hover,
#atelier-admin-root button:hover,
#atelier-admin-root button:focus,
#atelier-admin-lockscreen button:hover,
#atelier-admin-vault button:hover,
#atelier-expanded-view button:hover {
    outline: none;
    text-decoration: none !important;
}

#atelier-viewport .wp-block-button__link:hover,
#atelier-checkout-view .wp-block-button__link:hover,
#atelier-admin-root .wp-block-button__link:hover {
    background-color: var(--color-gold) !important;
    color: #ffffff !important;
}

/* --- Botón premium principal --- */
#atelier-viewport .atelier-btn-premium:hover:not(:disabled),
#atelier-checkout-view .atelier-btn-premium:hover:not(:disabled),
#glass-cart .atelier-btn-premium:hover:not(:disabled),
#atelier-auth .atelier-btn-premium:hover:not(:disabled),
#atelier-dashboard .atelier-btn-premium:hover:not(:disabled),
#atelier-wizard .atelier-btn-premium:hover:not(:disabled),
#atelier-wholesale .atelier-btn-premium:hover:not(:disabled),
#product-detail-modal .atelier-btn-premium:hover:not(:disabled),
#the-lab .atelier-btn-premium:hover:not(:disabled),
#atelier-admin-root .atelier-btn-premium:hover:not(:disabled),
#atelier-admin-lockscreen .atelier-btn-premium:hover:not(:disabled),
#atelier-admin-vault .atelier-btn-premium:hover:not(:disabled),
#atelier-expanded-view .atelier-btn-premium:hover:not(:disabled),
#atelier-viewport .atelier-btn-premium.is-active:hover:not(:disabled) {
    background: var(--color-gold) !important;
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.32) !important;
}

/* --- Atelier Dialog (Save design, confirms, alerts) — light card only --- */
#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--primary:hover,
#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--primary:focus-visible {
    background: var(--color-gold) !important;
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.32) !important;
}

#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--ghost:hover,
#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--ghost:focus-visible {
    background: rgba(18, 18, 18, 0.04) !important;
    background-color: rgba(18, 18, 18, 0.04) !important;
    border-color: rgba(18, 18, 18, 0.14) !important;
    color: var(--color-slate-dark) !important;
    box-shadow: none !important;
}

#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--danger:hover,
#atelier-dialog-root .atelier-dialog-card:not(.is-broadcast) .atelier-dialog-btn--danger:focus-visible {
    background: #b3261e !important;
    background-color: #b3261e !important;
    border-color: #b3261e !important;
    color: #ffffff !important;
}

/* Broadcast dialog (dashboard sugerencias, etc.) — avoid gradient↔solid flicker */
#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn {
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--ghost:hover,
#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--ghost:focus-visible {
    background: rgba(255, 77, 0, 0.12) !important;
    background-color: rgba(255, 77, 0, 0.12) !important;
    border-color: rgba(255, 176, 0, 0.55) !important;
    color: var(--sf-chrome, #eef4ff) !important;
    box-shadow: none !important;
}

#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--primary:hover,
#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--primary:focus-visible,
#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--danger:hover,
#atelier-dialog-root .atelier-dialog-card.is-broadcast .atelier-dialog-btn--danger:focus-visible {
    background: linear-gradient(135deg, var(--sf-primary-mid, #ff6a1a) 0%, #ff8533 100%) !important;
    background-color: var(--sf-primary-mid, #ff6a1a) !important;
    border-color: rgba(255, 140, 60, 0.65) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(255, 77, 0, 0.38) !important;
    filter: brightness(1.06);
}

#atelier-viewport .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-checkout-view .atelier-btn-premium:focus-visible:not(:disabled),
#glass-cart .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-auth .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-dashboard .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-wizard .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-wholesale .atelier-btn-premium:focus-visible:not(:disabled),
#product-detail-modal .atelier-btn-premium:focus-visible:not(:disabled),
#the-lab .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-admin-root .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-admin-lockscreen .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-admin-vault .atelier-btn-premium:focus-visible:not(:disabled),
#atelier-expanded-view .atelier-btn-premium:focus-visible:not(:disabled) {
    outline: 2px solid rgba(255, 77, 0, 0.45) !important;
    outline-offset: 2px;
}

/* --- Botones compactos del ERP --- */
#atelier-admin-root .admin-tab-btn-compact:hover:not(:disabled),
#atelier-admin-vault .admin-tab-btn-compact:hover:not(:disabled),
#atelier-expanded-view .admin-tab-btn-compact:hover:not(:disabled) {
    background-color: var(--color-gold-dark) !important;
    background: var(--color-gold-dark) !important;
    color: #ffffff !important;
    border-color: var(--color-gold-dark) !important;
}

/* --- Botones ghost / secundarios --- */
#atelier-viewport .btn-ghost:hover,
#atelier-checkout-view .btn-ghost:hover,
#atelier-wizard .btn-ghost:hover,
#atelier-auth .btn-ghost:hover,
#atelier-dashboard .btn-ghost:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-slate-dark) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* --- Toolbar, triggers y acciones auxiliares --- */
#atelier-viewport .btn-service-action,
#atelier-wizard .btn-service-action {
    background: var(--color-slate-dark) !important;
    background-color: var(--color-slate-dark) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-button);
    padding: 10px 18px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#atelier-viewport .btn-service-action:hover,
#atelier-wizard .btn-service-action:hover {
    background: var(--color-gold) !important;
    background-color: var(--color-gold) !important;
    color: #ffffff !important;
    border-color: var(--color-gold) !important;
    box-shadow: 0 8px 24px rgba(255, 77, 0, 0.28) !important;
}

#atelier-viewport .btn-service-action:hover,
#atelier-wizard .btn-service-action:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--color-slate-dark) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

#atelier-viewport .menu-close-btn:hover,
#atelier-viewport .menu-close-btn:focus,
#atelier-viewport .menu-close-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-chrome, #eef4ff) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#sf-intro .sf-intro-skip:hover,
#sf-intro .sf-intro-skip:focus,
#sf-intro .sf-intro-skip:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--sf-chrome, #eef4ff) !important;
}

#sf-intro .sf-intro-start.product-buy-now-btn:hover,
#sf-intro .sf-intro-start.product-buy-now-btn:focus,
#sf-intro .sf-intro-start.product-buy-now-btn:focus-visible {
    text-decoration: none !important;
}

#atelier-viewport .cart-close-btn:hover,
#atelier-viewport .detail-close-btn:hover,
#atelier-viewport .lab-close-btn:hover,
#atelier-viewport .dashboard-logout-btn:hover,
#atelier-wholesale .wholesale-close-btn:hover,
#atelier-static-pages .static-pages-close:hover,
#glass-cart .cart-close-btn:hover,
#product-detail-modal .detail-close-btn:hover,
#the-lab .lab-close-btn:hover,
#the-lab .lab-logo-library-select:hover,
#the-lab .lab-logo-library-select:focus,
#the-lab .lab-logo-library-select:focus-visible,
#the-lab .lab-logo-library-remove:hover,
#the-lab .lab-logo-library-remove:focus,
#the-lab .lab-logo-library-remove:focus-visible,
#atelier-dashboard .dashboard-logout-btn:hover,
#atelier-admin-root .admin-nav-logout-btn:hover,
#atelier-admin-lockscreen .lockscreen-logout-btn:hover,
#atelier-admin-lockscreen .lockscreen-return-link-btn:hover,
#atelier-admin-lockscreen .otp-resend-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--color-slate-dark) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

#atelier-checkout-view .btn-return-link:hover {
    background: transparent !important;
    color: var(--color-gold-dark) !important;
}

/* Auth overlay — dark broadcast shell (no light Kadence hover) */
#atelier-auth .auth-close-btn:hover,
#atelier-auth .auth-close-btn:focus,
#atelier-auth .auth-close-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-chrome, #eef4ff) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#atelier-contact .contact-close-btn:hover,
#atelier-contact .contact-close-btn:focus,
#atelier-contact .contact-close-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-chrome, #eef4ff) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#atelier-social .social-close-btn:hover,
#atelier-social .social-close-btn:focus,
#atelier-social .social-close-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-chrome, #eef4ff) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.legal-overlay .legal-close-btn:hover,
.legal-overlay .legal-close-btn:focus,
.legal-overlay .legal-close-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-chrome, #eef4ff) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.legal-overlay .legal-lang-chip:hover,
.legal-overlay .legal-lang-chip:focus,
.legal-overlay .legal-lang-chip:focus-visible,
.legal-overlay .legal-lang-chip.is-active {
    border-color: var(--sf-primary-bright, #ffb000) !important;
    background: rgba(255, 176, 0, 0.12) !important;
    color: var(--sf-primary-bright, #ffb000) !important;
    box-shadow: none !important;
}

.legal-overlay .legal-cta-secondary:hover,
.legal-overlay .legal-cta-secondary:focus,
.legal-overlay .legal-cta-secondary:focus-visible {
    border-color: var(--sf-primary-bright, #ffb000) !important;
    color: var(--sf-primary-bright, #ffb000) !important;
    background: rgba(255, 176, 0, 0.12) !important;
    box-shadow: none !important;
}

.legal-overlay .product-buy-now-btn:hover,
.legal-overlay .product-buy-now-btn:focus,
.legal-overlay .product-buy-now-btn:focus-visible {
    /* keep green buy CTA; neutralize Kadence blue */
    text-decoration: none !important;
}

#atelier-social .social-network-card:hover,
#atelier-social .social-network-card:focus,
#atelier-social .social-network-card:focus-visible {
    background:
        linear-gradient(165deg, rgba(255, 77, 0, 0.07) 0%, transparent 40%),
        linear-gradient(180deg, rgba(12, 20, 34, 0.98) 0%, rgba(4, 8, 14, 0.99) 100%) !important;
    background-color: rgba(12, 20, 34, 0.98) !important;
    color: inherit !important;
    border-color: rgba(255, 176, 0, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 18px 44px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 176, 0, 0.1) !important;
}

#atelier-social .social-network-card:hover .social-network-cta,
#atelier-social .social-network-card:focus .social-network-cta,
#atelier-social .social-network-card:focus-visible .social-network-cta {
    background-image: linear-gradient(135deg, #0066ff 0%, #2ab5ff 50%, #00e5ff 100%) !important;
    background-color: transparent !important;
    color: #041018 !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 28px rgba(0, 102, 255, 0.42),
        0 0 20px rgba(0, 229, 255, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.28) !important;
}

#atelier-contact .contact-submit-btn.product-buy-now-btn:hover:not(:disabled),
#atelier-contact .contact-submit-btn.product-buy-now-btn:focus:not(:disabled),
#atelier-contact .contact-submit-btn.product-buy-now-btn:focus-visible:not(:disabled),
#atelier-contact .contact-cta-primary.product-buy-now-btn:hover,
#atelier-contact .contact-cta-primary.product-buy-now-btn:focus,
#atelier-contact .contact-cta-primary.product-buy-now-btn:focus-visible {
    background-image: linear-gradient(135deg, var(--sf-secondary-deep) 0%, var(--sf-secondary) 50%, var(--sf-secondary-bright) 100%) !important;
    background-color: transparent !important;
    color: #041018 !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 28px rgba(0, 150, 80, 0.42),
        0 0 20px rgba(0, 232, 120, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.28) !important;
}

#atelier-contact .contact-topic-chip:hover,
#atelier-contact .contact-topic-chip:focus,
#atelier-contact .contact-topic-chip:focus-visible {
    background: rgba(255, 176, 0, 0.12) !important;
    background-color: rgba(255, 176, 0, 0.12) !important;
    color: var(--sf-primary-bright, #ffb000) !important;
    border-color: var(--sf-primary-bright, #ffb000) !important;
    box-shadow: none !important;
}

#atelier-contact .contact-cta-secondary:hover,
#atelier-contact .contact-cta-secondary:focus,
#atelier-contact .contact-cta-secondary:focus-visible {
    background: rgba(255, 176, 0, 0.12) !important;
    background-color: rgba(255, 176, 0, 0.12) !important;
    color: var(--sf-primary-bright, #ffb000) !important;
    border-color: var(--sf-primary-bright, #ffb000) !important;
    box-shadow: none !important;
}

#atelier-auth .product-quick-add-btn:hover:not(:disabled),
#atelier-auth .product-quick-add-btn:focus:not(:disabled),
#atelier-auth .product-quick-add-btn:focus-visible:not(:disabled) {
    background-image: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-mid) 45%, var(--sf-primary-deep) 100%) !important;
    background-color: transparent !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow:
        0 12px 36px rgba(255, 77, 0, 0.48),
        0 0 22px rgba(34, 232, 144, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Logo library rows — neutral hover (Kadence forces WP blue on nested buttons) */
#the-lab .lab-logo-library-select:hover,
#the-lab .lab-logo-library-select:focus,
#the-lab .lab-logo-library-select:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

#the-lab .lab-logo-library-remove:hover,
#the-lab .lab-logo-library-remove:focus,
#the-lab .lab-logo-library-remove:focus-visible {
    background: rgba(179, 38, 30, 0.06) !important;
    background-color: rgba(179, 38, 30, 0.06) !important;
    border-color: rgba(179, 38, 30, 0.35) !important;
    color: #b3261e !important;
    box-shadow: none !important;
}

/* --- Enlaces estilo botón del checkout --- */
#atelier-checkout-view #btn-checkout-next.atelier-btn-premium:hover:not(:disabled),
#atelier-checkout-view #btn-checkout-prev:hover {
    background-image: none !important;
}

#atelier-checkout-view #btn-checkout-next.product-quick-add-btn:hover:not(:disabled) {
    background-image: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-mid) 45%, var(--sf-primary-deep) 100%) !important;
}

#glass-cart .cart-checkout-btn.product-buy-now-btn:hover:not(:disabled),
#glass-cart .cart-checkout-btn.product-buy-now-btn:focus:not(:disabled),
#glass-cart .cart-checkout-btn.product-buy-now-btn:focus-visible:not(:disabled) {
    background-image: linear-gradient(135deg, var(--sf-secondary-deep) 0%, var(--sf-secondary) 50%, var(--sf-secondary-bright) 100%) !important;
    background-color: transparent !important;
    color: #041018 !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 28px rgba(0, 150, 80, 0.42),
        0 0 20px rgba(0, 232, 120, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.28) !important;
}