/* v2.2.3.2: extended theme coverage for presets and missing color hooks */

.afp-photo-lightbox {
  background: color-mix(in srgb, var(--afp-gallery-lightbox-overlay, #16100c) 72%, transparent) !important;
}

@media (max-width: 767px) {
  .afp-widget .afp-range-shell {
    border-color: color-mix(in srgb, var(--afp-tier-row-border, var(--afp-border)) 96%, white 4%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--afp-panel-bg, var(--afp-surface)) 99%, white 1%) 0%,
      color-mix(in srgb, var(--afp-surface, #fffaf7) 99%, white 1%) 100%
    ) !important;
  }

  .afp-widget .afp-range-toggle__action,
  .afp-widget .afp-tier-table thead tr:first-child th {
    border-color: color-mix(in srgb, var(--afp-button-secondary-border, var(--afp-border)) 98%, white 2%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--afp-button-secondary-bg, var(--afp-surface)) 100%, white 0%) 0%,
      color-mix(in srgb, var(--afp-surface, #fffaf7) 98%, var(--afp-accent-soft, #f1dfd6) 2%) 100%
    ) !important;
    color: color-mix(in srgb, var(--afp-accent, #b56c52) 92%, var(--afp-dark, #2d241f) 8%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--afp-surface, white) 92%, white 8%), 0 6px 18px rgba(41, 28, 21, 0.03) !important;
  }

  .afp-widget .afp-tier-table tbody tr {
    border-color: color-mix(in srgb, var(--afp-tier-row-border, var(--afp-border)) 96%, white 4%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--afp-tier-row-bg, var(--afp-panel-bg)) 99%, white 1%) 0%,
      color-mix(in srgb, var(--afp-surface, #fffaf7) 97%, var(--afp-accent-soft, #f1dfd6) 3%) 100%
    ) !important;
  }

  .afp-widget .afp-tier-table tbody tr::after {
    background: color-mix(in srgb, var(--afp-tier-row-border, var(--afp-border)) 96%, white 4%) !important;
  }

  .afp-widget .afp-tier-table tbody td::before {
    color: color-mix(in srgb, var(--afp-muted, #6f5c54) 88%, white 12%) !important;
  }
}