.arts-catalog {
  --olive: #454832;
  --cream: #f3eddf;
  --paper: #efe7d9;
  --gutter: 5vw;
  --panel-width: 76vw;
  --stage-top: 27vh;
  --stage-bottom: 13vh;
  --catalog-heading-top: 6.1vh;
  --line: rgba(243, 237, 223, 0.32);
}

.arts-catalog * {
  box-sizing: border-box;
}

.arts-catalog {
  margin: 0;
  background: var(--olive);
  color: var(--cream);
  font: 400 13px/1.6 "ARTs Sans", Arial, sans-serif;
}

.arts-catalog a {
  color: inherit;
  text-decoration: none;
}

.arts-catalog button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.arts-catalog button:disabled {
  cursor: default;
}

.arts-catalog button,
.arts-catalog a {
  -webkit-tap-highlight-color: transparent;
}

.arts-catalog ::selection {
  background: #cad0a9;
  color: #303624;
}

.arts-catalog :focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

.arts-catalog .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.arts-catalog .display {
  font-family: "ARTs Display", Georgia, serif;
  font-stretch: 62.5%;
  font-variation-settings: "wdth" 62.5;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  transform-origin: left center;
  white-space: nowrap;
}

.arts-catalog .eyebrow {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.27em;
  margin: 0 0 21px;
}

.arts-catalog {
  position: relative;
}

.arts-catalog .catalog__viewport {
  height: 100vh;
  height: 100svh;
  min-height: 580px;
  position: sticky;
  top: 0;
  overflow: hidden;
  isolation: isolate;
  outline: none;
  background: var(--olive);
}

.arts-catalog .catalog__material {
  /* Preserve the 1672 × 941 texture scale within each viewport-sized tile. */
  --material-tile-width: max(124vw, 184.792svh);
  position: absolute;
  inset: calc(-1 * var(--stage-top) - 2svh) 0
  calc(-1 * var(--stage-bottom) - 2svh) -12vw;
  background-image: url("assets/olive-drawings.11ca2c6c5936.webp");
  background-size: var(--material-tile-width) auto;
  background-position: calc((124vw - var(--material-tile-width)) / 2) center;
  background-repeat: repeat-x;
  z-index: -2;
  pointer-events: none;
}

.arts-catalog .catalog__material:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 33, 22, 0.08);
}

/*
  The scene always travels as one horizontal strip. Once enhancement has
  measured it, the repeated material phase and the card layers receive small,
  scroll-derived depth offsets. Nothing in this group changes opacity or
  clipping, so the static and interrupted-script states stay full.
*/
.arts-catalog.is-enhanced:not(.is-reduced) .catalog__material {
  transform: translate3d(var(--catalog-material-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .catalog__heading {
  position: absolute;
  top: calc(var(--catalog-heading-top) - var(--stage-top));
  left: var(--gutter);
  right: auto;
  width: calc(100vw - var(--gutter) * 2);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.arts-catalog .catalog__heading h2 {
  font-size: clamp(60px, 6.5vw, 120px);
}

.arts-catalog .catalog__window {
  position: absolute;
  inset: var(--stage-top) 0 var(--stage-bottom);
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
}

.arts-catalog .catalog__window.is-dragging {
  cursor: grabbing;
}

.arts-catalog .catalog__window.is-dragging a {
  pointer-events: none;
}

.arts-catalog .catalog__scene {
  position: relative;
  width: max-content;
  height: 100%;
  isolation: isolate;
  will-change: transform;
}

.arts-catalog .catalog__track {
  display: flex;
  width: max-content;
  height: 100%;
  padding-left: var(--gutter);
}

.arts-catalog .product-panel {
  position: relative;
  mix-blend-mode: lighten;
  flex: 0 0 var(--panel-width);
  width: var(--panel-width);
  height: 100%;
  padding-right: 5vw;
  border-right: 1px solid rgba(243, 237, 223, 0.17);
}

.arts-catalog .product-panel__composition {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.arts-catalog .product-panel:not(:first-child) .product-panel__composition {
  padding-left: 4.3vw;
}

.arts-catalog.is-enhanced:not(.is-reduced) .product-panel__composition {
  transform: translate3d(var(--catalog-card-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .product-panel:not(:first-child) {
  padding-left: 4.3vw;
}

.arts-catalog .product-panel__number {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 400 clamp(15px, 1.4vw, 24px) / 1 "ARTs Display", Georgia, serif;
  position: relative;
  z-index: 2;
}

.arts-catalog .product-panel__number span {
  width: 68px;
  height: 1px;
  background: currentColor;
  opacity: 0.46;
}

.arts-catalog .product-panel__title {
  position: relative;
  z-index: 2;
  margin-top: 21px;
  font-size: clamp(70px, 7.65vw, 138px);
  pointer-events: none;
  width: max-content;
}

.arts-catalog .product-panel__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 5%;
  top: 24%;
  width: 82%;
  height: 67%;
  z-index: 1;
  outline-offset: -7px;
}

.arts-catalog .product-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  transition: transform 850ms cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: transform;
}

.arts-catalog .product-panel__visual:hover .product-panel__image {
  transform: translateY(-10px) rotate(-1deg);
}

.arts-catalog .product-panel--cornice .product-panel__visual {
  left: 0;
  width: 90%;
  top: 7%;
  height: 94%;
}

.arts-catalog .product-panel--rosette .product-panel__visual {
  left: 6%;
  width: 72%;
  top: 20%;
  height: 76%;
}

.arts-catalog .product-panel--corbel .product-panel__composition {
  /* Keep the tall specimen below the actual title, including responsive type. */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.arts-catalog .product-panel--corbel .product-panel__visual {
  position: relative;
  left: 12%;
  width: 67%;
  top: auto;
  height: auto;
  min-height: 0;
  margin-top: 20px;
  margin-bottom: 2vh;
}

.arts-catalog .product-panel__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 47%;
  min-height: 47px;
  padding-left: 21px;
  border-left: 1px solid rgba(243, 237, 223, 0.5);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 3;
}

.arts-catalog .product-panel:not(:first-child) .product-panel__caption {
  left: 4.3vw;
}

.arts-catalog .arrow {
  position: relative;
  display: block;
  width: 57px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
  transition: width 0.4s;
}

.arts-catalog .arrow:after {
  content: "";
  position: absolute;
  right: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.arts-catalog a:hover .arrow {
  width: 72px;
}

.arts-catalog .drawing {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  color: #d8d4b9;
  stroke: currentColor;
  stroke-width: 0.85;
  left: 19%;
  top: 5%;
  width: 72%;
  height: 90%;
  opacity: 0.25;
}

.arts-catalog .drawing__construction {
  opacity: 0.44;
  stroke-width: 0.65;
}

.arts-catalog .drawing__profile {
  opacity: 0.7;
}

.arts-catalog .drawing--rosette {
  left: 9%;
  width: 76%;
  height: 108%;
  top: -2%;
}

.arts-catalog .drawing--corbel {
  left: 22%;
  width: 61%;
  height: 104%;
  top: 0;
}

.arts-catalog.is-enhanced:not(.is-reduced) .drawing {
  transform: translate3d(var(--catalog-drawing-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .catalog-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  color: var(--olive);
  isolation: isolate;
  z-index: 2;
}

.arts-catalog .catalog-panel__paper {
  position: absolute;
  inset: calc(-1 * var(--stage-top)) 0 calc(-1 * var(--stage-bottom));
  background: var(--paper);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.arts-catalog .catalog-panel__paper:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/olive-drawings.11ca2c6c5936.webp") center/cover;
  mix-blend-mode: multiply;
  opacity: 0.13;
  filter: grayscale(1);
}

.arts-catalog .catalog-panel__paper:after {
  content: "";
  position: absolute;
  width: 105vw;
  height: 105vw;
  border: 1px solid rgba(69, 72, 50, 0.3);
  border-radius: 50%;
  left: 47%;
  top: 0;
}

.arts-catalog .catalog-panel__body {
  position: relative;
  padding: 0 0 0 9vw;
  z-index: 2;
  overflow: hidden;
}

.arts-catalog.is-enhanced:not(.is-reduced) .catalog-panel__body {
  transform: translate3d(var(--catalog-terminal-body-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .catalog-panel__title {
  font-size: clamp(100px, 12vw, 210px);
  line-height: 0.88;
  letter-spacing: -0.065em;
  margin-top: 28px;
  width: max-content;
}

.arts-catalog .catalog-panel__title-line {
  display: block;
}

.arts-catalog.is-enhanced:not(.is-reduced) .catalog-panel__title-line {
  transform: translate3d(var(--catalog-line-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .catalog-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  max-width: 60vw;
  border-top: 1px solid rgba(69, 72, 50, 0.4);
  padding-top: 23px;
  margin-top: 35px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}

.arts-catalog .catalog-panel__link .arrow {
  width: 80px;
}

.arts-catalog .catalog-panel__link:hover .arrow {
  width: 105px;
}

.arts-catalog .catalog-panel__art {
  position: absolute;
  inset: calc(-1 * var(--stage-top)) 0 calc(-1 * var(--stage-bottom));
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.arts-catalog .catalog-panel__draft {
  position: absolute;
  right: -12vw;
  top: 13%;
  width: min(64vw, 940px);
  height: 74%;
  background: url("assets/olive-drawings.11ca2c6c5936.webp") 68% center / auto 100% no-repeat;
  filter: grayscale(1) contrast(0.78);
  mix-blend-mode: multiply;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 20%,
    rgba(0, 0, 0, 0.65) 50%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 20%,
    rgba(0, 0, 0, 0.65) 50%,
    transparent 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.arts-catalog.is-enhanced:not(.is-reduced) .catalog-panel__draft {
  transform: translate3d(var(--catalog-terminal-art-x, 0px), 0, 0);
  will-change: transform;
}

.arts-catalog .catalog-panel__object-field {
  position: absolute;
  top: 50%;
  right: clamp(-34px, 2vw, 26px);
  width: min(46vw, 650px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: url("assets/rosette-acanthus-v1.916c77a5189f.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(10px 20px 16px rgba(69, 72, 50, 0.18));
  isolation: isolate;
}

.arts-catalog.is-enhanced:not(.is-reduced) .catalog-panel__object-field {
  transform: translate3d(var(--catalog-terminal-art-x, 0px), -50%, 0);
  will-change: transform;
}

.arts-catalog .catalog__controls {
  position: absolute;
  z-index: 4;
  bottom: 4.5vh;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  transition: color 0.3s;
}

.arts-catalog .catalog__count {
  white-space: nowrap;
  font: 400 17px/1 "ARTs Display", Georgia, serif;
  font-variant-numeric: tabular-nums;
  min-width: 74px;
}

.arts-catalog .catalog__slash {
  margin: 0 11px;
  opacity: 0.6;
}

.arts-catalog .catalog__progress {
  height: 44px;
  max-width: 900px;
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 18px;
}

.arts-catalog .catalog__progress-line {
  position: absolute;
  height: 1px;
  top: 50%;
  left: 22px;
  right: 22px;
  background: currentColor;
  opacity: 0.3;
  pointer-events: none;
}

.arts-catalog .catalog__progress-line span {
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

.arts-catalog .catalog__stop {
  width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
}

.arts-catalog .catalog__stop span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--olive);
  transition: transform 0.3s, background 0.3s;
}

.arts-catalog .catalog__stop.is-active span {
  background: currentColor;
  transform: scale(1.3);
}

.arts-catalog .catalog__stop:hover span {
  transform: scale(1.4);
}

.arts-catalog .catalog__hint {
  font-size: 9px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}

.arts-catalog .hint-mobile {
  display: none;
}

.arts-catalog .catalog__arrows {
  display: flex;
  align-items: center;
  gap: 20px;
}

.arts-catalog .nav-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  transition: opacity 0.2s;
}

.arts-catalog .nav-arrow svg {
  width: 34px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}

.arts-catalog .nav-arrow:disabled {
  opacity: 0.25;
}

.arts-catalog .nav-arrow:not(:disabled):hover {
  opacity: 0.6;
}

.arts-catalog .catalog__viewport.is-final .catalog__controls {
  color: var(--olive);
}

.arts-catalog .catalog__viewport.has-paper .catalog__arrows {
  color: var(--olive);
}

.arts-catalog .catalog__viewport.has-paper .catalog__hint {
  visibility: hidden;
}

.arts-catalog .catalog__viewport.is-final .catalog__hint {
  visibility: hidden;
}

.arts-catalog .catalog__viewport.is-final .catalog__stop:not(.is-active) span {
  background: var(--paper);
}

/* With no JS, or reduced motion, keep a normal, usable horizontal gallery. */
.arts-catalog:not(.is-enhanced) .catalog__window,
.arts-catalog.is-native .catalog__window {
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: auto;
}

/* In horizontal fallback the scene begins at the viewport edge. */
.arts-catalog:not(.is-enhanced) .catalog__heading,
.arts-catalog.is-native .catalog__heading {
  top: var(--catalog-heading-top);
}

.arts-catalog:not(.is-enhanced) .catalog__track,
.arts-catalog.is-native .catalog__track {
  padding-top: var(--stage-top);
  padding-bottom: var(--stage-bottom);
}

.arts-catalog:not(.is-enhanced) .catalog__material,
.arts-catalog.is-native .catalog__material {
  inset: -2% 0 -2% -12vw;
}

.arts-catalog:not(.is-enhanced) .catalog__window::-webkit-scrollbar,
.arts-catalog.is-native .catalog__window::-webkit-scrollbar {
  display: none;
}

.arts-catalog:not(.is-enhanced) [data-panel],
.arts-catalog.is-native [data-panel] {
  scroll-snap-align: start;
  scroll-margin-left: var(--gutter);
}

.arts-catalog:not(.is-enhanced) .catalog-panel,
.arts-catalog.is-native .catalog-panel {
  scroll-margin-left: 0;
}

.arts-catalog.is-native .catalog__viewport {
  position: relative;
}

.arts-catalog.is-native .catalog__scene {
  transform: none !important;
  will-change: auto;
}

@media (min-width: 1700px) {
.arts-catalog .product-panel__visual {
    max-width: 1100px;
  }

.arts-catalog .product-panel__caption {
    font-size: 12px;
  }

}

@media (max-width: 900px) {
.arts-catalog {
    --stage-top: 25vh;
    --stage-bottom: 15vh;
    --panel-width: 84vw;
  }

.arts-catalog .catalog__heading h2 {
    font-size: 6.5vw;
  }

.arts-catalog .catalog__controls {
    gap: 12px;
  }

.arts-catalog .catalog__hint {
    display: none;
  }

.arts-catalog .catalog__progress {
    margin: 0;
  }

.arts-catalog .catalog__arrows {
    gap: 5px;
  }

.arts-catalog .product-panel__title {
    font-size: 9vw;
  }

.arts-catalog .product-panel__caption {
    width: 67%;
    font-size: 9px;
  }

.arts-catalog .catalog-panel__title {
    font-size: 16vw;
  }

.arts-catalog .catalog-panel__draft {
    right: -20vw;
    width: 78vw;
    opacity: 0.24;
  }

.arts-catalog .catalog-panel__object-field {
    width: min(56vw, 560px);
  }

}

@media (max-width: 600px) {
.arts-catalog {
    --gutter: 7vw;
    --panel-width: 87vw;
    --stage-top: 25svh;
    --stage-bottom: 16svh;
    --catalog-heading-top: 6svh;
  }

.arts-catalog .catalog__viewport {
    min-height: 600px;
  }

.arts-catalog .eyebrow {
    font-size: 9px;
    letter-spacing: 0.23em;
    margin-bottom: 17px;
  }

.arts-catalog .catalog__heading h2 {
    font-size: 11.1vw;
    white-space: normal;
    max-width: 100%;
    line-height: 1.12;
    width: 100%;
  }

.arts-catalog .catalog__window {
    touch-action: pan-x pan-y;
  }

.arts-catalog .product-panel {
    padding-right: 7vw;
  }

.arts-catalog .product-panel:not(:first-child) {
    padding-left: 5vw;
  }

.arts-catalog .product-panel:not(:first-child) .product-panel__composition {
    padding-left: 5vw;
  }

.arts-catalog .product-panel__number {
    font-size: 14px;
    gap: 13px;
  }

.arts-catalog .product-panel__number span {
    width: 45px;
  }

.arts-catalog .product-panel__title {
    font-size: 15vw;
    margin-top: 20px;
  }

.arts-catalog .product-panel--corbel .product-panel__title {
    font-size: 13.7vw;
  }

.arts-catalog .product-panel__visual,
.arts-catalog .product-panel--cornice .product-panel__visual {
    left: 0;
    width: 91%;
    top: 27%;
    height: 61%;
  }

.arts-catalog .product-panel--rosette .product-panel__visual {
    left: 4%;
    width: 81%;
    top: 28%;
    height: 61%;
  }

.arts-catalog .product-panel--corbel .product-panel__visual {
    left: 8%;
    width: 80%;
    top: auto;
    height: auto;
  }

.arts-catalog .product-panel__caption {
    width: 75%;
    padding-left: 13px;
    min-height: 38px;
    font-size: 8px;
    letter-spacing: 0.17em;
  }

.arts-catalog .product-panel:not(:first-child) .product-panel__caption {
    left: 5vw;
  }

.arts-catalog .product-panel__caption .arrow {
    width: 34px;
  }

.arts-catalog .drawing {
    left: 0;
    top: 19%;
    width: 98%;
    height: 72%;
    opacity: 0.65;
  }

.arts-catalog .drawing--rosette {
    top: 20%;
    height: 78%;
  }

.arts-catalog .drawing--corbel {
    left: 13%;
    top: 18%;
    height: 85%;
    width: 80%;
  }

.arts-catalog .catalog__controls {
    bottom: 4svh;
    gap: 8px;
    flex-wrap: wrap;
  }

.arts-catalog .catalog__count {
    font-size: 13px;
    min-width: 62px;
  }

.arts-catalog .catalog__slash {
    margin: 0 9px;
  }

.arts-catalog .catalog__arrows {
    gap: 0;
  }

.arts-catalog .nav-arrow {
    width: 34px;
  }

.arts-catalog .nav-arrow svg {
    width: 26px;
  }

.arts-catalog .catalog__progress {
    min-width: 100px;
  }

.arts-catalog .catalog__stop {
    width: 36px;
  }

.arts-catalog .catalog__progress-line {
    left: 18px;
    right: 18px;
  }

.arts-catalog .catalog__hint {
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    font-size: 7px;
  }

.arts-catalog .hint-desktop {
    display: none;
  }

.arts-catalog .hint-mobile {
    display: inline;
  }

.arts-catalog .catalog-panel__body {
    padding-left: 9vw;
  }

.arts-catalog .catalog-panel__title {
    font-size: 24vw;
    margin-top: 31px;
  }

.arts-catalog .catalog-panel__link {
    width: 70vw;
    max-width: 70vw;
    font-size: 9px;
    margin-top: 36px;
  }

.arts-catalog .catalog-panel__draft {
    top: 43%;
    right: -45%;
    width: 145%;
    height: 44%;
    background-position: 68% center;
    opacity: 0.17;
  }

.arts-catalog .catalog-panel__object-field {
    top: 58%;
    right: -24vw;
    width: 78vw;
  }

.arts-catalog .catalog-panel__paper:after {
    width: 210vw;
    height: 210vw;
    left: 38%;
    top: 20%;
  }

}

@media (max-height: 650px) and (min-width: 601px) {
.arts-catalog {
    --stage-top: 27vh;
    --stage-bottom: 15vh;
    --catalog-heading-top: 4vh;
  }

.arts-catalog .catalog__viewport {
    min-height: 470px;
  }

.arts-catalog .catalog__heading h2 {
    font-size: 8vh;
  }

.arts-catalog .eyebrow {
    font-size: 9px;
    margin-bottom: 13px;
  }

.arts-catalog .product-panel__title {
    font-size: 10vh;
    margin-top: 13px;
  }

.arts-catalog .product-panel__number {
    font-size: 15px;
  }

.arts-catalog .catalog-panel__title {
    font-size: 15vh;
    margin-top: 20px;
  }

.arts-catalog .catalog-panel__link {
    margin-top: 18px;
  }

.arts-catalog .catalog__controls {
    bottom: 3vh;
  }

}

@media (prefers-reduced-motion: reduce) {
.arts-catalog *,
.arts-catalog *:before,
.arts-catalog *:after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

.arts-catalog .catalog__scene,
.arts-catalog .product-panel__image {
    will-change: auto;
  }

.arts-catalog .hint-desktop {
    display: none;
  }

.arts-catalog .hint-mobile {
    display: inline;
  }

}



.arts-catalog .product-panel__number,
.arts-catalog .catalog__count {font-stretch:62.5%;font-variation-settings:"wdth" 62.5;}

/* Reserve compositor layers only while this large strip is near the viewport.
   The dimensions and transport remain intact when its GPU hints are released. */
.arts-catalog:not(.is-in-view) .catalog__material,
.arts-catalog:not(.is-in-view) .catalog__heading,
.arts-catalog:not(.is-in-view) .catalog__scene,
.arts-catalog:not(.is-in-view) .product-panel__composition,
.arts-catalog:not(.is-in-view) .product-panel__visual img,
.arts-catalog:not(.is-in-view) .drawing,
.arts-catalog:not(.is-in-view) .catalog-panel__body,
.arts-catalog:not(.is-in-view) .catalog-panel__title-line,
.arts-catalog:not(.is-in-view) .catalog-panel__draft,
.arts-catalog:not(.is-in-view) .catalog-panel__object-field { will-change: auto; }
/* Both stages already clip their content; contain repaint damage locally. */
.arts-catalog .catalog__viewport { contain: paint; }