
html[data-photo="a"],
html[data-photo="b"] {
  --photo-paper: #fcfdff;
  --photo-tint: #e8edf5;
  --photo-deep: #d6dfed;
  --photo-line: #c5cfdf;
  --photo-plinth: #f4f7fc;
  --photo-light: rgba(255, 255, 255, .88);
  --photo-shadow: rgba(19, 37, 74, .16);
}

html[data-photo="a"][data-pal="1"],
html[data-photo="b"][data-pal="1"] {
  --photo-tint: #f5e9ed;
  --photo-deep: #ecd5dd;
  --photo-line: #dfc3cc;
  --photo-plinth: #fcf4f6;
  --photo-shadow: rgba(80, 29, 49, .15);
}

html[data-photo="a"][data-pal="3"],
html[data-photo="b"][data-pal="3"] {
  --photo-tint: #e8f0e9;
  --photo-deep: #d4e3d7;
  --photo-line: #bed1c3;
  --photo-plinth: #f2f7f2;
  --photo-shadow: rgba(26, 63, 41, .16);
}

html[data-photo="a"][data-style="c"],
html[data-photo="b"][data-style="c"] {
  --photo-paper: #19221f;
  --photo-tint: #293831;
  --photo-deep: #35483d;
  --photo-line: #536355;
  --photo-plinth: #405247;
  --photo-light: rgba(221, 233, 217, .10);
  --photo-shadow: rgba(0, 0, 0, .35);
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img),
html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--radius, 18px);
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::before,
html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::after,
html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::before,
html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) > img,
html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) > img {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
  padding: 6% 6% 9%;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 7px 5px var(--photo-shadow));
  transform: none;
  transition: transform .25s ease;
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) {
  background:
    radial-gradient(ellipse at 35% 0%, var(--photo-light), transparent 66%),
    linear-gradient(160deg, var(--photo-paper) 12%, var(--photo-tint) 78%, var(--photo-deep));
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::before {
  left: 9%;
  right: 9%;
  bottom: 2%;
  height: 14%;
  background: radial-gradient(ellipse, var(--photo-shadow) 0%, transparent 68%);
}

html[data-photo="a"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::after {
  left: 12%;
  right: 12%;
  bottom: 7%;
  height: 11%;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--photo-paper), var(--photo-plinth) 62%, var(--photo-deep));
  box-shadow: 0 3px 0 var(--photo-deep), inset 0 1px 0 var(--photo-light);
}

html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) {
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, var(--photo-shadow) 5px 5.3px, transparent 5.3px 10px),
    var(--photo-paper);
  background-size: 20% 20%, auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  box-shadow: inset 0 0 0 1px var(--photo-line);
}

html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::before {
  left: 16%;
  top: 10%;
  width: 65%;
  height: 77%;
  border-radius: 50% 50% 3px 3px;
  background: linear-gradient(145deg, var(--photo-tint), var(--photo-deep));
}

html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img)::after {
  left: 21%;
  top: 7%;
  width: 65%;
  height: 77%;
  border: 1px solid var(--photo-line);
  border-radius: 50% 50% 3px 3px;
}

html[data-photo="b"] :is(.p-img, .pd-gallery .main, .lot-img, .b-deal-img, .a-rail-img, .c-item-img) > img {
  padding: 8%;
  filter: drop-shadow(0 4px 3px var(--photo-shadow));
}

html[data-photo="a"] .p-img .p-tags,
html[data-photo="b"] .p-img .p-tags {
  z-index: 2;
}

html[data-photo="a"] .p-media .p-add,
html[data-photo="b"] .p-media .p-add {
  z-index: 3;
}

html[data-photo="a"] .pd-gallery,
html[data-photo="b"] .pd-gallery {
  background: var(--photo-paper);
  border-radius: var(--radius, 18px);
  box-shadow: inset 0 0 0 1px var(--photo-line);
}

html[data-photo="a"] .pd-gallery .main,
html[data-photo="b"] .pd-gallery .main {
  border-radius: inherit;
}

html[data-photo="a"] .pd-gallery .main > img,
html[data-photo="b"] .pd-gallery .main > img {
  padding: 54px 6% 32px;
}

html[data-photo="a"] .pd-gallery .main .pd-assure.on-img,
html[data-photo="b"] .pd-gallery .main .pd-assure.on-img {
  z-index: 2;
}

html[data-photo="a"] .pd-gallery :is(.pd-count, .pd-dots),
html[data-photo="b"] .pd-gallery :is(.pd-count, .pd-dots) {
  z-index: 3;
}

html[data-photo="a"] :is(.lot-list li > img, .b-top > img, .qb-head > img),
html[data-photo="b"] :is(.lot-list li > img, .b-top > img, .qb-head > img) {
  box-sizing: border-box;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  padding: 3px;
  border-radius: 10px;
  mix-blend-mode: normal;
  filter: none;
  transform: none;
}

html[data-photo="a"] :is(.b-combo-row img, .b-main-deal img, img.b-main-deal),
html[data-photo="b"] :is(.b-combo-row img, .b-main-deal img, img.b-main-deal) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  padding: 5%;
  border-radius: var(--radius, 18px);
  mix-blend-mode: normal;
  filter: none;
  transform: none;
}

html[data-photo="a"] :is(.lot-list li > img, .b-top > img, .qb-head > img, .b-combo-row img, .b-main-deal img, img.b-main-deal) {
  background:
    radial-gradient(ellipse 40% 6% at 50% 85%, var(--photo-plinth) 0 85%, transparent 100%),
    radial-gradient(ellipse 44% 8% at 50% 88%, var(--photo-shadow), transparent 80%),
    radial-gradient(ellipse at 35% 0%, var(--photo-light), transparent 68%),
    linear-gradient(160deg, var(--photo-paper), var(--photo-tint));
}

html[data-photo="b"] :is(.lot-list li > img, .b-top > img, .qb-head > img, .b-combo-row img, .b-main-deal img, img.b-main-deal) {
  background:
    radial-gradient(ellipse 40% 43% at 47% 49%, var(--photo-tint) 0 98%, transparent 100%),
    var(--photo-paper);
  box-shadow: inset 0 0 0 1px var(--photo-line), inset 0 0 0 5px var(--photo-paper), inset 0 0 0 6px var(--photo-tint);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-photo="a"] :is(.p-img, .b-deal-img, .a-rail-img, .c-item-img):hover > img,
  html[data-photo="b"] :is(.p-img, .b-deal-img, .a-rail-img, .c-item-img):hover > img {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-photo="a"] :is(.p-card, .p-add, .p-img img, .pd-gallery img, .pd-dots i, .lot-img img, .lot-list li > img, .b-deal-img img, .b-top > img, .b-combo-row img, .b-main-deal img, img.b-main-deal, .a-rail-img img, .c-item-img img, .qb-head > img),
  html[data-photo="b"] :is(.p-card, .p-add, .p-img img, .pd-gallery img, .pd-dots i, .lot-img img, .lot-list li > img, .b-deal-img img, .b-top > img, .b-combo-row img, .b-main-deal img, img.b-main-deal, .a-rail-img img, .c-item-img img, .qb-head > img) {
    animation: none;
    transition: none;
    transform: none;
  }
}
