/* Lavender / deep purple theme override — backgrounds only, text colors untouched */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-title, .card-title, .modal-title, .footer-logo,
.count-title, .author-name, .card-creator-number {
    font-family: 'Fraunces', Georgia, serif !important;
}

.bg-gradient {
    background: #F1EAFB !important;
    background: linear-gradient(to bottom, #F1EAFB 0%, #E7DAF7 100%) !important
}

.bg-gradient-2 {
    background: #F6F0FC !important;
    background: linear-gradient(to bottom, #F6F0FC 0%, #ECDFF8 100%) !important
}

.bg-gradient-primary {
    background: linear-gradient(111.06deg, #6C3FC5 37.17%, #4B237D 61.34%) !important
}

.bg-gray {
    background: #F5F0FC !important
}

.bg-dark, .bg-dark-transparent {
    background: #2C1654 !important
}

.bg-primary-dark {
    background-color: #4B237D !important
}

.bg-primary-darker {
    background-color: #2C1654 !important
}

.bg-primary-50 {
    background-color: #E7DAF7 !important
}

.btn-primary {
    background-color: #4B237D !important;
    border-color: #4B237D !important
}

.btn-primary:focus, .btn-primary:hover {
    background-color: #6C3FC5 !important;
    border-color: #6C3FC5 !important
}

.btn-dark {
    background-color: #2C1654 !important;
    border-color: #2C1654 !important
}

.btn-dark:focus, .btn-dark:hover {
    background-color: #4B237D !important;
    border-color: #4B237D !important
}

.bg-primary-dark .card, .bg-primary-dark .card-creator-v-wbg, .bg-primary-dark .custom-tooltip-dropdown .bg-dark-dim, .bg-primary-dark .header-main.has-fixed, .bg-primary-dark .menu-sub, .bg-primary-dark .header-menu {
    background-color: #2C1654 !important
}

.bg-primary-dark .card-generic {
    background-color: #4B237D !important
}

.bg-gradient-primary .card-creator-v-wbg, .bg-gradient-primary .header-main.has-fixed, .bg-gradient-primary .menu-sub, .bg-gradient-primary .header-menu {
    background-color: #2C1654 !important
}

.bg-gradient-primary .bg-primary-50 {
    background-color: #4B237D !important
}

/* Page chrome — replace plain white page/body/card backgrounds with lavender tints */

:root {
    --bs-body-bg: #F5EFFC;
}

body {
    background-color: #F5EFFC !important
}

.header-main, .header-main.has-fixed {
    background: #FBF8FE !important
}

.card, .card-generic, .card-creator-s1, .card-credit, .dropdown-menu, .list-group-item, .custom-tooltip-dropdown {
    background-color: #FBF8FE !important
}

.modal-content {
    background-color: #FBF8FE !important
}

.form-control, .form-select, .input-group-text {
    background-color: #FBF8FE !important
}

.bg-white, .bg-white-slim {
    background-color: #FBF8FE !important
}

.footer-section {
    background-color: #2C1654 !important
}

.bg-dark-dim {
    background-color: #E7DAF7 !important
}

/* ==========================================================================
   Modern marketplace redesign — shape, accent color, motion, typography.
   Gold accent: #C9A24B (paired with the lavender/deep-purple palette above).
   !important is required on classes that are redefined in page-local
   <style> blocks (art-card, bqQzQl, card-small-text, custom-form-control,
   footer link font-size) since those blocks render after this stylesheet
   in document order and would otherwise win the cascade.
   ========================================================================== */

/* -- Card shape unification: rounded, soft elevation, hover lift -- */

.art-card,
.card,
.card-generic,
.card-creator-s1,
.bqQzQl {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(44, 22, 84, 0.1) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.art-card:hover,
.card:hover,
.card-creator-s1:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(44, 22, 84, 0.18) !important;
}

.art-card .card-img-top,
.card-img-top {
    border-radius: 14px 14px 0 0 !important;
}

/* -- Gold accent -- */

.nav-tabs-s1 .nav-link::after {
    background-color: #C9A24B !important;
    height: 3px !important;
}

.badge.bg-warning {
    background-color: #C9A24B !important;
    color: #2C1654 !important;
}

a:hover {
    color: #C9A24B;
}

.footer-section a:hover {
    color: #C9A24B !important;
}

/* -- Buttons: pill CTAs with hover lift -- */

.btn-dark,
.btn-primary {
    border-radius: 999px !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.btn-dark:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(44, 22, 84, 0.25);
}

/* -- Typography breathing room -- */

.footer-section a,
.footer-section .footer-copy-text {
    font-size: 13px !important;
    line-height: 1.8 !important;
}

.card-author-by {
    font-size: .8rem;
    letter-spacing: .03em;
}

.card-small-text {
    font-size: 13px !important;
    letter-spacing: 1px !important;
}

.hero-title {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
}

/* -- Forms: shared radius + accent focus ring -- */

.form-control,
.form-select {
    border-radius: 10px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #C9A24B !important;
    box-shadow: 0 0 0 .2rem rgba(201, 162, 75, 0.25) !important;
}

.custom-form-control {
    border-radius: 10px 10px 0 0 !important;
}

.custom-form-control:focus {
    border-bottom-color: #C9A24B !important;
    box-shadow: 0 2px 0 0 #C9A24B !important;
}

/* -- Nav & footer polish -- */

.header-main {
    box-shadow: 0 2px 16px rgba(44, 22, 84, 0.08) !important;
}

.footer-section {
    position: relative;
    border-top: none !important;
}

.footer-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A24B, transparent);
}

/* -- Nav icon buttons: replace the template's plain white circles -- */

.icon-btn,
.menu-toggler {
    background-color: #EFE5FA !important;
    color: #2C1654 !important;
    box-shadow: 0 1px 6px rgba(44, 22, 84, 0.12) !important;
    transition: transform .2s ease, background-color .2s ease !important;
}

.icon-btn:hover,
.menu-toggler:hover {
    background-color: #C9A24B !important;
    color: #2C1654 !important;
    transform: translateY(-2px);
}