@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');

:root {
  --primary-gold: #e2be74;
  --primary-color: #137fec;
  --heading-font-family: 'Playfair Display', serif;
  --body-font-family: 'Cormorant', serif;
  --body-font-size: 1.125rem;
  --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);
  --mobile-bottom-nav-divider: #e5e7eb;
}

.dark {
  --mobile-bottom-nav-divider: #4b5563;
}

.fms-body-text {
  font-size: var(--body-font-size, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
}

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

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

p,
label,
input,
textarea,
select,
option,
.form-control,
.form-select,
.form-label,
.form-text,
.form-message,
.form-helper,
.form-error,
.form-group .form-error,
.form-group .form-message,
.form-group .form-helper,
.help-block,
.helper-text,
.supporting-text,
.modal-body,
.modal-text,
.modal-description,
.popover,
.popover-body,
.tooltip,
.tooltip-inner,
.toast-body,
.toast__text,
.dialog-body,
.dialog-content,
.dialog-description,
.popup-body,
.popup-content,
.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,
.table,
.table caption,
.table thead th,
.table td,
.table th {
    font-size: var(--body-font-size, 1.125rem);
}

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

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,
.des-input,
.des-input select,
.des-input option,
.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);
}

/* Brand typography enforcement for dropdowns and modals */
select,
select option,
select optgroup,
.des-input,
.des-input select,
.des-input option,
.dropdown-menu,
.dropdown-menu *,
.dropdown,
.dropdown *,
.select2-dropdown,
.select2-selection,
.select2-selection__rendered,
.select2-results__option,
.select2-results__option--selectable,
[data-role="dropdown"],
[data-role="dropdown"] * {
    font-family: var(--body-font-family, 'Cormorant', serif) !important;
}

.modal,
.modal-content,
.modal-body,
.modal-footer,
.modal-description,
.modal-text,
.modal__content,
.dialog,
.dialog-content,
.popup,
.popup-content,
.popup-body,
.drawer,
.drawer-content,
.mobile-measurements-modal__container,
.mobile-measurements-modal__panel,
.fms-aup-modal,
.fms-aup-modal *,
.dropdown-modal,
.dropdown-panel,
.dropdown-content,
.desktop-notification-dialog,
#notemodel,
#notemodel * {
    font-family: var(--body-font-family, 'Cormorant', serif);
}

.mobile-alert,
.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-alert.is-visible,
.mobile-dialog.is-visible {
    display: flex;
}

.mobile-alert__dialog,
.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);
}

.mobile-alert__title,
.mobile-dialog__title {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mobile-alert__message,
.mobile-dialog__message {
    font-family: var(--body-font-family, 'Cormorant', serif);
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.4;
}

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

.mobile-alert__button,
.mobile-dialog__button {
    font-family: var(--body-font-family, 'Cormorant', serif);
    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;
}

.mobile-dialog__input {
    font-family: var(--body-font-family, 'Cormorant', serif);
    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;
}

.modal-title,
.modal__title,
.dialog-title,
.popup-title,
.mobile-measurements-modal__title,
.fms-aup-modal h1,
.fms-aup-modal h2,
.dropdown-title,
.desktop-notification-title,
#desktop-notification-title {
    font-family: var(--heading-font-family, 'Playfair Display', 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);
}

.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);
}

.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);
}
.pay {
	  text-transform: uppercase;
    background: var(--dt-accent-warning, #F68B1E);
    border: 1px solid var(--dt-border-warning, #F68B1E);
    cursor: pointer;
    color: var(--dt-text-inverse, #fff);
    padding: 8px 40px;
    margin-top: 10px;
}
.pay:hover {
	  background: var(--dt-accent-warning, #f17e0a);
    border-color: var(--dt-border-warning, #f17e0a);
}
.form-control {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: var(--body-font-size, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--dt-field-text, var(--dt-text-primary, #212529));
    background-color: var(--dt-field-bg, var(--dt-surface-card, #ffffff));
    border: 1px solid var(--dt-field-border, var(--dt-border-muted, #ced4da));
    border-radius: 0.375rem;
    margin-bottom: 10px;

}

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

.input-error {
  border: 2px solid #e53935 !important;
  background-color: #fff5f5 !important;
}

#stripe-payment-message{
  padding: 20px;
  border-radius: 5px;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--dt-text-error, #842029);
  background-color: var(--dt-surface-error, #f8d7da);
  border: 1px solid var(--dt-border-error, #f5c2c7);
}
.btn-primary {
  font-weight: 600;
  color: var(--dt-text-inverse, #111111);
  text-align: center;
  background-color: var(--dt-accent-primary, var(--primary-gold));
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--dt-accent-primary, #d3aa5e);
}
.hidden{
    display:none;
}
/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
    color: var(--dt-text-primary, #ffffff);
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 4px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 21px;
    height: 41px;
    background: var(--dt-accent-warning, #F68B1E);
    border-radius: 41px 0 0 41px;
    top: -0.4px;
    left: -0.4px;
    -webkit-transform-origin: 21px 20.5px;
    transform-origin: 21px 20.5px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 21px;
    height: 20.5px;
    background: var(--dt-accent-warning, #F68B1E);
    border-radius: 0 20.5px 20.5px 0;
    top: -0.2px;
    left: 20.5px;
    -webkit-transform-origin: 0 20.5px;
    transform-origin: 0 20.5px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
    min-width: initial;
  }
}
.loader {
  display: block;
  margin: 20px;
  border: 14px solid var(--dt-border-subtle, #f3f3f3);
  border-radius: 50%;
  border-top: 14px solid var(--dt-accent-secondary, #3498db);
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#order-detail-modal-card.order-detail-modal--legacy {
  background-color: var(--dt-surface-card, #232323);
  color: var(--dt-text-primary, #ffffff);
  box-shadow: 0 0 5px var(--dt-shadow-color, rgba(0, 0, 0, 0.4));
}

#order-detail-modal-card.order-detail-modal--legacy #ords {
  padding: 15px;
}

#order-detail-modal-card.order-detail-modal--modern {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}

#order-detail-modal-card.order-detail-modal--modern #ords {
  padding: 0;
}

#order-detail-modal-card {
  position: relative;
}

.order-shipping-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dt-overlay, rgba(0, 0, 0, 0.4));
  z-index: 10;
}

.order-shipping-progress.hidden {
  display: none;
}

.order-shipping-progress__content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--dt-surface-card, rgba(255, 255, 255, 0.95));
  color: var(--dt-text-primary, #111827);
  box-shadow: 0 15px 45px var(--dt-shadow-color, rgba(0, 0, 0, 0.25));
}

#order-detail-modal-card.order-detail-modal--modern .order-shipping-progress__content {
  background: var(--dt-surface-page, rgba(17, 24, 39, 0.95));
  color: var(--dt-text-secondary, #e5e7eb);
}

.order-shipping-progress__text {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.order-shipping-progress__spinner {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  animation: order-shipping-spin 1s linear infinite;
}

@keyframes order-shipping-spin {
  to {
    transform: rotate(360deg);
  }
}

#order-detail-modal-card[data-layout="mobile-tailor"] .shipping-company-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

#order-detail-modal-card[data-layout="mobile-tailor"] .shipping-company-input,
#order-detail-modal-card[data-layout="mobile-tailor"] #shipcom,
#order-detail-modal-card[data-layout="mobile-tailor"] #shipnam {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
}

/* --------------------------------------------------
 * Product imagery helpers
 * Ensure product photography never crops inside fixed boxes
 * Components: listing cards, cart lines, order summaries, modals
 * -------------------------------------------------- */
.product-media-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.product-media-video-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--dt-overlay, rgba(0, 0, 0, 0.7));
  color: var(--dt-text-accent, #e2be74);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.product-video-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--dt-overlay, rgba(0, 0, 0, 0.7));
  color: var(--dt-text-primary, #f8fafc);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.product-media-img,
.product-thumb-img,
.product-media-frame > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
}

.product-media-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  background-color: var(--dt-surface-page-alt, #000);
}

.media-hidden {
  display: none !important;
}

.product-media-frame .product-media-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
}

.product-media-frame.is-video-active .product-media-play-overlay {
  opacity: 1;
}

.product-media-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background-color: var(--dt-overlay, rgba(0, 0, 0, 0.65));
  color: var(--dt-text-primary, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 10px 25px var(--dt-shadow-color, rgba(0, 0, 0, 0.45));
}

.product-thumb-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dt-text-primary, #ffffff);
  font-size: 20px;
  text-shadow: 0 4px 12px var(--dt-shadow-color, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

[data-media-thumb] {
  position: relative;
}

[data-media-thumb].product-thumb-active .product-thumb-img {
  box-shadow: 0 0 0 2px var(--dt-border-accent, #e2be74) !important;
  border-radius: 3px;
}

/* Utility class for thumbnail strips that define explicit height */
.product-thumb-img {
  width: 100%;
  height: 100%;
}

/* PDP modal imagery should scale within the viewport */
#modalImg {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
}
#payment_processing{
  color: var(--dt-text-success, #078e29);
  font-weight: bold;
}

/* Consistent style for form labels and descriptions */
label, .form-desc {
  font-size: 12px;
  color: var(--primary-gold);
}

html.fade-out,
body.fade-out {
  opacity: 0;
  transition: opacity 0.3s;
}

/* Full page spinner overlay */
#global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dt-overlay-strong, rgba(0, 0, 0, 0.99));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#global-loading.hidden {
  display: none;
}

.footer-icons {
  display: inline-flex;
  gap: 8px;
}

.footer-icons a {
  display: inline-flex;
  align-items: center;
}

.footer-icons img,
.payment-icons img {
  display: inline !important;
}

.review-item.hidden-review {
  display: none;
}

.starOutput .glyphicon {
  color: var(--dt-text-accent, gold);
}
.starOutput .glyphicon-star-empty {
  color: var(--dt-text-disabled, #ccc);
}
.starOutput .half-star .glyphicon-star-empty {
  color: var(--dt-text-disabled, #ccc);
}

.starOutput .half-star {
  position: relative;
  display: inline-block;
}

.starOutput .half-star .glyphicon-star-empty {
  position: absolute;
  left: 0;
  top: 0;
}

.starOutput .half-star .glyphicon-star {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
}

@media (max-width: 768px) {
    #phoneOtpModal .btn-primary,
    #phoneCollectModal .btn-primary {
        background-color: var(--primary-gold);
        color: var(--dt-text-inverse, #111111);
        border: 0;
    }
    #phoneOtpModal .btn-primary:hover,
    #phoneCollectModal .btn-primary:hover {
        background-color: var(--dt-accent-primary, #d3aa5e);
    }
}

@media (max-width:640px){
    .g-recaptcha > div{
        transform:scale(0.9);
        transform-origin:center;
        margin:0 auto;
    }
}
.material-icons,
.material-icons-outlined { visibility: hidden; }
body.icons-loaded .material-icons,
body.icons-loaded .material-icons-outlined { visibility: visible; }

.product-name {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}


.checkout-shipping-options {
  margin-top: 16px;
  display: block;
}

.checkout-shipping-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dt-text-secondary, #374151);
  margin-bottom: 8px;
}

.checkout-shipping-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-shipping-option {
  border: 1px solid var(--dt-border-subtle, #e5e7eb);
  border-radius: 16px;
  padding: 12px 16px;
  background: var(--dt-surface-card, #ffffff);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.checkout-shipping-option.is-selected {
  border-color: var(--dt-border-accent, #e2be74);
  box-shadow: 0 0 0 1px var(--dt-shadow-accent, rgba(226, 190, 116, 0.45));
}

.checkout-shipping-option.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkout-shipping-option input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--dt-accent-primary, #e2be74);
}

.checkout-shipping-option .option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-shipping-option .option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.checkout-shipping-option .option-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dt-text-primary, #111827);
}

.checkout-shipping-option .option-amount {
  font-weight: 600;
  color: var(--dt-text-primary, #111827);
  white-space: nowrap;
}

.checkout-shipping-option .option-description {
  font-size: 0.85rem;
  color: var(--dt-text-muted, #4b5563);
}

.checkout-shipping-option .option-error {
  font-size: 0.8rem;
  color: var(--dt-text-error, #b91c1c);
}

.checkout-shipping-option .option-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.checkout-shipping-option .option-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--dt-surface-accent-soft, #f8edd6);
  color: var(--dt-text-warning, #8a6a1f);
}

.checkout-shipping-option .option-badge-selected {
  background-color: var(--dt-surface-accent-soft, #f1e2c1);
  color: var(--dt-text-warning, #a87b09);
}

.checkout-shipping-option .option-badge-recommended {
  background-color: var(--dt-surface-accent-soft, #f6e6c7);
  color: var(--dt-text-warning, #a87b09);
}

.checkout-shipping-option .option-badge-value {
  background-color: var(--dt-surface-success, #ecfdf5);
  color: var(--dt-text-success, #047857);
}

.checkout-shipping-option.is-preferred:not(.is-selected) {
  border-color: var(--dt-border-accent, #f1d899);
}

.checkout-shipping-option.is-best-value:not(.is-selected) {
  border-color: var(--dt-border-success, #6ee7b7);
}

.checkout-shipping-service {
  margin-top: 4px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--dt-border-muted, #d1d5db);
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--dt-text-primary, #111827);
  background-color: var(--dt-surface-card, #ffffff);
}

.checkout-shipping-hint {
  font-size: 0.85rem;
  color: var(--dt-text-muted, #6b7280);
  margin-top: 8px;
}

.checkout-shipping-required {
  font-size: 0.85rem;
  color: var(--dt-text-error, #b91c1c);
  margin-top: 8px;
}

.checkout-proceed-disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.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;
}

.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to bottom, var(--mobile-bottom-nav-divider), transparent);
  pointer-events: none;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
  .mobile-bottom-nav::before {
    background: linear-gradient(
      to bottom,
      var(--mobile-bottom-nav-divider),
      color-mix(in srgb, var(--mobile-bottom-nav-divider) 0%, transparent)
    );
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .mobile-bottom-nav::before {
    height: 0.5px;
  }
}