/* Catalog / About: feather display edges into white without filtering source pixels.
   Reveals own the outer clip-path; image lift owns translate; this layer owns masks. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) {
  --rc-soft-photo-x: clamp(4px, .75vw, 10px);
  --rc-soft-photo-y: clamp(5px, 1vw, 12px);
  --rc-soft-x: var(--rc-soft-photo-x);
  --rc-soft-y: var(--rc-soft-photo-y);
}

/* Both catalog plates share the same feather profile. Each mask follows the
   actual image bounds, including when contain framing leaves white space. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) :is(
  .rc-product-image-frame > img,
  .rc-product-stage [data-product-main],
  .rc-product-thumbnail img,
  .rc-selection-item img,
  .rc-album-image,
  .rc-archive-image-frame
) {
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--rc-soft-x), #000 calc(100% - var(--rc-soft-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--rc-soft-y), #000 calc(100% - var(--rc-soft-y)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--rc-soft-x), #000 calc(100% - var(--rc-soft-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--rc-soft-y), #000 calc(100% - var(--rc-soft-y)), transparent);
  mask-composite: intersect;
}

/* Products keep their native white-view margins and full contain framing.
   A narrow feather blends the backdrop, leaving furniture silhouettes clear. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) :is(
  .rc-product-image-frame > img,
  .rc-product-stage [data-product-main]
) { --rc-soft-x: clamp(2px, .35vw, 5px); --rc-soft-y: clamp(3px, .5vw, 7px); }
body.rc-site:is([data-page="catalog"], [data-page="about"]) :is(
  .rc-product-thumbnail img,
  .rc-selection-item img
) { --rc-soft-x: 2px; --rc-soft-y: 2px; }

/* Keep fixed 4:3 cards and thumbnails while sizing their replaced image elements
   to the native ratio. Masking a full-size contain box leaves an internal seam. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-product-image-frame > img {
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-product-thumbnail > .rc-image-lift-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-product-thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}

/* Remove rectangular lift shadows; vertical hover movement still works. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-image-lift-frame { box-shadow: none; }
body.rc-site:is([data-page="catalog"], [data-page="about"]) :is(
  .rc-product-image, .rc-product-image-frame, .rc-product-stage, .rc-product-gallery,
  .rc-album-image, .rc-archive-image-hit, .rc-archive-image-frame
) { background: #fff; }
body.rc-site[data-page="about"] .rc-about-photo-button img { background-color: transparent; }

/* Certificate pixels stay fully opaque. Only their existing padded mat fades. */
body.rc-site[data-page="about"] .rc-album-certificate .rc-album-image {
  --rc-soft-x: 8px;
  --rc-soft-y: 14px;
  border: 0;
  background: #f5f5f7;
}
body.rc-site[data-page="about"] .rc-album-certificate img { -webkit-mask-image: none; mask-image: none; }

/* The original poster and certificates get a padded mat in the viewer as well.
   Its fade ends before the image starts, so every letter and border survives. */
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-lightbox[data-image-kind="document"] .rc-archive-image-frame {
  --rc-soft-x: 6px;
  --rc-soft-y: 6px;
  padding: 12px;
  background: #f5f5f7;
}
body.rc-site:is([data-page="catalog"], [data-page="about"]) .rc-lightbox[data-image-kind="document"] img {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 760px) {
  body.rc-site[data-page="about"] .rc-album-certificate .rc-album-image {
    --rc-soft-x: 5px;
    --rc-soft-y: 8px;
  }
}

/* One continuous product-view canvas. The opaque white centre supports the
   original studio backgrounds; the broad falloff belongs to the dialog itself,
   so it crosses the image/copy column boundary without fading product pixels.
   Scene/detail photographs retain their own colours and complete rectangular frame. */
body.rc-site[data-page="catalog"] .rc-product-dialog {
  background:
    radial-gradient(ellipse 92% 100% at 22% 42%,
      #fff 0%, #fff 36%, rgba(255, 255, 255, .985) 58%,
      rgba(255, 255, 255, .92) 79%, rgba(251, 251, 251, .8) 100%),
    rgba(255, 255, 255, .68);
  border-color: rgba(255, 255, 255, .86);
  box-shadow: 0 30px 100px -36px rgba(24, 24, 24, .3),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(255, 255, 255, .5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.rc-site[data-page="catalog"] .rc-product-dialog :is(
  .rc-product-dialog-head,
  .rc-product-dialog-layout,
  .rc-product-gallery,
  .rc-product-stage,
  .rc-product-details,
  .rc-product-thumbnails
) { background: transparent; }
body.rc-site[data-page="catalog"] .rc-product-dialog-head {
  border-bottom-color: rgba(29, 29, 31, .1);
}
body.rc-site[data-page="catalog"] .rc-product-dialog .rc-product-thumbnail {
  background: rgba(255, 255, 255, .38);
}
@media (max-width: 760px) {
  /* Stacked image and copy use the same vertical light field, including the
     thumbnail row between them; there is no separate white image panel. */
  body.rc-site[data-page="catalog"] .rc-product-dialog {
    background:
      radial-gradient(ellipse 120% 65% at 50% 15%,
        #fff 0%, #fff 36%, rgba(255, 255, 255, .985) 58%,
        rgba(255, 255, 255, .92) 82%, rgba(251, 251, 251, .8) 100%),
      rgba(255, 255, 255, .78);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.rc-site[data-page="catalog"] .rc-product-dialog {
    background: linear-gradient(120deg, #fff 20%, #fff 54%, #f5f5f7 100%);
  }
}