/* Collection details, based on the Figma collection dialog. */
html.collection-modal-open, html.collection-modal-open body { overflow: hidden; }
.collection-card[data-collection-open] { cursor: pointer; }
.collection-card[data-collection-open]:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 4px; }
.collection-modal[hidden], .collection-modal__gallery[hidden] { display: none !important; }
.collection-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 30px 24px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .18s ease; }
.collection-modal.is-open { opacity: 1; }
.collection-modal__backdrop { position: fixed; inset: 0; background: rgba(28,28,28,.65); }
.collection-modal__dialog { position: relative; width: 67.625rem; max-width: 100%; margin: auto; padding: 1.875rem 1.875rem 2.8125rem; background: #fff; color: #1c1c1c; outline: none; }
.collection-modal__close { position: absolute; right: 7px; top: 5px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: #fff; color: #1c1c1c; cursor: pointer; font-size: 16px; }
.collection-modal__close:focus-visible, .collection-modal button:focus-visible { outline: 2px solid #8c7160; outline-offset: 2px; }
.collection-modal__intro, .collection-modal__models { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; align-items: start; }
.collection-modal__models { margin-top: 3.75rem; }
.collection-modal__cover { display: block; width: 100%; height: auto; aspect-ratio: 506/447; object-fit: cover; }
.collection-modal__intro-copy { display: flex; flex-direction: column; gap: 1.875rem; min-width: 0; }
.collection-modal__eyebrow { margin: 0 0 .625rem; font-size: 1.25rem; font-weight: 600; line-height: 1.2; opacity: .5; text-transform: uppercase; }
.collection-modal__title { margin: 0; font-family: 'Peignot', serif; font-size: 2.5rem; font-weight: 400; line-height: 0.9; }
.collection-modal__description { font-size: 1rem; line-height: 1.2; opacity: .7; overflow-wrap: anywhere; }
.collection-modal__description p { margin: 0; }
.collection-modal__description p + p { margin-top: 1.2em; }
.collection-modal__request { width: 19.8125rem; max-width: 100%; }
.collection-modal__specs { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 26.875rem; min-width: 0; }
.collection-modal__model-name { margin: .625rem 0 0; font-size: 1.25rem; line-height: 1.2; font-weight: 600; opacity: .5; }
.collection-modal__facts { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1rem; line-height: 1.2; }
.collection-modal__facts p { margin: 0; }
.collection-modal__facts strong { font-weight: 600; }
.collection-modal__colors { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.collection-modal__color { display: flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 1px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.collection-modal__color.is-active { border-color: #1c1c1c; }
.collection-modal__color img { display: block; width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; }
.collection-modal__color span { font-size: .75rem; }
.collection-modal__composition { display: flex; gap: .625rem; margin: .625rem 0 0; }
.collection-modal__composition > div { flex: 1; min-width: 0; }
.collection-modal__composition > div + div { border-left: 1px solid rgba(0,0,0,.25); padding-left: .625rem; }
.collection-modal__composition dt { font-size: 2.5rem; line-height: 1; font-weight: 400; }
.collection-modal__composition dd { margin: .3125rem 0 0; font-size: .875rem; opacity: .6; }
.collection-modal__gallery-stage { display: grid; grid-template-columns: 3.125rem minmax(0,1fr) 3.125rem; align-items: center; gap: .625rem; }
.collection-modal__previous, .collection-modal__next { display: flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; padding: 0; border: 1px solid #1c1c1c; border-radius: 50%; cursor: pointer; background: #1c1c1c; }
.collection-modal__previous img { transform: rotate(180deg); }
.collection-modal__previous img, .collection-modal__next img { filter: brightness(0) invert(1); }
.collection-modal__previous.slick-disabled, .collection-modal__next.slick-disabled { background: transparent; opacity: 1; cursor: default; }
.collection-modal__previous.slick-disabled img, .collection-modal__next.slick-disabled img { filter: brightness(0); }
.collection-modal .slick-arrow:hover { opacity: 1; }
.collection-modal__gallery-stage > .slick-arrow { position: static; transform: none; }
.collection-modal__photos { min-width: 0; grid-column: 2; }
.collection-modal__photos:not(.slick-initialized) > div:not(:first-child) { display: none; }
.collection-modal__photos img { display: block; width: 100%; height: 26.875rem; object-fit: cover; }
.collection-modal__thumbs { max-width: 27.5rem; margin: .625rem auto 0; }
.collection-modal__thumbs .slick-track { margin-left: 0; }
.collection-modal__thumbs .slick-slide { padding: 0 .3125rem; }
.collection-modal__thumbs button { display: block; width: 100%; padding: 0; border: 1px solid transparent; background: transparent; cursor: pointer; }
.collection-modal__thumbs .slick-current button { border-color: #1c1c1c; }
.collection-modal__thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; opacity: .5; }
.collection-modal__thumbs .slick-current img { opacity: 1; }
.collection-modal__thumbs:not(.slick-initialized) { display: flex; }
.collection-modal__thumbs:not(.slick-initialized) > div { width: 25%; padding: 0 .3125rem; }
@media (max-width: 992px) {
 .collection-modal { padding: 12px; }
 .collection-modal__dialog { width: 100%; padding: 36px 16px 24px; }
 .collection-modal__intro, .collection-modal__models { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .collection-modal__intro-copy { gap: 20px; }
 .collection-modal__models { margin-top: 32px; }
 .collection-modal__specs { min-height: 0; gap: 24px; }
 .collection-modal__title { font-size: 1.875rem; }
 .collection-modal__eyebrow, .collection-modal__model-name { font-size: 1rem; }
 .collection-modal__request { width: 100%; }
 .collection-modal__gallery-stage { grid-template-columns: 32px minmax(0,1fr) 32px; gap: 8px; }
 .collection-modal__previous, .collection-modal__next { width: 32px; height: 32px; }
 .collection-modal__photos img { height: auto; aspect-ratio: 386/430; }
}
@media (prefers-reduced-motion: reduce) { .collection-modal { transition: none; } }