:root {
  --primary-gold: #e2be74;
  --brand-green: #153f42;
  --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;
}

/* Native account switching must retain its intended color during iOS tap/visit states. */
a.store-switch-link,
a.store-switch-link:visited,
a.store-switch-link:hover,
a.store-switch-link:focus,
a.store-switch-link:active {
  background-color: var(--store-switch-bg, #e2be74) !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Keep only framework/browser interaction accents aligned with the logo green
   instead of Bootstrap/Tailwind's default blue. Normal link and CTA colors are
   intentionally left alone. */
button,
[type="button"],
[type="submit"],
[type="reset"],
a,
[onclick],
label,
[role="button"],
.btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

@media (hover: none) and (pointer: coarse) {
  html,
  body,
  body * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    tap-highlight-color: rgba(0, 0, 0, 0) !important;

  }
}

a:focus,
a:hover,
.btn-link:focus,
.btn-link:hover,
.page-link:focus,
.page-link:hover,
a[class*="text-blue-"]:focus,
a[class*="text-blue-"]:hover {
  text-decoration-color: var(--brand-green, #153f42);
}

.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:active,
a[class*="bg-blue-"]:focus,
a[class*="bg-blue-"]:hover,
button[class*="bg-blue-"]:focus,
button[class*="bg-blue-"]:hover,
input[type="button"][class*="bg-blue-"]:focus,
input[type="button"][class*="bg-blue-"]:hover,
input[type="submit"][class*="bg-blue-"]:focus,
input[type="submit"][class*="bg-blue-"]:hover {
  background-color: var(--brand-green, #153f42);
  border-color: var(--brand-green, #153f42);
  color: #ffffff;
}

a[class*="border-blue-"]:focus,
a[class*="border-blue-"]:hover,
button[class*="border-blue-"]:focus,
button[class*="border-blue-"]:hover,
input[type="button"][class*="border-blue-"]:focus,
input[type="button"][class*="border-blue-"]:hover,
input[type="submit"][class*="border-blue-"]:focus,
input[type="submit"][class*="border-blue-"]:hover {
  border-color: var(--brand-green, #153f42);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-green, #153f42);
  box-shadow: 0 0 0 2px rgba(21, 63, 66, 0.25);
}

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

/* --------------------------------------------------
 * Desktop homepage horizontal cards
 * Enforce image-frame dimensions while preserving object-fit: contain
 * Scope: tai_home.php desktop horizontal sections only
 * -------------------------------------------------- */
@media (min-width: 992px) {
  #tailor_made,
  #accessory_id,
  #all_product {
    height: 250px !important;
    padding: 0 0 10px 0 !important;
  }

  #tailor_made > a > div,
  #accessory_id > a > div,
  #all_product > a > div {
    width: 300px !important;
    height: 235px !important;
    margin-top: 15px !important;
    padding-right: 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
  }

  #tailor_made > a > div > div,
  #accessory_id > a > div > div,
  #all_product .best-selection-card {
    width: 285px !important;
    height: 235px !important;
    margin-right: 15px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tailor_made .category-tile.aspect-square,
  #accessory_id .category-tile.aspect-square {
    width: 285px !important;
    height: 145px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    aspect-ratio: 285 / 145 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  #tailor_made .category-tile.aspect-square img,
  #accessory_id .category-tile.aspect-square img {
    width: 285px !important;
    height: 145px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #all_product .best-selection-card .category-tile.aspect-square {
    width: 285px !important;
    height: 162px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    min-height: 162px !important;
    max-height: 162px !important;
    aspect-ratio: 285 / 162 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  #all_product .best-selection-card .category-tile.aspect-square img {
    width: 285px !important;
    height: 162px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    min-height: 162px !important;
    max-height: 162px !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
  }

  #tailor_made .category-tile.aspect-square + .home-card-caption,
  #accessory_id .category-tile.aspect-square + .home-card-caption {
    width: 285px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;

    margin: 0 !important;

    padding: 0 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 3 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    line-height: 1 !important;
  }

  #tailor_made .category-tile.aspect-square + .home-card-caption br,
  #accessory_id .category-tile.aspect-square + .home-card-caption br {
    display: none !important;
  }

  #tailor_made .category-tile.aspect-square + .home-card-caption span:first-child,
  #accessory_id .category-tile.aspect-square + .home-card-caption span:first-child {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 0 0.5px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #tailor_made .category-tile.aspect-square + .home-card-caption span:last-child,
  #accessory_id .category-tile.aspect-square + .home-card-caption span:last-child {
    display: block !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #all_product .best-selection-meta {
    margin-top: -3px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #all_product .best-selection-meta {
    width: 285px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 6px 10px 8px 10px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #all_product .product-card__title {
    display: block !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.15 !important;
    max-height: 21px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #all_product .best-selection-row,
  #all_product .best-selection-rating-row {
    margin: 0 !important;
    line-height: 1.1 !important;
    max-height: 18px !important;
    overflow: hidden !important;
  }

  #all_product .best-selection-category {
    display: block !important;
    margin-top: 3px !important;
    line-height: 1.1 !important;
    max-height: 16px !important;
    overflow: hidden !important;
  }
}

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

.shipping-breakdown-link {
  align-self: flex-start;
  margin: -4px 0 2px 44px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--dt-link, #4f46e5);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shipping-breakdown-modal {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.shipping-breakdown-modal__panel {
  width: min(100%, 480px);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 20px;
  background: var(--dt-surface-card, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.shipping-breakdown-modal__title {
  margin: 0;
  color: var(--dt-text-primary, #111827);
  font-size: 1.35rem;
}

.shipping-breakdown-modal__intro {
  margin: 6px 0 18px;
  color: var(--dt-text-muted, #4b5563);
  font-size: 0.9rem;
}

.shipping-breakdown-modal__rows {
  display: flex;
  flex-direction: column;
}

.shipping-breakdown-modal__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--dt-border-subtle, #e5e7eb);
}

.shipping-breakdown-modal__details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shipping-breakdown-modal__product {
  color: var(--dt-text-primary, #111827);
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.shipping-breakdown-modal__method {
  color: var(--dt-text-muted, #4b5563);
  font-size: 0.82rem;
}

.shipping-breakdown-modal__amount {
  flex: 0 0 auto;
  color: var(--dt-text-primary, #111827);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.shipping-breakdown-modal__close {
  width: 100%;
  margin-top: 16px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--dt-accent-primary, #4f46e5);
  color: var(--dt-text-inverse, #ffffff);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

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

/* --------------------------------------------------
 * Seller-only homepage category cards
 * Align Service Categories + Accessories with tai_home.php
 * Tailor Made / Accessories desktop card dimensions
 * -------------------------------------------------- */
@media (min-width: 992px) {
  .seller-home-category-grid {
    grid-template-columns: repeat(4, 285px) !important;
    gap: 30px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  .seller-home-category-grid .category-card-link {
    width: 285px !important;
    height: 235px !important;
    display: block !important;
    text-decoration: none !important;
  }

  .seller-home-category-grid .category-card {
    width: 285px !important;
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%) !important;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08) !important;
  }

  .seller-home-category-grid .category-card__image {
    width: 285px !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    padding-top: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  }

  .seller-home-category-grid .category-card__img {
    position: static !important;
    width: 285px !important;
    height: 145px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .seller-home-category-grid .category-card__placeholder {
    position: static !important;
    width: 285px !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .seller-home-category-grid .category-card__content {
    width: 285px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    line-height: 1 !important;
  }

  .seller-home-category-grid .category-card__eyebrow {
    display: block !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 0 8px 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .seller-home-category-grid .category-card__title {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* --------------------------------------------------
 * Desktop Shop by Category cards
 * Keep current image appearance, but remove white space
 * between media and caption.
 * Scope: tai_home.php top "Shop by Category" cards only.
 * -------------------------------------------------- */
@media (min-width: 992px) {
  .shop-category-grid {
    display: flex !important;
    gap: 30px !important;
    justify-content: center !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shop-category-grid > [class*="col-"] {
    flex: 0 0 calc((100% - 90px) / 4) !important;
    max-width: calc((100% - 90px) / 4) !important;
    float: none !important;
    width: calc((100% - 90px) / 4) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shop-category-grid a,
  .shop-category-card,
  .shop-category-media-frame,
  .shop-category-caption {
    float: none !important;
    width: 100% !important;
  }

  .shop-category-card {
    overflow: hidden !important;
    background-color: var(--dt-surface-card-muted, #F7F8FA) !important;
    border-radius: 5px !important;
  }

  .shop-category-media-frame {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 5px 5px 0 0 !important;
  }

  .shop-category-tile {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 5px 5px 0 0 !important;
  }

  .shop-category-tile img {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .shop-category-caption {
    margin-top: 0 !important;
    padding: 15px !important;
    border-radius: 0 0 5px 5px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }
}

/* --------------------------------------------------
 * Desktop homepage section title + spacing refinement
 * Scope: tai_home.php desktop only
 * -------------------------------------------------- */
@media (min-width: 992px) {
  .desktop-home-section-header {
    font-size: 22.5px !important;
    line-height: 1.2 !important;
  }

  .desktop-home-section-header--stacked {
    margin-top: 25px !important;
  }

  .desktop-home-section-header__more {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}

/* --------------------------------------------------
 * Mobile Shop by Category cards
 * Match desktop no-gap image/caption behavior.
 * Scope: tai_home_mobile.php top "Shop by Category" cards only.
 * -------------------------------------------------- */
@media (max-width: 991px) {
  .mobile-shop-category-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .mobile-shop-category-card.shop-category-card {
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-shop-category-card:hover,
  .mobile-shop-category-link:focus-visible .mobile-shop-category-card {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10),
                0 8px 10px -6px rgba(0, 0, 0, 0.10) !important;
  }

  .mobile-shop-category-media-frame.shop-category-media-frame {
    width: 100% !important;
    height: clamp(170px, 48vw, 230px) !important;
    min-height: clamp(170px, 48vw, 230px) !important;
    max-height: clamp(170px, 48vw, 230px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    background: #f7f8fa !important;
    display: block !important;
  }

  .mobile-shop-category-tile.shop-category-tile {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .mobile-shop-category-tile.shop-category-tile img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .mobile-shop-category-caption.shop-category-caption {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 16px 18px 18px !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    text-align: center !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .mobile-shop-category-caption h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--heading-font-family, "Playfair Display", serif) !important;
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #111827 !important;
  }

  .mobile-shop-category-caption p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--body-font-family, "Cormorant", serif) !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    color: #4b5563 !important;
  }

  .mobile-shop-category-cta {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: var(--primary-gold, #e2be74) !important;
    color: #111111 !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12) !important;
  }

  .mobile-shop-category-cta svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* --------------------------------------------------
 * Mobile Tailor Made + Accessories category cards
 * Remove visual gap between image frame and caption.
 * Scope: tai_home_mobile.php only sections:
 * - Tailor Made
 * - Accessories
 * -------------------------------------------------- */
@media (max-width: 991px) {
  .tailor-made .category-card,
  .mobile-accessories .category-card {
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #ffffff !important;
  }

  .tailor-made .category-card__image,
  .mobile-accessories .category-card__image {
    position: relative !important;
    width: 100% !important;

    /* Critical fix:
       Stop using the old 72% tall box that creates the grey dead zone. */
    padding-top: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    background: #f7f8fa !important;
  }

  .tailor-made .category-card__img,
  .mobile-accessories .category-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    /* Keep current no-crop behaviour. */
    object-fit: contain !important;
    object-position: top center !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .tailor-made .category-card__placeholder,
  .mobile-accessories .category-card__placeholder {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .tailor-made .category-card__content,
  .mobile-accessories .category-card__content {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;

    /* Caption begins immediately after image section. */
    padding: 1rem 1.25rem 1.25rem !important;

    box-sizing: border-box !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex: 1 !important;
  }
}


/* --------------------------------------------------
 * Seller-only mobile Tailor Made + Accessories cards
 * Match tai_home_mobile.php no-gap category card behavior.
 * Scope: tai_home_seller_only_mobile.php only.
 * -------------------------------------------------- */
@media (max-width: 991px) {
  .seller-only-tailor-made .category-card,
  .seller-only-accessories .category-card {
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #ffffff !important;
  }

  .seller-only-tailor-made .category-card__image,
  .seller-only-accessories .category-card__image {
    position: relative !important;
    width: 100% !important;
    padding-top: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    background: #f7f8fa !important;
  }

  .seller-only-tailor-made .category-card__img,
  .seller-only-accessories .category-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .seller-only-tailor-made .category-card__placeholder,
  .seller-only-accessories .category-card__placeholder {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .seller-only-tailor-made .category-card__content,
  .seller-only-accessories .category-card__content {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 1rem 1.25rem 1.25rem !important;
    box-sizing: border-box !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex: 1 !important;
  }
}