/* Shared presentation for the separate men's and women's perfume routes. */
.collection-page { --primary: #d4a63a; --primary-light: #f0c45a; --light: #f2e8d5; --dark: #0b0908; --card-bg: #17120d; --card-border: #49391e; --gold-gradient: linear-gradient(115deg,#f0c45a,#d4a63a); }
.collection-page .site-header { background: #0b0908f7; }
.collection-page .primary-nav .current { color: var(--gold); }
.collection-page .collection-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid #b18a3b70; background: #0b0908 url('../img/collection/satin-stages.webp') center / 100% 100% no-repeat; }
.collection-hero-inner { width: min(1660px,calc(100% - 60px)); margin: auto; min-height: clamp(480px,36vw,580px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr); align-items: center; }
.collection-hero-copy { position: relative; z-index: 2; text-align: center; padding: 44px 0 50px; animation: arrive .7s ease both; }
.collection-eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: .29em; text-transform: uppercase; }
.collection-eyebrow::before, .collection-eyebrow::after { content: ''; height: 1px; width: 48px; background: #b48e3d; }
.collection-hero h1 { color: var(--champagne); font-family: 'Cormorant Garamond',Georgia,serif; font-weight: 400 !important; letter-spacing: -.035em; font-size: clamp(52px,4.8vw,82px); line-height: 1.03; margin: 18px -16px 20px; }
.collection-hero h1 em { display: block; color: var(--gold); font-size: 1.08em; line-height: 1.08; }
.collection-hero-description { max-width: 535px; margin: 0 auto 27px; color: var(--champagne); font-size: 15px; line-height: 1.7; }
.collection-tabs { display: flex; justify-content: center; gap: 18px; }
.collection-tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 51px; padding: 12px 27px; border-radius: 999px; border: 1px solid var(--gold); background: #0b09086b; color: var(--champagne); font-weight: 500; font-size: 13px; white-space: nowrap; transition: transform .2s,background .2s,color .2s; }
.collection-tab .icon { width: 20px; height: 20px; }
.collection-tab:hover { transform: translateY(-2px); color: var(--primary-light); background: #d4a63a17; }
.collection-tab[aria-current=page] { background: var(--gold-gradient); border-color: #e3b84e; color: #181005; }
.collection-hero-side { height: 100%; position: relative; min-width: 0; animation: arrive .9s .1s ease both; }
.collection-pair { position: absolute; width: clamp(185px,17vw,280px); aspect-ratio: 704.5 / 1116; bottom: 17.5%; left: 50%; transform: translateX(-50%); overflow: hidden; filter: drop-shadow(0 11px 8px #0005); }
.collection-pair img { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: auto; }
.collection-pair--women img { left: -100%; }
.collection-marquee { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,#17120d,#0c0a08,#17120d); overflow: hidden; min-height: 54px; }
.collection-marquee::before, .collection-marquee::after { content: ''; position: absolute; inset-block: 0; width: 40px; z-index: 1; pointer-events: none; background: linear-gradient(90deg,#100d09,transparent); }
.collection-marquee::after { right: 48px; transform: rotate(180deg); }
.collection-marquee-track { display: flex; width: max-content; animation: collection-drift 100s linear infinite; padding-block: 12px; }
.collection-marquee-group { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.collection-marquee-name { display: inline-flex; gap: 12px; align-items: center; font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 22px; white-space: nowrap; line-height: 1.3; color: var(--champagne); }
.collection-code { display: inline-flex; min-width: 36px; justify-content: center; border-radius: 999px; border: 1px solid #a67e2c; background: #d4a63a17; color: #f0c45a; padding: 1px 9px; font-family: Inter,Arial,sans-serif; font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.7; }
.collection-diamond { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }
.marquee-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 48px; min-height: 54px; z-index: 2; background: #100d09; color: var(--gold); border-left: 1px solid var(--line); }
.marquee-toggle .icon { width: 17px; height: 17px; }
.collection-marquee:hover .collection-marquee-track, .collection-marquee:focus-within .collection-marquee-track, .collection-marquee.is-paused .collection-marquee-track { animation-play-state: paused; }
@keyframes collection-drift { to { transform: translateX(-50%); } }
.collection-page .perfume-collection-controls { padding-top: 43px !important; padding-bottom: 12px !important; margin-bottom: 0; }
.collection-page .collection-heading { margin: 0 0 23px; text-align: center; }
.collection-page .collection-heading .v2-eyebrow { display: flex; justify-content: center; align-items: center; gap: 23px; font-family: Inter,Arial,sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .3em; color: var(--gold); margin: 0 0 10px; }
.collection-page .collection-heading .v2-eyebrow::before, .collection-page .collection-heading .v2-eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: #a47f31; }
.collection-page .collection-heading h2 { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(36px,3.7vw,51px); font-weight: 400; line-height: 1.2; color: var(--champagne); letter-spacing: -.025em; margin: 0; }
.collection-page .search-box-container { width: 100%; max-width: none; margin: 0 auto; padding: 0; }
.collection-page .search-wrapper { display: flex; align-items: center; gap: 14px; border: 1px solid #b9913f; background: linear-gradient(120deg,#17120d,#100e0b); border-radius: 7px; padding: 0 20px; box-shadow: none; max-width: 650px; margin: 0 auto; transform: none; }
.collection-page .search-wrapper::before, .collection-page .search-wrapper::after { display: none; }
.collection-page .search-wrapper > .icon { position: static; color: var(--gold); width: 23px; height: 23px; }
.collection-page #perfumeSearch { background: transparent; border: 0; color: var(--champagne); font-family: Inter,Arial,sans-serif; font-size: 14px; padding: 17px 0; width: 100%; letter-spacing: 0; outline: none; box-shadow: none; }
.collection-page #perfumeSearch::placeholder { font-style: normal; color: #b9b0a3; font-size: inherit; opacity: .85; }
.collection-page .search-wrapper:focus-within { border-color: #f0c45a; box-shadow: 0 0 0 3px #d4a63a15; }
.collection-page .scent-filter-wrapper { background: transparent; border: 0; padding: 8px 0 16px; margin: 0; box-shadow: none; text-align: center; }
.collection-page .filter-label { display: block; font-family: Inter,Arial,sans-serif; font-size: 11px; color: var(--muted); margin-bottom: 13px; letter-spacing: 0; text-transform: none; }
.collection-page .filter-label i, .collection-page .filter-chip i { display: none; }
.collection-page .filter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.collection-page .filter-chip { border: 1px solid #7a602c85; border-radius: 999px; padding: 8px 15px; min-height: 39px; background: #17120d; color: #d1c6b5; font-family: Inter,Arial,sans-serif; font-size: 11px; line-height: 1.5; font-weight: 400; box-shadow: none; transform: none; }
.collection-page .filter-chip.active { background: var(--gold-gradient); border-color: var(--gold); color: #191105; font-weight: 500; }
.collection-page .filter-chip:hover { border-color: var(--gold); }
.collection-page .collection-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--line); padding: 8px 0 18px; margin: 0 0 25px; }
.collection-page #noResults { color: var(--muted); background: #17120d; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; margin: 17px auto 0; padding: 17px; animation: none; visibility: visible; }
.collection-page .collection-products { padding-bottom: 65px; }
.collection-page .collection-products > .container { max-width: none; padding-inline: 0; }
.collection-page .tm-catalog-item-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin: 0; }
.collection-page .tm-catalog-item-list > .tm-catalog-item { display: flex; flex-direction: column; width: auto; max-width: none; padding: 0; margin: 0 !important; background: #17120d; border: 1px solid #70582b66; border-radius: 7px; overflow: hidden; animation: none; transition: border-color .25s,transform .25s; }
.collection-page .tm-catalog-item:hover { border-color: #bb913b; transform: translateY(-4px); }
.collection-page .tm-thumbnail-container { margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.collection-page .tm-catalog-item-list .tm-thumbnail-container:hover { transform: none; box-shadow: none; }
.collection-page .tm-thumbnail-container .img-card { height: auto; aspect-ratio: 1; border: 0; border-radius: 0; background: #17120d; overflow: hidden; cursor: pointer; }
.collection-page .img-card:focus-visible { outline: 3px solid #f0c45a; outline-offset: -3px; }
.collection-page .img-card::before, .collection-page .img-card::after { display: none; }
.collection-page .img-card > img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; padding: 0; }
.collection-page .perfume-code-badge { top: 12px; right: auto; left: 12px; background: #100c08e8; color: #f0c45a; border: 1px solid #d4a63a88; box-shadow: none; font-family: Inter,Arial,sans-serif; font-size: 11px; padding: 7px 11px; min-width: 40px; letter-spacing: .03em; }
.collection-product-info { position: relative; display: flex; flex-direction: column; flex: 1; padding: 19px 18px 17px; border-top: 1px solid #ffffff0a; }
.collection-product-info h3 { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 27px; font-weight: 500; line-height: 1.15; color: var(--champagne); margin: 0 36px 5px 0; }
.collection-product-type { font-size: 10px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.collection-favorite { position: absolute; top: 13px; right: 9px; }
.collection-favorite .icon { width: 21px; height: 21px; }
.collection-favorite[aria-pressed=true] .icon { fill: var(--gold); stroke: var(--gold); }
.collection-product-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.collection-price { color: #ddbc70; border: 0; background: transparent; padding: 5px 0; font-size: 11px; text-align: left; }
.collection-price:hover { color: #f0c45a; }
.collection-notes { border: 1px solid #9b783440; background: #0b09084d; color: var(--champagne); border-radius: 4px; padding: 7px 10px; font-size: 10px; min-height: 35px; }
.collection-notes:hover { border-color: var(--gold); color: var(--gold); }
.collection-page .perfume-modal, .collection-page .notes-text { font-family: Inter,Arial,sans-serif; }
.collection-page .perfume-modal-title { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 30px; }
.collection-page .notes-title { font-family: Inter,Arial,sans-serif; font-size: 12px; color: var(--gold); }
.collection-page .notes-text { font-size: 13px; line-height: 1.7; }
.collection-page .perfume-flip-name { font-family: 'Cormorant Garamond',Georgia,serif; }
.collection-page .site-footer { margin-top: 0; }
.collection-page .footer-links a { font-size: 11px; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .25s; }
@media (min-width: 1600px) { .collection-hero-description { font-size: 17px; } .collection-tab { font-size: 15px; padding-inline: 32px; } }
@media (max-width: 1199px) {
  .collection-hero-inner { width: calc(100% - 30px); grid-template-columns: minmax(0,1fr) minmax(0,2.1fr) minmax(0,1fr); }
  .collection-hero h1 { font-size: 56px; } .collection-hero-description { font-size: 13px; } .collection-eyebrow { font-size: 9px; gap: 10px; letter-spacing: .22em; } .collection-eyebrow::before, .collection-eyebrow::after { width: 30px; }
  .collection-tabs { gap: 12px; } .collection-tab { padding: 11px 18px; font-size: 11px; min-height: 47px; }
  .collection-pair { width: 185px; } .collection-page .tm-catalog-item-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
}
@media (max-width: 991px) {
  .collection-hero-inner { min-height: 460px; grid-template-columns: minmax(0,1fr) minmax(0,2.35fr) minmax(0,1fr); }
  .collection-hero h1 { font-size: 48px; } .collection-hero-description { font-size: 12px; } .collection-pair { width: 165px; }
  .collection-tabs { gap: 9px; } .collection-tab { font-size: 10px; padding-inline: 13px; gap: 6px; } .collection-tab .icon { width: 16px; height: 16px; }
  .collection-page .tm-catalog-item-list { gap: 16px; } .collection-product-info { padding: 16px 13px; } .collection-product-info h3 { font-size: 24px; } .collection-product-actions { gap: 6px; } .collection-price { font-size: 10px; }
}
@media (max-width: 700px) {
  .collection-page .collection-hero { background: #0b0908; }
  .collection-hero-inner { width: calc(100% - 40px); grid-template-columns: 1fr 1fr; min-height: 0; }
  .collection-hero-copy { grid-column: 1/-1; grid-row: 1; padding: 37px 0 15px; }
  .collection-hero h1 { font-size: clamp(42px,8.5vw,58px); margin: 18px 0; } .collection-hero-description { font-size: 13px; max-width: 410px; margin-bottom: 22px; }
  .collection-eyebrow { font-size: 9px; letter-spacing: .25em; } .collection-tabs { gap: 12px; } .collection-tab { flex: 1; min-height: 48px; font-size: 11px; padding-inline: 12px; } .collection-tab .icon { width: 18px; height: 18px; }
  .collection-hero-side { grid-row: 2; height: clamp(280px,55vw,350px); background-image: url('../img/collection/satin-stages.webp'); background-size: 360% 100%; background-repeat: no-repeat; } .collection-pair { width: min(180px,36vw); bottom: 17%; }
  .collection-hero-side--men { grid-column: 1; margin-left: -20px; background-position: left bottom; } .collection-hero-side--women { grid-column: 2; margin-right: -20px; background-position: right bottom; }
  .collection-marquee-name { font-size: 19px; } .collection-marquee-group { gap: 20px; padding-right: 20px; } .collection-marquee-track { animation-duration: 130s; }
  .collection-page .perfume-collection-controls { padding-top: 33px !important; } .collection-page .collection-heading h2 { font-size: 34px; } .collection-page .collection-heading .v2-eyebrow { font-size: 9px; gap: 13px; } .collection-page .collection-heading .v2-eyebrow::before, .collection-page .collection-heading .v2-eyebrow::after { width: 24px; }
  .collection-page #perfumeSearch { font-size: 12px; padding-block: 16px; } .collection-page .search-wrapper { padding-inline: 14px; gap: 10px; } .collection-page .search-wrapper > .icon { width: 20px; height: 20px; }
  .collection-page .scent-filter-wrapper { padding-top: 4px; } .collection-page .filter-label { font-size: 10px; } .collection-page .filter-chip { font-size: 10px; padding: 8px 12px; min-height: 38px; } .collection-page .filter-chips { gap: 7px; }
  .collection-page .collection-status { font-size: 10px; padding-bottom: 15px; margin-bottom: 19px; } .collection-page .tm-catalog-item-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .collection-product-info { padding: 14px 11px; } .collection-product-info h3 { font-size: 23px; margin-right: 24px; } .collection-product-type { font-size: 9px; margin-bottom: 10px; } .collection-favorite { right: 2px; top: 7px; min-width: 34px; } .collection-favorite .icon { width: 18px; height: 18px; }
  .collection-product-actions { flex-wrap: wrap; gap: 4px; } .collection-price { font-size: 10px; min-height: 35px; } .collection-notes { font-size: 9px; padding-inline: 8px; } .collection-page .perfume-code-badge { top: 9px; left: 9px; font-size: 10px; min-width: 32px; padding: 6px 8px; }
  .collection-page .collection-products { padding-bottom: 45px; } .collection-page .perfume-modal-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .collection-marquee-track { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }