/* Shared storefront tokens load after legacy page styles so the shell stays consistent. */
:root {
    --primary-gold: #c7a554;
    --primary-gold-dark: #8b6c3a;
    --primary-gold-light: #efe3c6;
    --gold: #c7a554;
    --gold-dark: #8b6c3a;
    --gold-light: #efe3c6;
    --bg-cream: #f9f6f0;
    --dark-bg: #1f1b16;
    --text-primary: #393428;
    --text-secondary: #756b5c;
    --border-color: #e8dfd0;
    --store-ink: #42351f;
    --store-muted: #756b5c;
    --store-border: #e8dfd0;
    --store-surface: #fcfaf5;
    --store-danger: #a1323e;
    --store-shadow: 0 12px 36px #42351f0d;
}

/* Confirmation, logout, and destructive actions use the same layout. */
.store-confirm-modal .modal-dialog { max-width: 460px; }
.store-confirm-modal .store-confirm {
    padding: 0;
    border: 1px solid var(--store-border);
    border-radius: 24px;
    background: var(--store-surface);
    color: var(--store-ink);
    box-shadow: 0 24px 80px #241b1433;
    overflow: hidden;
}
.store-confirm .modal-header { padding: 24px 24px 0; border: 0; justify-content: space-between; gap: 16px; }
.store-confirm-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #e2d2ad; border-radius: 18px; background: #f3ead6; color: var(--gold-dark); font-size: 1.5rem; }
.store-confirm .btn-close { flex-shrink: 0; margin: 0; padding: 14px; border-radius: 50%; opacity: .65; }
.store-confirm .btn-close:hover { background-color: #efe7d8; opacity: 1; }
.store-confirm .modal-body { padding: 20px 24px 24px; }
.store-confirm-eyebrow { display: block; margin-bottom: 8px; color: var(--gold-dark); font-size: .78rem; }
.store-confirm h2 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.8; }
.store-confirm p { margin: 0; color: var(--store-muted); font-size: .94rem; line-height: 2; overflow-wrap: anywhere; }
.store-confirm .modal-footer { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--store-border); background: #fff; }
.store-confirm .modal-footer > .btn { flex: 1 1 140px; margin: 0; min-height: 48px; border-radius: 12px; padding: 12px; font-size: .9rem; font-weight: 700; }
.store-button-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--store-ink); --bs-btn-border-color: var(--store-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #614b28; --bs-btn-hover-border-color: #614b28; --bs-btn-active-color: #fff; --bs-btn-active-bg: #332817; --bs-btn-active-border-color: #332817; }
.store-button-secondary { --bs-btn-color: var(--store-ink); --bs-btn-bg: #fff; --bs-btn-border-color: #d9cdb6; --bs-btn-hover-color: var(--store-ink); --bs-btn-hover-bg: #f6efdf; --bs-btn-hover-border-color: #bca578; --bs-btn-active-color: var(--store-ink); --bs-btn-active-bg: #efe3c6; --bs-btn-active-border-color: #bca578; }
.store-button-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--store-danger); --bs-btn-border-color: var(--store-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #822733; --bs-btn-hover-border-color: #822733; --bs-btn-active-color: #fff; --bs-btn-active-bg: #70232d; --bs-btn-active-border-color: #70232d; }
.store-confirm-modal--danger .store-confirm-icon { background: #fbefec; border-color: #efd5d1; color: var(--store-danger); }

/* Menus and Bootstrap controls otherwise retain the framework's blue/grey defaults. */
.profile-dropdown-menu { padding: 8px; border: 1px solid var(--store-border); border-radius: 18px; box-shadow: var(--store-shadow); max-width: calc(100vw - 24px); }
.profile-dropdown-menu .dropdown-header { padding: 12px; color: var(--store-ink); white-space: normal; overflow-wrap: anywhere; }
.profile-dropdown-menu .dropdown-divider { border-color: var(--store-border); }
.profile-dropdown-menu .dropdown-item { padding: 10px 12px; min-height: 44px; border-radius: 10px; }
.profile-dropdown-menu .dropdown-item i { color: var(--gold-dark); }
.profile-dropdown-menu .dropdown-item:is(:hover, :focus, :active) { background: #f5eddc; color: var(--store-ink); }
.profile-dropdown-menu .logout-btn { color: var(--store-muted); }
.main-content .form-check-input:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); }
.main-content input:is([type="checkbox"], [type="radio"]) { accent-color: var(--gold-dark); }
.main-content :is(.form-control, .form-select, .form-input):focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px #c7a55426; }
.main-content .form-check-input:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px #c7a55426; }
.main-content .alert { border: 1px solid var(--store-border); border-inline-start-width: 4px; border-radius: 14px; font-size: .9rem; line-height: 1.9; }
.main-content .alert-danger { color: #8e2934; background: #fcf2ef; border-color: #ebd1cc; }
.main-content .alert-warning { color: #7b5b23; background: #fbf4e3; border-color: #e8d8b1; }
.main-content .alert-success { color: #28603e; background: #eff6ee; border-color: #ccdfcc; }
.main-content .alert-info { color: #615030; background: #f8f3e8; border-color: #e2d5ba; }
.main-content .alert-dismissible { padding-right: 1rem; padding-left: 3.25rem; }
.main-content .alert-dismissible .btn-close { right: auto; left: 0; }
.main-content .btn-close:focus, .store-confirm .btn:focus-visible { box-shadow: none; outline: 3px solid var(--gold-dark); outline-offset: 3px; }

/* Bring older account and information pages into the shop's cream/gold palette. */
.main-content :is(.profile-container, .profile-wrapper, .auth-container, .about-page, .contact-page, .dashboard-container) { background: var(--bg-cream); }
.main-content :is(.page-banner, .cta-card, .auth-card-header) { background: radial-gradient(ellipse at top right, #51422b, #211c16); }
.main-content .section-divider { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.main-content :is(.section-card, .profile-main-card, .auth-card, .contact-info-card, .contact-form-card, .feature-card) { border: 1px solid var(--store-border); border-radius: 20px; box-shadow: var(--store-shadow); }
.main-content :is(.profile-header, .phone-display, .help-section, .address-item) { background: var(--store-surface); border-color: var(--store-border); }
.main-content :is(.profile-container, .profile-wrapper, .auth-container, .contact-page) :is(.form-input, .otp-input, .resend-timer) { background-color: var(--store-surface); }
.main-content :is(.profile-container, .profile-wrapper) .btn-cancel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid #d9cdb6; background: #fff; color: var(--store-ink); border-radius: 12px; }
.main-content :is(.profile-container, .profile-wrapper) .btn-cancel:hover { background: #f6efdf; border-color: #bca578; transform: none; }
.main-content :is(.btn-save, .btn-login-submit, .btn-auth-submit, .btn-add-address, .contact-page .btn-submit) { background: var(--store-ink); color: #fff; min-height: 48px; }
.main-content :is(.btn-save, .btn-login-submit, .btn-auth-submit, .btn-add-address, .contact-page .btn-submit):hover { background: #614b28; color: #fff; }
.main-content :is(.switch-link, .otp-back-link) { color: var(--gold-dark); }
.main-content :is(.switch-link, .otp-back-link):hover { color: #6b4f1d; }
.main-content :is(.btn-save, .btn-login-submit, .btn-auth-submit):disabled { opacity: .6; cursor: not-allowed; transform: none; }
.profile-wrapper .info-row { gap: 16px; }
.profile-wrapper .info-row .value { min-width: 0; overflow-wrap: anywhere; text-align: end; }
.profile-wrapper .action-btn { background: var(--store-surface); border-color: var(--store-border); }
.profile-wrapper .address-text, .profile-container .address-text { overflow-wrap: anywhere; }
.profile-container .delete-icon { background: #fbefec; color: var(--store-danger); border: 1px solid #efd5d1; }
.profile-container .btn-delete { background: var(--store-danger); justify-content: center; }
.profile-container .btn-delete:hover { background: #822733; box-shadow: none; transform: none; }
.profile-container .address-content { text-align: right !important; }
.contact-details { min-width: 0; }
.contact-link, .contact-text { overflow-wrap: anywhere; }
.contact-link[dir="ltr"] { text-align: right; }

/* The wishlist empty state previously referenced styles only loaded by the catalog. */
.wishlist-page .empty-state { max-width: 720px; margin: 32px auto; padding: clamp(28px, 6vw, 56px) 24px; text-align: center; background: #fff; border: 1px solid var(--store-border); border-radius: 20px; box-shadow: var(--store-shadow); }
.wishlist-page .empty-icon-wrapper { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 24px; background: #f5eddc; color: var(--gold-dark); font-size: 2rem; }
.wishlist-page .empty-title { color: var(--store-ink); font-size: 1.25rem; line-height: 1.8; }
.wishlist-page .empty-text { color: var(--store-muted); font-size: .94rem; line-height: 2; margin: 12px 0 24px; }
.wishlist-page .btn-outline-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 1px solid #d9cdb6; border-radius: 12px; color: var(--store-ink); background: #fff; }
.wishlist-page .btn-outline-gold:hover { background: #f5eddc; border-color: var(--gold-dark); }

@media (max-width: 575.98px) {
    .store-confirm-modal .modal-dialog { margin-inline: 16px; }
    .store-confirm .modal-header { padding: 20px 20px 0; }
    .store-confirm .modal-body { padding: 16px 20px 20px; }
    .store-confirm .modal-footer { padding: 16px 20px; gap: 10px; }
    .store-confirm h2 { font-size: 1.12rem; }
    .main-content .profile-container .section-body { padding: 24px 16px; }
    .profile-wrapper .action-btn { padding: 18px 10px; }
    .profile-wrapper .d-flex.justify-content-between { flex-wrap: wrap; gap: 12px; }
    .profile-container .section-body > form { flex-wrap: wrap; }
    .profile-container .section-body > form > :is(button, a) { flex: 1 1 130px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .fade-in-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .page-banner::before { animation: none !important; }
    .store-confirm-modal.fade .modal-dialog { transition: none; }
}