@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Cormorant:wght@300;400;500;600;700&display=swap');
@import url('css/desktop-theme.css');

:root {
    --heading-font-family: 'Playfair Display', 'Georgia', serif;
    --body-font-family: 'Cormorant', 'Times New Roman', serif;
    --brand-font-family: var(--heading-font-family);
    --bs-font-sans-serif: var(--body-font-family);
    --bs-body-font-family: var(--body-font-family);
    --tw-font-sans: var(--body-font-family);
    --tw-font-body: var(--body-font-family);
    --tw-font-heading: var(--heading-font-family);
    --site-header-spacer-height-desktop: 160px;
    --site-header-spacer-height-tablet: 140px;
    --site-header-spacer-height-mobile: 120px;
}

html,
body {
    font-size: 16px;
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

@media (min-width: 992px) {
    .dt-store-page {
        background: var(--dt-surface-page, #131921) !important;
    }

    .dt-store-panel {
        background-color: var(--dt-surface-page, #131921) !important;
    }

    .dt-store-panel-inner {
        background-color: var(--dt-surface-card, #232323) !important;
    }

    .dt-store-search-input {
        background-color: var(--dt-field-bg, #232323) !important;
        color: var(--dt-field-text, #ffffff);
        border-color: var(--dt-field-border, rgba(255, 255, 255, 0.12));
    }

    .dt-store-search-input::placeholder {
        color: var(--dt-field-placeholder, #cbd5e1);
    }

    .dt-store-page .product-media-video-badge {
        background: var(--dt-overlay, rgba(0, 0, 0, 0.65));
    }

    .designer-order-table {
        border-collapse: collapse;
        width: 100%;
    }

    .designer-order-table th,
    .designer-order-table td {
        padding: 10px;
        background: var(--dt-surface-card-muted, #f2f3f7);
        border-bottom: 1px solid var(--dt-divider-subtle);
    }

    .designer-order-table tr:last-child td {
        border-bottom: none;
    }

    #order-detail-modal-card {
        border: 1px solid var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
        box-shadow: var(--dt-shadow-card-soft, 0 10px 24px var(--dt-shadow-color, rgba(0, 0, 0, 0.35)));
    }

    :root[data-theme="light"] #order-detail-modal-card,
    body[data-theme="light"] #order-detail-modal-card {
        border-color: var(--dt-border-subtle, #e5e7eb);
        box-shadow: 0 6px 18px var(--dt-shadow-color, rgba(15, 23, 42, 0.18));
    }

    .designer-order-shipping-input {
        height: 40px;
        width: 100%;
        border-radius: 5px;
        background: var(--dt-field-bg, #232323);
        border: 1px solid var(--dt-field-border, rgba(255, 255, 255, 0.12));
        color: var(--dt-field-text, #ffffff);
        padding: 0 12px;
        outline: none;
    }

    .designer-order-shipping-input::placeholder {
        color: var(--dt-field-placeholder, #cbd5e1);
    }

    .designer-order-shipping-input:focus {
        border-color: var(--dt-field-focus-border, #e2be74);
        box-shadow: 0 0 0 2px var(--dt-field-focus-ring, rgba(226, 190, 116, 0.6));
    }

    .designer-page {
        background: var(--dt-surface-page, #131921) !important;
        color: var(--dt-text-primary, #ffffff);
    }

    .designer-page__content {
        background: var(--dt-surface-page, #131921);
    }

    .designer-card {
        background: var(--dt-surface-card, #232323);
        border: 1px solid var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
        border-radius: var(--dt-radius-card, 12px);
        box-shadow: var(--dt-shadow-card-soft);
        color: var(--dt-text-primary, #ffffff);
    }

    .designer-card--muted {
        background: var(--dt-surface-card-muted, #f2f3f7);
    }

    .designer-card__subtitle {
        font-size: 12px;
        color: var(--dt-text-accent, #e2be74);
    }

    .designer-text-muted {
        color: var(--dt-text-muted, #cbd5e1);
    }

    .designer-table {
        width: 100%;
        border-radius: var(--dt-radius-card, 12px);
        border: 1px solid var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
        overflow: hidden;
        background: var(--dt-surface-card, #232323);
    }

    .designer-table th {
        padding: 15px;
        background: var(--dt-surface-card-muted, #f2f3f7);
        color: var(--dt-text-secondary, #e5e7eb);
        border-bottom: 1px solid var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
    }

    .designer-table td {
        padding: 10px;
        border-bottom: 1px solid var(--dt-divider-subtle, rgba(255, 255, 255, 0.06));
        color: var(--dt-text-primary, #ffffff);
    }

    .designer-table tr:last-child td {
        border-bottom: none;
    }

    .designer-table__row--alt {
        background: var(--dt-surface-card-muted, #f2f3f7);
    }

    .designer-table__type {
        text-align: center;
    }

    .designer-status-btn {
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-weight: 600;
        color: var(--dt-text-inverse, #111111);
    }

    .designer-status-btn--add {
        background: var(--dt-surface-accent, #e2be74);
        color: var(--dt-text-inverse, #111111);
    }

    .designer-status-btn--sent {
        background: var(--dt-accent-success, #00bb5e);
        color: var(--dt-text-primary, #ffffff);
    }

    .designer-status-btn--pending {
        background: var(--dt-accent-error, #e0232e);
        color: var(--dt-text-primary, #ffffff);
    }
}

/*
 * Typography normalization for selects, dropdowns, and modal dialogs
 * (desktop and mobile).
 */
select,
select option,
select optgroup,
option,
optgroup {
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

.dropdown,
.dropdown *,
.dropdown-toggle,
.dropdown-toggle *,
.dropdown-menu,
.dropdown-menu *,
.dropdown-item,
.dropdown-item *,
.dropdown-header,
.dropdown-header *,
.dropdown-footer,
.dropdown-footer *,
[role="listbox"],
[role="listbox"] *,
[role="option"],
[role="option"] *,
.listbox,
.listbox *,
.autocomplete-list,
.autocomplete-list *,
.autocomplete-option,
.autocomplete-option *,
.select2-container,
.select2-container *,
[class*="select2"],
[class*="Select2"],
[class*="dropdown"],
[class*="Dropdown"] {
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

label,
.form-help,
.form-error,
.form-message,
.form-helper,
.helper-text,
.supporting-text,
[class*="helper"],
[class*="Helper"],
[class*="support"],
[class*="Support"] {
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

.modal,
.modal *,
.modal-content,
.modal-body,
.modal-footer,
.modal-description,
.modal-text,
.popup,
.popup *,
.dialog,
.dialog *,
.overlay,
.overlay *,
[role="dialog"],
[role="dialog"] *,
[aria-modal="true"],
[aria-modal="true"] * {
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

.designer-modal-overlay {
    background: var(--dt-surface-scrim, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
}

.modal-title,
.modal-header .modal-title,
.modal__title,
.dialog-title,
.popup-title,
[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[aria-modal="true"] h1,
[aria-modal="true"] h2,
[aria-modal="true"] h3 {
    font-family: var(--heading-font-family, 'Playfair Display', 'Georgia', serif);
}

.modal button,
.modal .btn,
.popup button,
.dialog button,
[role="dialog"] button,
[aria-modal="true"] button {
    font-family: var(--body-font-family, 'Cormorant', 'Times New Roman', serif);
}

.starOutput .glyphicon-star {
    color: var(--dt-text-accent, #e2be74);
}

.starOutput .glyphicon-star-empty {
    color: var(--dt-text-muted, #cbd5e1);
}

.starOutput .half-star .glyphicon-star {
    color: var(--dt-text-accent, #e2be74);
}

.starOutput .half-star .glyphicon-star-empty {
    color: var(--dt-text-muted, #cbd5e1);
}

.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--dt-overlay-strong, rgba(0, 0, 0, 0.99));
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.checkout-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: var(--dt-text-secondary, #e5e7eb);
}

.checkout-overlay__spinner {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 4px solid var(--dt-border-muted, rgba(255, 255, 255, 0.25));
    border-top-color: var(--dt-accent-secondary, #818cf8);
    animation: checkout-overlay-spin 1s linear infinite;
}

.checkout-overlay__text {
    font-size: 16px;
    font-weight: 600;
}

@keyframes checkout-overlay-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 992px) {
    #stripe_payee,
    #varimodel,
    #prodalert {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        overflow: auto;
    }

    #stripe_payee > [class*="col-"],
    #varimodel > [class*="col-"],
    #prodalert > [class*="col-"] {
        float: none;
        width: 100%;
        max-width: none;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #stripe_payee {
        background: var(--dt-overlay-strong, rgba(0, 0, 0, 0.92));
    }
}

#stripe_payee .form-desc,
#stripe_payee label {
    color: var(--dt-text-secondary, #4b5563);
}

#stripe_payee h3,
#stripe_payee .checkout-acknowledgement-label {
    color: var(--dt-text-primary, #111111);
}

#stripe_payee #checkout-acknowledgement-hint {
    color: var(--dt-text-muted, #6b7280);
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

#varimodel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    font-family: inherit;
    color: var(--dt-text-primary, #0f172a);
}

#varimodel.varimodal--open {
    display: block !important;
}

#varimodel .varimodal__overlay {
    position: absolute;
    inset: 0;
    background: var(--dt-overlay, rgba(15, 23, 42, 0.45));
    backdrop-filter: blur(3px);
}

#varimodel .varimodal__viewport {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    pointer-events: none;
}

#varimodel .varimodal__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--dt-surface-card, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--dt-border-subtle, #e2e8f0);
    box-shadow: 0 24px 60px var(--dt-shadow-color, rgba(15, 23, 42, 0.2));
    color: var(--dt-text-primary, #0f172a);
    pointer-events: auto;
}

#varimodel .varimodal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dt-border-subtle, #e2e8f0);
}

#varimodel .varimodal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--dt-text-primary, #0f172a);
}

#varimodel .varimodal__eyebrow {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dt-text-muted, #64748b);
}

#varimodel .varimodal__body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
}

#varimodel .varimodal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    font-weight: 700;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1;
}

#varimodel .varimodal__icon--muted {
    opacity: 0.75;
}

#varimodel .varimodal__close {
    background: transparent;
    border: none;
    color: var(--dt-text-secondary, #475569);
    padding: 6px;
    line-height: 1;
}

#varimodel .varimodal__close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 1px solid var(--dt-border-muted, #e2e8f0);
    background: var(--dt-overlay-light, #f8fafc);
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

#varimodel .varimodal__close:hover,
#varimodel .varimodal__close:focus {
    color: var(--dt-text-primary, #0f172a);
    outline: none;
}

body.dark #varimodel .varimodal__overlay {
    background: var(--dt-overlay, rgba(15, 23, 42, 0.65));
}

body.dark #varimodel .varimodal__panel {
    background: var(--dt-surface-card, #232323);
    border-color: var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
    box-shadow: 0 24px 60px var(--dt-shadow-color, rgba(0, 0, 0, 0.35));
    color: var(--dt-text-primary, #ffffff);
}

body.dark #varimodel .varimodal__header {
    border-bottom-color: var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
}

body.dark #varimodel .varimodal__title {
    color: var(--dt-text-primary, #ffffff);
}

body.dark #varimodel .varimodal__eyebrow {
    color: var(--dt-text-muted, #cbd5e1);
}

body.dark #varimodel .varimodal__close {
    color: var(--dt-text-secondary, #e5e7eb);
}

body.dark #varimodel .varimodal__close-icon {
    border-color: var(--dt-border-muted, rgba(255, 255, 255, 0.14));
    background: var(--dt-overlay-light, rgba(255, 255, 255, 0.04));
}

body.dark #varimodel .varimodal__close:hover,
body.dark #varimodel .varimodal__close:focus {
    color: var(--dt-text-primary, #ffffff);
}

html,
body,
form,
p,
li,
label,
input,
textarea,
select,
button,
table,
th,
td,
legend,
a,
span,
small,
strong,
em,
b,
i,
.nav,
.navbar,
.navbar-nav,
.nav-item,
.nav-link,
.dropdown-menu,
.dropdown-item,
.dropdown-header,
.dropdown-toggle,
.breadcrumb,
.breadcrumb-item,
.pagination,
.page-item,
.page-link,
.list-group,
.list-group-item,
.card,
.card-body,
.card-text,
.card-subtitle,
.form-control,
.form-select,
.form-label,
.form-text,
.form-check-label,
.form-check-inline,
.form-group,
.form-error,
.form-message,
.form-helper,
.input-group-text,
.placeholder,
.btn,
.btn-link,
.btn-primary,
.btn-secondary,
.btn-default,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.badge,
.badge-light,
.badge-dark,
.badge-pill,
.tag,
.pill,
.toast,
.toast-header,
.toast-body,
.toast-message,
.tooltip,
.tooltip-inner,
.popover,
.popover-body,
.popover-header,
.modal,
.modal-content,
.modal-body,
.modal-footer,
.modal-description,
.modal-text,
.alert,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info,
.alert-primary,
.alert-secondary,
.alert-light,
.alert-dark,
.notice,
.notification,
.message,
.error,
.error-message,
.validation-error,
.validation-message,
.invalid-feedback,
.valid-feedback,
.help-block,
.helper-text,
.supporting-text,
.table,
.table caption,
.table thead th,
.table td,
.table th,
.badge-text,
.tag-text,
.pagination__link,
.breadcrumb__link,
.chip,
.chip-text,
.toast__text,
.modal__content,
.dialog,
.dialog-body,
.dialog-content,
.dialog-description,
.popup,
.popup-body,
.popup-content,
[class*="alert"],
[class*="Alert"],
[class*="notice"],
[class*="Notice"],
[class*="message"],
[class*="Message"],
[class*="error"],
[class*="Error"],
[class*="warning"],
[class*="Warning"],
[class*="success"],
[class*="Success"],
[class*="info"],
[class*="Info"],
[class*="tooltip"],
[class*="Tooltip"],
[class*="toast"],
[class*="Toast"],
[class*="badge"],
[class*="Badge"],
[class*="pill"],
[class*="Pill"],
[class*="tag"],
[class*="Tag"],
[class*="chip"],
[class*="Chip"],
[class*="modal"],
[class*="Modal"],
[class*="popup"],
[class*="Popup"],
[class*="dialog"],
[class*="Dialog"],
[class*="drawer"],
[class*="Drawer"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="nav"],
[class*="Nav"],
[class*="menu"],
[class*="Menu"],
[class*="link"],
[class*="Link"],
[class*="button"],
[class*="Button"],
[class*="btn"],
[class*="Btn"],
[class*="form"],
[class*="Form"],
[class*="field"],
[class*="Field"],
[class*="input"],
[class*="Input"],
[class*="label"],
[class*="Label"],
[class*="helper"],
[class*="Helper"],
[class*="support"],
[class*="Support"],
[class*="breadcrumb"],
[class*="Breadcrumb"],
[class*="pagination"],
[class*="Pagination"] {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

select,
select option,
select optgroup,
option,
optgroup,
.dropdown-menu *,
.dropdown-item *,
.dropdown-header *,
.dropdown-footer,
.dropdown-toggle *,
.form-select *,
.form-control option,
.form-control optgroup,
[role="listbox"],
[role="option"],
.listbox,
.listbox *,
.autocomplete-list,
.autocomplete-list *,
.autocomplete-option,
.autocomplete-option *,
.country-select,
.country-select *,
.state-select,
.state-select *,
.region-select,
.region-select *,
.select2-container,
.select2-container *,
[class*="select2"],
[class*="Select2"] {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

.notification-banner,
.notification-banner *,
.notification-bar,
.notification-bar *,
.notification-strip,
.notification-strip *,
.site-notification,
.site-notification *,
.alert-box,
.alert-box *,
.alert__content,
.alert__content *,
.toast-notification,
.toast-notification *,
.toast-container,
.toast-container *,
.toast-message,
.toast-message *,
.toast__body,
.toast__body *,
.message-box,
.message-box *,
.message-panel,
.message-panel *,
.callout,
.callout *,
.callout-box,
.callout-box *,
.info-box,
.info-box *,
.info-panel,
.info-panel *,
.status-box,
.status-box *,
.dropdown-modal,
.dropdown-modal *,
.dropdown-panel,
.dropdown-panel *,
.dropdown-content,
.dropdown-content *,
.dropdown-menu__panel,
.dropdown-menu__panel *,
.dropdown-select,
.dropdown-select *,
[data-role="notification"],
[data-role="notification"] *,
[data-component="alert"],
[data-component="alert"] *,
[data-component="toast"],
[data-component="toast"] *,
[data-component="message-box"],
[data-component="message-box"] *,
[data-component="callout"],
[data-component="callout"] * {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

.mobile-alert {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(17, 24, 39, 0.35);
    z-index: 1000;
}

.mobile-alert.is-visible {
    display: flex;
}

.mobile-alert__dialog {
    width: 100%;
    max-width: 360px;
    background-color: #ffffff;
    color: #111827;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

.mobile-alert__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mobile-alert__message {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.4;
}

.mobile-alert__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.mobile-alert__button {
    background-color: #fbbf24;
    color: #111827;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
}

.mobile-dialog {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(17, 24, 39, 0.35);
    z-index: 1000;
}

.mobile-dialog.is-visible {
    display: flex;
}

.mobile-dialog__dialog {
    width: 100%;
    max-width: 360px;
    background-color: #ffffff;
    color: #111827;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    outline: none;
}

.mobile-dialog__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mobile-dialog__message {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.4;
}

.mobile-dialog__input {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    color: #111827;
    display: none;
}

.mobile-dialog__input:focus {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.mobile-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.mobile-dialog__button {
    background-color: #fbbf24;
    color: #111827;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
}

.mobile-dialog__button--ghost {
    background-color: #e5e7eb;
    color: #111827;
}

.checkout-shipping-options,
.checkout-shipping-options *,
.checkout-shipping-status,
.checkout-shipping-status *,
.checkout-shipping-option,
.checkout-shipping-option *,
.checkout-shipping-required,
.checkout-shipping-required *,
.checkout-shipping-hint,
.checkout-shipping-hint *,
.shipping-company-form,
.shipping-company-form *,
.shipping-company-input,
.shipping-company-input *,
.shipping-company-select,
.shipping-company-select *,
.shipping-alert,
.shipping-alert *,
.shipping-message,
.shipping-message *,
[data-shipping-option-list],
[data-shipping-option-list] *,
[data-checkout-shipping-row],
[data-checkout-shipping-row] *,
[data-checkout-shipping-pending],
[data-checkout-shipping-pending] * {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

@media (min-width: 992px) {
    /* Desktop-only soft card wrapper for the cart shipping CTA (prevents mobile bleed). */
    .shipping-cta-card {
        margin-top: 25px;
        padding: 12px 16px;
        background: var(--dt-surface-card-soft, var(--dt-surface-card-muted));
        border: 1px solid var(--dt-border-card-soft, var(--dt-border-subtle));
        border-radius: var(--dt-radius-card, 12px);
        box-shadow: var(--dt-shadow-card-soft, 0 12px 24px var(--dt-shadow-color));
    }

    .shipping-cta-card__button {
        width: 100%;
        padding: 10px 0;
        border: none;
        background: transparent;
        color: var(--dt-text-primary, #ffffff);
        cursor: pointer;
    }
}

.font-body,
.font-sans,
.font-normal,
.font-regular {
    font-family: var(--body-font-family, 'Cormorant', serif) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.title,
.subtitle,
.page-title,
.section-title,
.section-heading,
.hero-title,
.hero-heading,
.product-title,
.product-name,
.product-card__title,
.category-card__title,
.navbar-brand,
.brand-name,
.brand-text,
.modal-title,
.modal__title,
.modal-header .modal-title,
.dialog-title,
.popup-title,
.form-title,
.alert-heading,
.card-title,
.card-header .card-title,
.checkout-summary-banner__title,
[class*="title"],
[class*="Title"],
[class*="heading"],
[class*="Heading"],
[class*="headline"],
[class*="Headline"],
[class*="brand"],
[class*="Brand"] {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
}

.alert-title,
.alert__title,
.notification-title,
.notification__title,
.notification-banner__title,
.notification-bar__title,
.toast-title,
.toast__title,
.toast-notification__title,
.message-box__title,
.message-box-title,
.callout__title,
.callout-title,
.info-box__title,
.info-box-title,
.status-box__title,
.dropdown-modal__title,
.dropdown-modal-title,
.dropdown-panel__title,
.dropdown-title {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
}

.font-heading,
.font-display,
.font-serif,
.font-brand,
.brand-text,
.logo-text {
    font-family: var(--heading-font-family, 'Playfair Display', serif) !important;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

.site-header-spacer {
    width: 100%;
    height: var(--site-header-spacer-height-desktop);
    background-color: inherit;
    transition: height 0.2s ease-in-out;
}

.best-selection-card .product-card__title,
.show_cell .product-card__title,
.store-product-grid .product-name,
.best-selections .product-name,
#tai-cart-mobile-page .cart-recommendations .product-name,
.cart-recommendations .product-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header-spacer--designer {
    --site-header-spacer-height-desktop: 120px;
    --site-header-spacer-height-tablet: 110px;
    --site-header-spacer-height-mobile: 100px;
}

.site-header-spacer--restricted {
    --site-header-spacer-height-desktop: 130px;
    --site-header-spacer-height-tablet: 120px;
    --site-header-spacer-height-mobile: 110px;
}

@media (max-width: 991px) {
    .site-header-spacer {
        height: var(--site-header-spacer-height-tablet);
    }
}

@media (max-width: 767px) {
    .site-header-spacer {
        height: var(--site-header-spacer-height-mobile);
    }
}

#head {

height: auto;
left: 0px;
top: 0px;
border-radius: 0px;
background: var(--dt-surface-accent, rgb(226,190,116));
position: fixed;
z-index: 1000;

}

#narve {
    
min-height: 80px;
top: 0px;
border-radius: 0px;
background: var(--dt-surface-page, #131921);
box-shadow: 0px 0px 10px 0px var(--dt-shadow-color, #00001F);

}

#foot {
    
min-height: 350px;
border-radius: 0px;
background: var(--dt-surface-page-alt, #FFF8F0);

}

#tit {
font-size: 50px;
font-weight: bold;
line-height: 75px;
letter-spacing: 0em;
text-align: left;
color: var(--dt-text-primary, #1E1E1E);


}



#lar {
    
min-height: 50px;
border-radius: 5px;
background: var(--dt-surface-error, #FFDEDE);
margin-top: 5px;
padding-top: 15px;
padding-bottom: 15px;
color: var(--dt-text-error, #E0232E);

}

#succ {
    
min-height: 50px;
border-radius: 5px;
background: var(--dt-surface-success, #AEFFD7);
margin-top: 5px;
padding-top: 15px;
padding-bottom: 15px;
color: var(--dt-text-success, #00BB5E);

}

.des-input {

height: 50px;
border-radius: 5px;
outline: none;
border: 1px solid var(--dt-border-muted, #E6E6E6);
width: 100%;
    font-size: 14px;
}

.des-input::placeholder {
    font-size: 14px;
}

.des-botton {
height: 50px;
border-radius: 5px;
padding: 15px 15px 15px 15px;
background: var(--dt-surface-accent, #e2be74);
color: var(--dt-text-inverse, #111111);
border: none;

}


.pcl{

    background-color: var(--dt-surface-card, white);
    color: var(--dt-text-muted, gray);
    border: none;
    padding: 8px;
    margin-right: 5px;

    
}

.pcl:hover,
.pcl:focus{
    background-color: var(--dt-surface-accent-soft, #FFE1C4);
    text-decoration: none;
    cursor: pointer;
    color: var(--dt-text-warning, #F66B0E);
    border-radius: 5px;
}



.show_pro{

    background-color: var(--dt-surface-accent, #e2be74);
    color: var(--dt-text-muted, gray);
    border: none;
    color: var(--dt-text-inverse, black);
    padding: 8px;
    margin-right: 5px;
    border-radius: 5px;

    
}

.show_pro:hover,
.show_pro:focus{
    background-color: var(--dt-surface-accent, #e2be74);
    background-image: linear-gradient(to left, var(--dt-surface-page, #131921), var(--dt-overlay-light, rgba(200, 200, 200, 0.5)));
    text-decoration: none;
    cursor: pointer;
    color: var(--dt-text-accent, #e2be74);
    border-radius: 5px;
    box-shadow: 0px 1px 2px var(--dt-shadow-color, gray);
}


.show_cart{

    background-color: var(--dt-surface-accent, #e2be74);
    border: 1px solid var(--dt-border-accent, #e2be74);
    color: var(--dt-text-muted, gray);
    color: var(--dt-text-inverse, black);
    padding: 3px;
    margin-right: 5px;
    border-radius: 5px;

    
}

.show_cart:hover,
.show_cart:focus{
    background-color: var(--dt-surface-page, #131921);
    text-decoration: none;
    cursor: pointer;
    color: var(--dt-text-primary, white);
    border-radius: 5px;
    border: 1px solid var(--dt-border-strong, #131921);
}

.show_cell{

    background-color: var(--dt-surface-page, black);
    box-shadow: 0px 1px 2px var(--dt-shadow-accent, #e2be74);
    background-image: linear-gradient(to left, var(--dt-surface-page, #131921), var(--dt-overlay-light, rgba(200, 200, 200, 0.5)));
    border-radius: 5px;
    
}

.show_cell:hover,
.show_cell:focus{
    background-color: var(--dt-surface-page, black);
    box-shadow: 0px 1px 10px var(--dt-shadow-accent, #e2be74);
    border-radius: 5px;
}


.show_desc{

font-size: 20px;
font-weight: bold;
line-height: 38px;
letter-spacing: 0em;
text-align: left;
color: var(--dt-text-primary, Black);
background: var(--dt-surface-card, white);
border: none;


    
}

.show_desc:focus{

    background-color: var(--dt-surface-card, white);
    font-weight: bold;
    font-size: 25px;
    color: var(--dt-text-accent, #e2be74);
    border-bottom: 2px solid var(--dt-border-accent, #e2be74);
}



.show_log{

    font-size: 25px;
    padding-top: 7px; 
    width: 55px; 
    height: 55px; 
    border-radius: 55px;
    border: none; 
    color: var(--dt-text-inverse, black);
    background-color: var(--dt-surface-accent, #e2be74);
    box-shadow: 0px 4px 4px var(--dt-shadow-color, black);
    
}

.show_log:hover,
.show_log:focus{
    background-color: var(--dt-surface-card-muted, #F4F9EE14);
    border: 1px solid var(--dt-border-accent, #e2be74);
    color: var(--dt-text-accent, #e2be74);
    border-radius: 55px;
}


.show_buy{

    border: 1px solid var(--dt-border-accent, #e2be74); 
    padding: 10px; 
    color: var(--dt-text-accent, #e2be74); 
    background: transparent;
}

.show_buy:hover,
.show_buy:focus{
    background-color: var(--dt-surface-page, #131921);
    color: var(--dt-text-primary, white);
    border: 1px solid var(--dt-border-strong, #131921);
}

.desi_button{

    height: 40px; 
    background-color: var(--dt-surface-accent, #e2be74); 
    color: var(--dt-text-inverse, black); 
    border: 1px solid var(--dt-border-accent, #e2be74); 
    border-radius: 5px;

}

.desi_button:hover,
.desi_button:focus{
    height: 40px; 
    background-color: var(--dt-surface-card-muted, #F4F9EE14); 
    color: var(--dt-text-primary, white); 
    border: 1px solid var(--dt-border-muted, #F4F9EE14); 
    border-radius: 5px;
}

option {
    
    background: var(--dt-surface-page, black);
    color: var(--dt-text-primary, white);
}



.containerimg {
    background-color: var(--dt-surface-card, white);
    width: 285px; /* Set your desired div width */
    height: 176px; /* Set your desired div height */
    overflow: hidden; /* Ensures cropping when needed */
    position: relative; /* Needed for absolute positioning */
    display: flex; /* Enables centering */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
}

.containerimg img {
    height: 100%; /* Fit to height */
    width: auto; /* Maintain original width */
    max-width: none; /* Prevents width from being constrained */
    object-fit: contain; /* Show entire image without cropping */

}

/* Image modal gallery styling */
#imageModal .modal-body {
    background: var(--dt-overlay-strong, rgba(0,0,0,0.9));
    overflow: hidden;
}
#imageModal .navArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dt-text-primary, #fff);
    font-size: 40px;
    cursor: pointer;
    padding: 10px;
    user-select: none;
}
#imageModal #prevImg { left: 0; }
#imageModal #nextImg { right: 0; }
#imageModal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--dt-text-primary, #fff);
    font-size: 30px;
    cursor: pointer;
    opacity: 0.8;
}

/* Zoom effect for modal image */
#modalImg {
    transition: transform 0.3s ease;
    transform-origin: center center;
}
#modalImg.zoomed {
    transform: scale(2);
    cursor: zoom-in;
}

/* Referral section styles */
.referral-input-group{
    display:flex;
    align-items:center;
    border:1px solid var(--dt-border-accent, #e2be74);
    border-radius:5px;
}
.referral-input-group .des-input{
    flex:1;
    border:none;
    margin-right:0;
    background: var(--dt-surface-card-muted, #F4F9EE14);
    color: var(--dt-text-primary, #ffffff);
}
.copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--dt-surface-accent, #e2be74);
    color:var(--dt-text-inverse, #fff);
    border:none;
    padding:8px 12px;
}
.share-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:5px;
}
.share-icon img{
    width:20px;
    height:20px;
}
.share-icon:hover,
.share-icon:focus{
    transform:scale(1.1);
}

/* Registration page separators */
.or-separator{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    font-weight:bold;
    color:var(--dt-text-primary, white);
}
.or-separator::before,
.or-separator::after{
    content:'';
    flex:1;
    border-bottom:1px solid var(--dt-border-muted, #E6E6E6);
    margin:0 10px;
}

/* Make Google Sign-In match the full width of Login/Register buttons without resize jitter */
.g_id_signin{
    width:100% !important;
    min-height:44px;
    line-height:44px;
    position:relative;
}
.g_id_signin > div,
.g_id_signin iframe{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
}
.g_id_signin.gsi-loading{
    opacity:0;
    pointer-events:none;
}
.g_id_signin.gsi-ready{
    opacity:1;
    transition:opacity .12s linear;
}

/* Layout helpers for the registration page */
.register-wrapper{
    /* ensure the black background spans the entire viewport */
    min-height:100vh;
    background:var(--dt-surface-page, black);
    padding-bottom:80px;
    position:relative;
}
.register-left{
    padding-bottom:20px;
    padding-left:25px;
    padding-right:25px;
    box-shadow:4px 0 10px var(--dt-shadow-color, black);
    background-color:var(--dt-surface-page, black);
    z-index:1;
}
.register-right{
    padding:40px 0;
    min-height:calc(100vh - 120px);
    display:flex;
    align-items:center;
    justify-content:center;
}
.register-right-inner{
    position:relative;
    padding:0;
    width:100%;
    margin:0;
}
.register-right-overlay{
    background:var(--dt-overlay, rgba(19,15,12,0.72));
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    text-align:center;
    padding:192px;
    z-index:1;
}
.register-image{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    max-height:80vh;
    object-fit:contain;
    object-position:center;
    background:transparent;
    z-index:0;
}

/* Align phone code and number on the same line */
.phone-input-group{
    display:flex;
    align-items:center;
    width:100%;
    margin-bottom:10px;
}
.phone-input-group .phone-code{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--dt-surface-card-muted, #F4F9EE14);
    border:1px solid var(--dt-border-muted, #E6E6E6);
    height:50px;
    color:var(--dt-text-disabled, #999);
    text-align:center;
    padding:0 10px;
    margin-right:5px;
    width:auto;
    flex:0 0 auto;
}

/* Phone code input expands with content */
.phone-input-group input.phone-code{
    width:auto;
    flex:0 0 auto;

}
.phone-input-group input.des-input{
    flex:1 1 auto;
    border:1px solid var(--dt-border-muted, #E6E6E6);
    box-shadow:none;
    background:transparent;
}

/* Fixed width phone number input */
.phone-input-group .phone-number-input{
    width:50%;
    flex:1 1 50%;
}

#phoneCollectModal .phone-input-group,
#adminPhoneCollectModal .phone-input-group{
    margin-bottom:0;
}

@media (min-width: 992px) {
    #phoneOtpModal .modal-content,
    #phoneCollectModal .modal-content,
    #adminPhoneCollectModal .modal-content {
        background: var(--dt-surface-card, #232323);
        color: var(--dt-text-primary, #ffffff);
        border: 1px solid var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
        border-radius: var(--dt-radius-card, 12px);
        box-shadow: var(--dt-shadow-card-soft, 0 10px 24px rgba(0, 0, 0, 0.35));
    }

    #phoneOtpModal .modal-header,
    #phoneCollectModal .modal-header,
    #adminPhoneCollectModal .modal-header,
    #phoneOtpModal .modal-footer,
    #phoneCollectModal .modal-footer,
    #adminPhoneCollectModal .modal-footer {
        background: var(--dt-surface-card, #232323);
        border-color: var(--dt-border-subtle, rgba(255, 255, 255, 0.08));
    }

    #phoneOtpModal .modal-title,
    #phoneCollectModal .modal-title,
    #adminPhoneCollectModal .modal-title {
        color: var(--dt-text-primary, #ffffff);
    }

    #phoneOtpModal .modal-body,
    #phoneCollectModal .modal-body,
    #adminPhoneCollectModal .modal-body {
        color: var(--dt-text-secondary, #e5e7eb);
    }

    #phoneOtpModal p,
    #phoneCollectModal p,
    #adminPhoneCollectModal p,
    #phoneCollectModal label,
    #adminPhoneCollectModal label {
        color: var(--dt-text-secondary, #e5e7eb);
    }

    #phoneOtpModal .close,
    #phoneCollectModal .close,
    #adminPhoneCollectModal .close {
        color: var(--dt-text-muted, #cbd5e1);
        opacity: 1;
        text-shadow: none;
    }

    #phoneOtpModal .close:hover,
    #phoneCollectModal .close:hover,
    #adminPhoneCollectModal .close:hover,
    #phoneOtpModal .close:focus,
    #phoneCollectModal .close:focus,
    #adminPhoneCollectModal .close:focus {
        color: var(--dt-text-primary, #ffffff);
    }

    #phoneOtpModal .form-control,
    #phoneOtpModal .input-group-text,
    #phoneOtpModal select.form-control,
    #phoneCollectModal .phone-input-group .des-input,
    #adminPhoneCollectModal .phone-input-group .des-input {
        background: var(--dt-field-bg, #232323);
        border-color: var(--dt-field-border, rgba(255, 255, 255, 0.12));
        color: var(--dt-field-text, #ffffff);
    }

    #phoneOtpModal .form-control::placeholder,
    #phoneCollectModal .phone-input-group .des-input::placeholder,
    #adminPhoneCollectModal .phone-input-group .des-input::placeholder {
        color: var(--dt-field-placeholder, #cbd5e1);
    }

    #phoneOtpModal .form-control:focus,
    #phoneCollectModal .phone-input-group .des-input:focus,
    #adminPhoneCollectModal .phone-input-group .des-input:focus {
        border-color: var(--dt-field-focus-border, #e2be74);
        box-shadow: 0 0 0 2px var(--dt-field-focus-ring, rgba(226, 190, 116, 0.6));
    }

    #phoneOtpModal .btn-primary,
    #phoneCollectModal .btn-primary,
    #adminPhoneCollectModal .btn-primary {
        background: var(--dt-surface-accent, #e2be74);
        border-color: var(--dt-border-accent, #e2be74);
        color: var(--dt-text-inverse, #111111);
    }

    #phoneOtpModal .btn-primary:hover,
    #phoneCollectModal .btn-primary:hover,
    #adminPhoneCollectModal .btn-primary:hover,
    #phoneOtpModal .btn-primary:focus,
    #phoneCollectModal .btn-primary:focus,
    #adminPhoneCollectModal .btn-primary:focus {
        background: var(--dt-accent-primary, #e2be74);
        border-color: var(--dt-interactive-border-hover, #e2be74);
    }

    #phoneOtpModal .btn-link,
    #phoneCollectModal .btn-link,
    #adminPhoneCollectModal .btn-link {
        color: var(--dt-text-accent, #e2be74);
    }

    #phoneOtpModal .btn-link:hover,
    #phoneCollectModal .btn-link:hover,
    #adminPhoneCollectModal .btn-link:hover,
    #phoneOtpModal .btn-link:focus,
    #phoneCollectModal .btn-link:focus,
    #adminPhoneCollectModal .btn-link:focus {
        color: var(--dt-interactive-text-hover, #ffffff);
        text-decoration: none;
    }

    #phoneOtpModal .text-muted {
        color: var(--dt-text-muted, #cbd5e1) !important;
    }

    #phoneOtpModal .text-danger,
    #phoneCollectModal .text-danger,
    #adminPhoneCollectModal .text-danger {
        color: var(--dt-text-error, #e0232e) !important;
    }

    #phoneOtpModal .text-success,
    #phoneCollectModal .text-success,
    #adminPhoneCollectModal .text-success {
        color: var(--dt-text-success, #00bb5e) !important;
    }
}


     



/* Password field and toggle icon */
.password-field{position:relative;}
.password-field input{padding-right:2.5rem;}
.password-toggle{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.2em;}

.password-field #message{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 10px;
    z-index: 1000;
    background-color: var(--dt-interactive-bg-disabled, #ccc);
}

/* Category tile styles */
.category-tile {
    background: var(--dt-surface-card-muted, #f5f5f5);
    display: block;
    align-items: flex-start;
    justify-content: flex-start;
}

.category-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Best Selections product cards */
.best-selection-card {
    display: flex;
    flex-direction: column;
    height: 300px;
}

/* Keep the Best Selections scrollbar from covering the metadata */
#all_product {
    scrollbar-width: thin;
    /* Keep space reserved for the horizontal scrollbar so it never overlaps cards */
    scrollbar-gutter: stable both-edges;
    box-sizing: border-box;
}

@supports not (scrollbar-gutter: stable both-edges) {
    #all_product {
        padding-bottom: 6px;
    }
}

#all_product::-webkit-scrollbar {
    height: 6px;
}

#all_product::-webkit-scrollbar-track {
    background: transparent;
}

#all_product::-webkit-scrollbar-thumb {
    background-color: var(--dt-accent-primary, #e2be74);
    border-radius: 999px;
    border: 2px solid transparent;
}

.best-selection-card .category-tile.aspect-square {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.best-selection-card .category-tile.aspect-square img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.best-selection-card .category-tile.aspect-square .best-selection-placeholder {
    width: 100%;
    height: 100%;
}

.best-selection-card .best-selection-meta {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 15px 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.best-selection-card .best-selection-meta .product-card__title {
    color: var(--dt-text-primary, #ffffff);
    font-size: 14px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin: 0;
}

.best-selection-card .best-selection-meta .best-selection-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    color: var(--dt-text-primary, #ffffff);
    line-height: 1.2;
}

.best-selection-card .best-selection-meta .best-selection-rating-row {
    justify-content: flex-start;
}

.best-selection-card .best-selection-meta .starOutput {
    display: inline-flex;
    align-items: center;
}

.best-selection-card .best-selection-meta .best-selection-price {
    color: var(--dt-text-accent, #ffd700);
    font-size: 19.6px;
    font-weight: bold;
    margin-left: auto;
}

.best-selection-card .best-selection-meta .best-selection-rating-value {
    font-size: 12px;
}

.best-selection-card .best-selection-meta .best-selection-category {
    font-size: 12px;
    color: var(--dt-text-primary, #ffffff);
    line-height: 1.2;
}

/* Desktop shipping overlay should never display on small viewports. */
.ship-overlay {
    display: none;
}

@media (min-width: 992px) {
    .ship-overlay {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--dt-overlay, rgba(0, 0, 0, 0.85));
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        color: var(--dt-text-primary, #ffffff);
    }

    .ship-overlay.hidden {
        display: none;
    }

    .ship-overlay__content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
        padding: 18px 24px;
        background: var(--dt-surface-card, rgba(35, 35, 35, 0.9));
        border-radius: 8px;
        box-shadow: 0 12px 30px var(--dt-shadow-color, rgba(0, 0, 0, 0.35));
    }

    .ship-overlay__spinner {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 4px solid var(--dt-border-muted, rgba(255, 255, 255, 0.25));
        border-top-color: var(--dt-accent-primary, #e2be74);
        animation: ship-overlay-spin 0.8s linear infinite;
    }

    .ship-overlay__text {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--dt-text-primary, #ffffff);
    }

    body.ship-overlay-active {
        overflow: hidden;
    }
}

@keyframes ship-overlay-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Keep mobile form elements at 16px+ to prevent iOS focus zoom on login/registration */
@media (max-width: 640px) {
    input,
    select,
    textarea,
    button,
    .form-control {
        font-size: 16px;
        line-height: 1.5;
    }
    input[type="checkbox"],
    input[type="radio"] {
        font-size: inherit;
    }
}

.form-control {
    color: var(--dt-field-text, var(--dt-text-primary, #212529));
    background-color: var(--dt-field-bg, var(--dt-surface-card, #ffffff));
    border-color: var(--dt-field-border, var(--dt-border-muted, #ced4da));
}

.form-control::placeholder {
    color: var(--dt-field-placeholder, var(--dt-text-muted, #6b7280));
}

.feedback-pill.btn,
.feedback-pill.btn-warning {
    background-color: var(--dt-surface-accent, #e2be74) !important;
    border-color: var(--dt-border-accent, #e2be74) !important;
    color: var(--dt-text-inverse, #111111) !important;
}

.feedback-pill.btn:hover,
.feedback-pill.btn:focus,
.feedback-pill.btn-warning:hover,
.feedback-pill.btn-warning:focus {
    background-color: color-mix(in srgb, var(--dt-surface-accent, #e2be74) 85%, #000) !important;
    border-color: var(--dt-border-accent, #e2be74) !important;
    color: var(--dt-text-inverse, #111111) !important;
}