.artwork-background-picker {
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.artwork-background-picker__button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 34px;
}

.artwork-background-picker__button:hover,
.artwork-background-picker__button:focus-visible {
  color: var(--link-hover);
  outline: none;
}

.artwork-background-picker__icon {
  display: block;
  height: 24px;
  width: 24px;
}

.artwork-background-picker__swatch {
  border: 1px solid rgba(48, 48, 48, 0.32);
  border-radius: 999px;
  bottom: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  height: 9px;
  pointer-events: none;
  position: absolute;
  right: 3px;
  width: 9px;
}

.artwork-background-picker__panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(48, 48, 48, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(48, 48, 48, 0.18);
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
}

.artwork-background-picker__title {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 6px;
}

.artwork-background-picker__gradient {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%, rgba(48, 48, 48, 0.18)),
    linear-gradient(90deg, #ffffff 0%, #f6d5d5 14%, #f2ddb5 28%, #dbe9c9 42%, #c9e9df 56%, #d3ddf5 70%, #ead6f3 84%, #ffffff 100%);
  border-radius: 6px;
  cursor: crosshair;
  height: 112px;
  position: relative;
  touch-action: none;
  width: 176px;
}

.artwork-background-picker__gradient:focus-visible {
  outline: 2px solid rgba(196, 26, 26, 0.42);
  outline-offset: 3px;
}

.artwork-background-picker__handle {
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(48, 48, 48, 0.45), 0 2px 5px rgba(48, 48, 48, 0.22);
  height: 14px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 18%;
  transform: translate(-50%, -50%);
  width: 14px;
}

.artwork-wall-picker .artwork-background-picker__gradient {
  background-size: 100% 100%;
  height: 176px;
  width: 240px;
}

/* Fixed surfaces retain their own contrast, independently of the wall. */
.page-block.has-artwork-contrast .artwork-contact-modal,
:is(.page-gallery-wall-body, .page-studio-wall-body, .page-shop-wall-body) > main :is(.artwork-contact-modal, .artwork-appearance-controls, .gallery-artwork-info__purchase),
.page-shop-wall-body > main :is(.shop-size-config__dimensions, .shop-size-config__option-select, .shop-size-config__option, .shop-variant-select, .shop-purchase-form__row) {
  --text: #303030;
  --muted: #6b6258;
  --site-meta-color: #858585;
  --link: #303030;
  --link-hover: #5b0f19;
  --link-active: #5b0f19;
  --link-line: #c0c0c0;
  --link-hover-line: #eacccc;
  --accent: #265c4b;
  color: var(--text);
}

.page-shop-wall-body > main {
  background: var(--shop-page-background, #fff);
  color: var(--text);
  display: flow-root;
}

.page-shop-wall-body > main :is(.shop-filter-option, .shop-filter-group__title, .shop-product-detail__kind, .shop-article-search, .shop-article-search__input) {
  color: var(--text);
}

.page-shop-wall-body > main .shop-filter-option:hover,
.page-shop-wall-body > main .shop-filter-option:focus-visible,
.page-shop-wall-body > main .shop-article-search:hover,
.page-shop-wall-body > main .shop-article-search:focus-within {
  border-color: var(--link-hover);
  color: var(--link-hover);
}

.page-shop-wall-body > main .shop-filter-option.is-active,
.page-shop-wall-body > main .shop-catalog-nav a.is-active {
  border-color: var(--shop-filter-active);
  color: var(--shop-filter-active);
}

:is(.page-shop-wall-body > main, .page-block.has-artwork-contrast) .page-block-shop-card__cart-button:not(.is-in-cart):not(.is-added) {
  color: var(--text);
}

:is(.page-shop-wall-body > main, .page-block.has-artwork-contrast) .page-block-shop-card__cart-button:not(.is-in-cart):not(.is-added):hover {
  color: var(--link-hover);
}

:is(.page-shop-wall-body > main, .page-block.has-artwork-contrast) .save-action__button:not(.is-saved):not(:hover) .bookmark-icon:not(.is-filled) .bookmark-icon__heart {
  fill: transparent;
  stroke: var(--text);
}

:is(.page-shop-wall-body > main, .page-block.has-artwork-contrast) .shop-product-card select option {
  background: #fff;
  color: #303030;
}

:is(.page-shop-wall-body > main.is-artwork-wall-dark, .page-block.has-artwork-contrast.is-artwork-wall-dark) .shop-product-card select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.page-block.has-artwork-contrast:not(.is-artwork-wall-dark) .shop-product-card select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23222222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.page-block.has-artwork-contrast,
.page-block.has-artwork-contrast :is(.gallery-index__price, .gallery-index__contact-button),
:is(.page-gallery-wall-body, .page-studio-wall-body) > main :is(.gallery-index__price, .gallery-index__contact-button, .gallery-artwork-save-actions .chudospace-card-button--inline) {
  color: var(--text);
}

.page-block.has-artwork-contrast :is(.gallery-index__contact-button:hover, .gallery-index__contact-button:focus-visible),
:is(.page-gallery-wall-body, .page-studio-wall-body) > main :is(.gallery-index__contact-button:hover, .gallery-index__contact-button:focus-visible) {
  color: var(--link-hover);
}

:is(.page-gallery-wall-body, .page-studio-wall-body) > main :is(.gallery-filter__field span, .gallery-range-filter legend, .gallery-index__subtitle) {
  color: var(--muted);
}

:is(.page-gallery-wall-body, .page-studio-wall-body) > main .reaction-bar__button:not(.is-active):not(:hover),
:is(.page-gallery-wall-body, .page-studio-wall-body) > main .reaction-bar__button--readonly:not(.is-active) {
  color: var(--muted);
}

:is(.page-gallery-wall-body, .page-studio-wall-body) > main :is(.gallery-artwork-save-actions, .gallery-index__quick-actions) .save-action__button:not(.is-saved) .bookmark-icon:not(.is-filled) .bookmark-icon__heart {
  fill: transparent;
}

:is(.page-gallery-wall-body, .page-studio-wall-body) > main :is(.gallery-artwork-save-actions, .gallery-index__quick-actions) .save-action__button:not(.is-saved):not(:hover) .bookmark-icon:not(.is-filled) .bookmark-icon__heart {
  stroke: var(--text);
}

.artwork-appearance-controls {
  align-items: center;
  background: var(--surface-gray);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0;
  padding: 0 5px;
}

:is(.artwork-appearance-controls, .studio-appearance-form).artwork-appearance-dock {
  --artwork-appearance-bottom-clearance: max(env(safe-area-inset-bottom, 0px), var(--artwork-appearance-menu-height, 0px));
  bottom: calc(12px + var(--artwork-appearance-bottom-clearance));
  margin: 0;
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 1100;
}

@media (min-width: 721px) {
  :is(.artwork-appearance-controls, .studio-appearance-form).artwork-appearance-dock {
    --artwork-appearance-bottom-clearance: max(env(safe-area-inset-bottom, 0px), var(--artwork-appearance-footer-offset, 0px));
    right: max(var(--site-safe-padding-x), env(safe-area-inset-right, 0px), calc((100% - var(--site-canvas-width)) / 2 + var(--site-safe-padding-x)));
  }
}

.artwork-appearance-dock .artwork-background-picker__panel,
.artwork-appearance-dock .studio-appearance-status:not(.visually-hidden) {
  bottom: calc(100% + 8px);
  top: auto;
}

.artwork-appearance-dock .artwork-background-picker__panel {
  max-height: max(0px, calc(100dvh - 74px - var(--artwork-appearance-bottom-clearance)));
  overflow-y: auto;
}

.artwork-wall-picker .artwork-background-picker__button {
  color: #505050;
  width: 25px;
}

.artwork-wall-picker__swatch {
  background: #ffffff;
  border: 2.7px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  height: 19px;
  width: 19px;
}

.artwork-wall-picker__reset {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #303030;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 10px;
  min-height: 28px;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.artwork-frame-toggle {
  align-items: center;
  color: #505050;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  margin: 0;
  width: 26px;
}

.artwork-frame-toggle input {
  appearance: none;
  background: transparent;
  border: 2.7px solid currentColor;
  border-radius: 3px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: grid;
  height: 18px;
  margin: 0;
  padding: 0;
  place-content: center;
  width: 18px;
}

.artwork-frame-toggle input::after {
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  content: "";
  height: 9px;
  transform: translateY(-1px) rotate(45deg);
  visibility: hidden;
  width: 5px;
}

.artwork-frame-toggle input:checked::after {
  visibility: visible;
}

.artwork-wall-picker .artwork-background-picker__button:hover,
.artwork-wall-picker .artwork-background-picker__button:focus-visible,
.artwork-frame-toggle:hover {
  color: var(--link-hover);
}

.artwork-wall-picker button:focus-visible,
.artwork-frame-toggle input:focus-visible {
  outline: 2px solid #c41a1a;
  outline-offset: 3px;
}

.artwork-appearance-framed img[data-artwork-frame-eligible="1"]:not([data-artwork-frame-excluded] *) {
  border-radius: 1px;
  outline: var(--artwork-frame-width, 5px) solid #050505;
  outline-offset: calc(-1 * var(--artwork-frame-width, 5px));
}

.page-block-artwork-listing {
  --artwork-frame-width: 5px;
}

@media (max-width: 720px) {
  .page-block-artwork-listing {
    --artwork-frame-width: 3px;
  }

  /* Keep the 7px icon gap without shrinking the click targets. */
  .artwork-wall-picker__swatch {
    border-width: 1.7px;
    height: 17px;
    transform: translateX(1px);
    width: 17px;
  }

  .artwork-frame-toggle input {
    border-width: 1.7px;
    height: 16px;
    transform: translateX(-1px);
    width: 16px;
  }

}