/* Modal Styling */
.ant-modal-content {
  background: var(--color-cream) !important;
  border: var(--border-width) solid var(--color-blackened) !important;
  border-radius: 0 !important;
}

.ant-modal-header {
  background: var(--color-cream) !important;
  border-bottom: 1px solid rgba(16, 15, 18, 0.1) !important;
  border-radius: 0 !important;
}

.ant-modal-title {
  font-family: var(--font-nav) !important;
  font-size: 18px !important;
  letter-spacing: 0.05em !important;
  color: var(--color-blackened) !important;
}

.ant-modal-close-x {
  color: var(--color-blackened) !important;
}

.ant-modal-close:hover {
  color: var(--color-gilded) !important;
}

.ant-modal-body {
  font-family: var(--font-body) !important;
  color: var(--color-blackened) !important;
}

/* Product modal layout */
.ant-modal-body .ant-row {
  gap: 0 !important;
}

.ant-modal-body .ant-col-md-8 {
  padding-right: 24px !important;
}

.ant-modal-body .ant-col-md-16 {
  display: flex !important;
  flex-direction: column !important;
}

.ant-modal-body #view-more {
  order: 99 !important;
  margin-top: 16px !important;
  align-self: flex-start !important;
}

/* Weight/dimensions table in modal - constrain width */
.ant-modal-body .ant-col table,
.ant-modal-body table[data-v-dd17ee4e] {
  width: auto !important;
  max-width: 280px !important;
}

.ant-modal-body .ant-col table th,
.ant-modal-body .ant-col table td {
  padding: 4px 12px 4px 0 !important;
  font-size: 13px !important;
}

/* Product info text in modal */
.ant-modal-body p,
.ant-modal-body span,
.ant-modal-body div,
.ant-modal-body .product-description,
.ant-modal-body .product-info,
.ant-modal-body .product-meta,
.ant-modal-body .product-details,
.ant-modal-root p,
.ant-modal-root span:not(.anticon),
.ant-modal-root .product-description,
.ant-modal-root .product-info {
  font-family: var(--font-body) !important;
  color: var(--color-blackened) !important;
  line-height: 1.6 !important;
}

.ant-modal-body h2,
.ant-modal-root h2,
.ant-modal h2 {
  font-family: var(--font-nav) !important;
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-blackened) !important;
  margin-bottom: 16px !important;
}

/* Modal Buttons (rendered at body level, outside .wholesale-ordering-page) */
.ant-modal .ant-btn-primary,
.ant-modal-root .ant-btn-primary,
.ant-modal-wrap .ant-btn-primary {
  background: var(--color-gilded) !important;
  background-color: var(--color-gilded) !important;
  border: var(--border-width) solid var(--color-blackened) !important;
  color: #fff !important;
  font-family: var(--font-nav) !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  height: auto !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.ant-modal .ant-btn-primary span,
.ant-modal-root .ant-btn-primary span,
.ant-modal-wrap .ant-btn-primary span {
  color: #fff !important;
}

.ant-modal .ant-btn-primary:hover,
.ant-modal .ant-btn-primary:focus,
.ant-modal-root .ant-btn-primary:hover,
.ant-modal-root .ant-btn-primary:focus,
.ant-modal-wrap .ant-btn-primary:hover,
.ant-modal-wrap .ant-btn-primary:focus {
  background: var(--color-blackened) !important;
  background-color: var(--color-blackened) !important;
  border-color: var(--color-blackened) !important;
  color: var(--color-cream) !important;
}

.ant-modal .ant-btn-default,
.ant-modal-root .ant-btn-default,
.ant-modal-wrap .ant-btn-default {
  background: var(--color-cream) !important;
  background-color: var(--color-cream) !important;
  border: var(--border-width) solid var(--color-blackened) !important;
  color: var(--color-blackened) !important;
  font-family: var(--font-nav) !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  height: auto !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.ant-modal .ant-btn-default:hover,
.ant-modal .ant-btn-default:focus,
.ant-modal-root .ant-btn-default:hover,
.ant-modal-root .ant-btn-default:focus,
.ant-modal-wrap .ant-btn-default:hover,
.ant-modal-wrap .ant-btn-default:focus {
  background: var(--color-blackened) !important;
  background-color: var(--color-blackened) !important;
  border-color: var(--color-blackened) !important;
  color: var(--color-cream) !important;
}

/* Modal form elements */
.ant-modal .ant-input-number,
.ant-modal-root .ant-input-number {
  background: var(--color-cream) !important;
  border: var(--border-width) solid var(--color-blackened) !important;
  border-radius: 0 !important;
}

.ant-modal .ant-input-number:hover,
.ant-modal-root .ant-input-number:hover {
  border-color: var(--color-gilded) !important;
}

.ant-modal .ant-input-number-focused,
.ant-modal-root .ant-input-number-focused {
  border-color: var(--color-gilded) !important;
  box-shadow: none !important;
}

.ant-modal .ant-input-number-input,
.ant-modal-root .ant-input-number-input {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--color-blackened) !important;
}

/* View More button in modal (uses ID #view-more) */
.ant-modal #view-more,
.ant-modal-root #view-more,
.ant-modal-wrap #view-more,
#view-more {
  background: var(--color-cream) !important;
  background-color: var(--color-cream) !important;
  border: var(--border-width) solid var(--color-blackened) !important;
  color: var(--color-blackened) !important;
  font-family: var(--font-nav) !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  height: auto !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.ant-modal #view-more:hover,
.ant-modal #view-more:focus,
.ant-modal-root #view-more:hover,
.ant-modal-root #view-more:focus,
.ant-modal-wrap #view-more:hover,
.ant-modal-wrap #view-more:focus,
#view-more:hover,
#view-more:focus {
  background: var(--color-blackened) !important;
  background-color: var(--color-blackened) !important;
  border-color: var(--color-blackened) !important;
  color: var(--color-cream) !important;
}