/* Product-first catalogue with assigned on-body previews. */
#collection { padding: clamp(3rem, 6vw, 6rem) clamp(12px, 2vw, 32px); }
#collection > .collection-header, #collection > .collection-carousel { max-width: 1920px; margin-inline: auto; }
#collection .collection-header { grid-template-columns: 1fr auto; gap: 1rem 2rem; margin-bottom: 2rem; align-items: end; }
#collection .collection-header > div { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
#collection .collection-count { margin: 0; }
html[lang] #collection .collection-header h2 { font-size: clamp(1.65rem, 3vw, 3rem); line-height: 1.3; letter-spacing: 0.02em; }
#collection .collection-header h2 br { display: none; }
#collection .collection-header h2 span:last-child { margin-left: 0.4em; }
#collection .collection-intro { text-align: right; }
#collection .object-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 2.5rem 8px; overflow: visible; padding: 0; scroll-snap-type: none; }
#collection .collection-carousel-viewport { overflow: visible; }
#collection .carousel-arrow, #collection .carousel-controls { display: none; }
#collection .object-card { position: relative; }
#collection .object-image { aspect-ratio: 2 / 3; border: 0; }
#collection .object-image::after { display: none; }
#collection .object-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; filter: none; transform: none; }
#collection .object-image .catalog-model { position: absolute; inset: 0; opacity: 0; background: #0a0a0a; transition: opacity 240ms ease; }
#collection .object-image figcaption { top: 12px; left: 12px; bottom: auto; font-size: 0.65rem; }
#collection .object-meta { display: block; border: 0; padding: 14px 4px 0; }
#collection .object-meta p { font-size: 0.7rem; letter-spacing: 0.06em; }
#collection .object-meta h3 { font-size: 0.9rem; line-height: 1.6; letter-spacing: 0; overflow-wrap: anywhere; }
#collection .object-meta .catalog-price { display: block; margin: 8px 0 0; font-size: 0.9rem; color: var(--white); }
#collection .object-meta > a { display: inline-block; margin-top: 10px; font-size: 0.75rem; min-height: 32px; }
#collection .catalog-preview { display: block; position: relative; margin: 8px 4px 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid #686868; border-radius: 0; color: #fff; background: #111; font: inherit; font-size: 0.75rem; cursor: pointer; }
#collection .catalog-preview[hidden] { display: none; }
#collection .catalog-preview:focus-visible, #collection .object-link:focus-visible { outline: 2px solid white; outline-offset: 3px; }
#collection .model-ready.show-model .catalog-model { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  #collection .catalog-preview { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
  #collection .catalog-preview:focus-visible { position: relative; width: auto; height: auto; min-height: 44px; padding: 8px 12px; clip-path: none; }
  #collection .model-ready .object-link:hover .catalog-model,
  #collection .model-ready .object-link:focus-visible .catalog-model { opacity: 1; }
}
@media (max-width: 1100px) and (min-width: 681px) { #collection .object-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  #collection .object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 8px; }
  #collection .collection-header { grid-template-columns: 1fr; }
  #collection .collection-intro { text-align: left; }
  #collection .object-meta h3 { font-size: 0.85rem; }
  #collection .object-image figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) { #collection .object-image .catalog-model { transition: none; } }