/* -------------------------------------------------------------------------
 * Site interface corrections
 * ------------------------------------------------------------------------- */

/* Keep the sticky blurred header transparent without the white repaint bug
 * that can occur in some WebKit/Chromium builds. */
.site-header {
  background-color: rgba(35, 42, 53, 0.01);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  isolation: isolate;
}

/* Match the What We Build card hover interaction. */
.why-benefit-card,
.support-grid > div {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.why-benefit-card:hover,
.support-grid > div:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 163, 255, 0.38);
  background: rgba(48, 59, 75, 0.88);
}

/* Product gallery images must remain free of overlaid labels and copy. */
.asset-slider-main .slider-copy {
  display: none;
}

/* Consistent dark native select menus across the public theme. */
.sort-control select,
.catalog-assets-section .sort-control select,
.form-field select,
.mk-product-purchase-form .variations select {
  color-scheme: dark;
  border-color: rgba(118, 139, 166, 0.42);
  background-color: #1b222d;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.sort-control select:hover,
.catalog-assets-section .sort-control select:hover,
.form-field select:hover,
.mk-product-purchase-form .variations select:hover {
  border-color: rgba(77, 163, 255, 0.52);
}

.sort-control select:focus,
.catalog-assets-section .sort-control select:focus,
.form-field select:focus,
.mk-product-purchase-form .variations select:focus {
  border-color: rgba(77, 163, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.11);
}

.sort-control select option,
.catalog-assets-section .sort-control select option,
.form-field select option,
.mk-product-purchase-form .variations select option {
  background: #1b222d;
  color: #f4f7fb;
}

/* Discounted prices: current price at the upper left, old price below at the right. */
.price,
.price-value {
  display: inline-grid;
  grid-template-columns: max-content;
  align-items: start;
  justify-items: stretch;
  gap: 3px;
  line-height: 1.05;
  vertical-align: top;
}

.price-now {
  display: block;
  grid-row: 1;
  justify-self: start;
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

.price-before {
  display: block;
  grid-row: 2;
  justify-self: end;
  color: var(--text-muted);
  font-size: 0.68em;
  font-weight: 650;
  line-height: 1.1;
  text-decoration-thickness: 1px;
}

.catalog-assets-section .price .price-now,
.price-value .price-now {
  display: block;
}

.catalog-assets-section .price .price-before,
.price-value .price-before {
  display: block;
}

.catalog-assets-section .price .price-before {
  font-size: 10px;
}

.price-value .price-before {
  font-size: 14px;
}