/** Shopify CDN: Minification failed Line 1717:1 Expected "}" to go with "{" **/ @font-face{font-family:CCXFrequencyRoboto;src:url("ccx10-roboto-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap} .ccx10{--bg: #0b0c0c; --paper: #eeeae1; --gold: #b8ab91; --muted: #a7a7a2; --line: #343534; --green: #007b45; --gutter: clamp(24px,5vw,88px); --display: CCXFrequencyRoboto,Arial,sans-serif; color-scheme: dark;} .ccx10,:where(.ccx10) *{box-sizing: border-box;} .ccx10{scroll-behavior: smooth; scroll-padding-top: 94px;} .ccx10{margin: 0px; background: var(--bg); color: var(--paper); font-family: CCXFrequencyRoboto, Arial, sans-serif;} :where(.ccx10) a{color: inherit; text-decoration: none;} :where(.ccx10) button,:where(.ccx10) input{font: inherit;} :where(.ccx10) button{color: inherit; cursor: pointer;} :where(.ccx10) button,:where(.ccx10) a{} :where(.ccx10) button{border: 0px; background: none;} :where(.ccx10) button:focus-visible,:where(.ccx10) a:focus-visible,:where(.ccx10) summary:focus-visible{outline: 2px solid var(--gold); outline-offset: 6px;} :where(.ccx10) img,:where(.ccx10) video{max-width: 100%; display: block;} :where(.ccx10) button img{width: 100%;} :where(.ccx10) h1,:where(.ccx10) h2,:where(.ccx10) h3,:where(.ccx10) p{margin: 0px;} :where(.ccx10) h1,:where(.ccx10) h2,:where(.ccx10) h3{font-family: var(--display); font-weight: 300;} :where(.ccx10) h2{font-size: clamp(48px, 5.4vw, 90px); line-height: 0.98; letter-spacing: -0.035em;} :where(.ccx10) p{line-height: 1.65;} :where(.ccx10) ::selection{background: var(--green); color: white;} :where(.ccx10) .ccx10-hero{position: relative; isolation: isolate; min-height: 760px; height: calc(100svh - 94px); max-height: 1050px; overflow: hidden; background: rgb(17, 19, 19);} :where(.ccx10) .ccx10-hero-portrait{position: absolute; right: 0px; top: 0px; width: 57%; height: 100%; z-index: -2;} :where(.ccx10) .ccx10-hero-portrait img{height: 100%; width: 100%; object-fit: cover; object-position: center 35%;} :where(.ccx10) .ccx10-hero:after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgb(11, 12, 12) 2%, rgba(11, 12, 12, 0.96) 24%, rgba(11, 12, 12, 0.69) 43%, rgba(11, 12, 12, 0) 68%), linear-gradient(0deg, rgba(11, 12, 12, 0.9), transparent 28%); z-index: -1;} :where(.ccx10) .ccx10-hero-copy{padding: clamp(65px,7.3vh,100px) var(--gutter) 140px; max-width: 970px;} :where(.ccx10) .ccx10-eyebrow{font-size: 10px; line-height: 1.5; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 10px;} :where(.ccx10) .ccx10-signal{display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(36, 182, 122); box-shadow: 0 0 0 4px #24b67a15;} :where(.ccx10) .ccx10-hero h1{font-size: clamp(82px, 8.7vw, 145px); line-height: 0.91; letter-spacing: -0.045em; margin-top: 37px; position: relative;} :where(.ccx10) .ccx10-hero h1 span{display: block; color: var(--gold);} :where(.ccx10) .ccx10-hero-description{color: rgb(208, 206, 199); font-size: 15px; margin-top: 30px; margin-bottom: 30px; line-height: 1.6;} :where(.ccx10) .ccx10-button{min-height: 53px; display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; padding: 18px 25px; font-size: 11px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.09em; transition: background .25s,transform .25s;} :where(.ccx10) .ccx10-button span{font-size: 20px; line-height: 12px;} :where(.ccx10) .ccx10-button.ccx10-primary{background: var(--green); color: rgb(255, 255, 255);} :where(.ccx10) .ccx10-button.ccx10-primary:hover{background: rgb(6, 148, 90); transform: translateY(-2px);} :where(.ccx10) .ccx10-film-link{display: flex; gap: 12px; align-items: center; font-size: 10px; letter-spacing: 0.04em; margin-top: 23px; padding: 4px 0px; color: rgb(201, 199, 191);} :where(.ccx10) .ccx10-hero-bottom{position: absolute; bottom: 0px; left: var(--gutter); right: var(--gutter); min-height: 75px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.19); font-size: 8px; letter-spacing: 0.12em; gap: 20px;} :where(.ccx10) .ccx10-hero-bottom a{display: flex; gap: 30px; align-items: center;} :where(.ccx10) .ccx10-hero-bottom a span{font-size: 22px;} :where(.ccx10) .ccx10-section-pad{padding: 120px var(--gutter);} :where(.ccx10) .ccx10-section-heading{display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 45px;} :where(.ccx10) .ccx10-section-heading .ccx10-eyebrow{margin-bottom: 28px; color: var(--gold);} :where(.ccx10) .ccx10-section-intro{max-width: 350px; font-size: 13px; color: var(--muted);} :where(.ccx10) .ccx10-section-intro .ccx10-text-link{margin-top: 24px; color: var(--paper);} :where(.ccx10) .ccx10-text-link{padding: 10px 0px; display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid rgb(122, 123, 114);} :where(.ccx10) .ccx10-text-link span{font-size: 18px;} :where(.ccx10) .ccx10-text-link:hover{color: var(--gold); border-color: var(--gold);} :where(.ccx10) .ccx10-collection-foot{display: flex; justify-content: space-between; gap: 20px; font-size: 8px; letter-spacing: 0.13em; color: rgb(176, 176, 167); margin-top: 30px;} :where(.ccx10) .ccx10-comparison{display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 35px; padding: 27px; border: 1px solid var(--line);} :where(.ccx10) .ccx10-comparison[hidden]{display: none;} :where(.ccx10) .ccx10-comparison strong{font: 400 30px var(--display);} :where(.ccx10) .ccx10-comparison p{font-size: 13px; color: var(--muted); margin-top: 10px;} :where(.ccx10) .ccx10-comparison-note{grid-column: 1/-1; padding-top: 18px; border-top: 1px solid var(--line);} :where(.ccx10) .ccx10-story{display: grid; grid-template-columns: 1.04fr 1fr; background: rgb(24, 26, 25);} :where(.ccx10) .ccx10-story-image{min-height: 680px; position: relative; overflow: hidden;} :where(.ccx10) .ccx10-story-image img{position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 29% center;} :where(.ccx10) .ccx10-image-caption{position: absolute; left: 30px; bottom: 28px; font-size: 9px; letter-spacing: 0.14em; color: rgb(225, 222, 213); z-index: 2;} :where(.ccx10) .ccx10-story-image:after{content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.533));} :where(.ccx10) .ccx10-story-copy{padding: 90px 12%; align-self: center;} :where(.ccx10) .ccx10-story-copy .ccx10-eyebrow{color: var(--gold); margin-bottom: 30px;} :where(.ccx10) .ccx10-story-copy h2{font-size: clamp(48px, 4.8vw, 78px);} :where(.ccx10) .ccx10-story-lead{font: 300 clamp(28px,3vw,43px)/1.1 var(--display); margin: 35px 0px 24px;} :where(.ccx10) .ccx10-story-copy>p:not(.ccx10-story-lead):not(.ccx10-eyebrow){font-size: 13px; color: rgb(188, 189, 182);} :where(.ccx10) .ccx10-story-signoff{margin-top: 20px; color: var(--gold) !important;} :where(.ccx10) .ccx10-story-copy .ccx10-text-link{margin-top: 25px;} :where(.ccx10) .ccx10-craft{display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center;} :where(.ccx10) .ccx10-craft .ccx10-eyebrow{color: var(--gold); margin-bottom: 30px;} :where(.ccx10) .ccx10-craft h2{font-size: clamp(48px, 5vw, 80px);} :where(.ccx10) .ccx10-craft-copy>p:not(.ccx10-eyebrow){font-size: 14px; max-width: 365px; color: var(--muted); margin-top: 28px;} :where(.ccx10) .ccx10-craft-details{margin-top: 40px;} :where(.ccx10) .ccx10-craft-details details{border-top: 1px solid var(--line);} :where(.ccx10) .ccx10-craft-details details:last-child{border-bottom: 1px solid var(--line);} :where(.ccx10) summary{cursor: pointer; list-style: none;} :where(.ccx10) summary::-webkit-details-marker{display: none;} :where(.ccx10) .ccx10-craft-details summary{display: flex; align-items: center; gap: 18px; font-size: 12px; padding: 22px 0px;} :where(.ccx10) .ccx10-craft-details summary>span{font-size: 9px; color: var(--gold);} :where(.ccx10) summary b{font-size: 21px; font-weight: 300; margin-left: auto;} :where(.ccx10) .ccx10-craft-details details[open] summary b{transform: rotate(45deg);} :where(.ccx10) .ccx10-craft-details details p{font-size: 12px; color: var(--muted); padding: 0px 22px 24px 34px; max-width: 450px;} :where(.ccx10) .ccx10-craft-image{position: relative;} :where(.ccx10) .ccx10-craft-image img{width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 63%;} :where(.ccx10) .ccx10-craft-image:after{content: ""; position: absolute; inset: 70% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.467));} :where(.ccx10) .ccx10-film-band{position: relative; min-height: 670px; display: flex; align-items: center; justify-content: center; isolation: isolate; text-align: center; overflow: hidden; background: rgb(154, 141, 115);} :where(.ccx10) .ccx10-film-poster{position: absolute; inset: 0px; z-index: -2;} :where(.ccx10) .ccx10-film-poster video{height: 100%; width: 100%; object-fit: cover; object-position: 50% 37%; opacity: 0.5;} :where(.ccx10) .ccx10-film-band:after{content: ""; position: absolute; inset: 0px; z-index: -1; background: rgba(8, 11, 12, 0.396);} :where(.ccx10) .ccx10-film-band .ccx10-eyebrow{justify-content: center;} :where(.ccx10) .ccx10-film-band h2{font-size: clamp(70px, 8.5vw, 135px); margin: 27px 0px 34px;} :where(.ccx10) .ccx10-film-open{display: inline-flex; align-items: center; gap: 18px; font-size: 10px; letter-spacing: 0.16em;} :where(.ccx10) .ccx10-film-open>span{width: 55px; height: 55px; border: 1px solid rgb(232, 228, 213); border-radius: 50%; display: grid; place-items: center; font-size: 14px; padding-left: 3px; transition: background .25s;} :where(.ccx10) .ccx10-film-open:hover>span{background: var(--green); border-color: var(--green);} :where(.ccx10) .ccx10-ambient-toggle{position: absolute; right: 30px; bottom: 25px; font-size: 9px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.376);} :where(.ccx10) .ccx10-accessories .ccx10-section-heading h2{font-size: clamp(46px, 5vw, 80px);} :where(.ccx10) .ccx10-accessory-arrow{position: absolute; right: 16px; bottom: 14px; font-size: 21px;} :where(.ccx10) .ccx10-collector{display: grid; grid-template-columns: 1.1fr 1fr; background: rgb(25, 27, 27);} :where(.ccx10) .ccx10-collector-photo{position: relative; align-self: center;} :where(.ccx10) .ccx10-collector-photo img{width: 100%;} :where(.ccx10) .ccx10-edition-seal{position: absolute; top: 32px; left: 32px; width: 92px; height: 92px; border: 1px solid rgb(166, 156, 135); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(20, 21, 21, 0.667); color: var(--gold);} :where(.ccx10) .ccx10-edition-seal>span{font-size: 7px; letter-spacing: 0.12em;} :where(.ccx10) .ccx10-edition-seal strong{font: 300 43px/1 var(--display); padding: 4px 0px;} :where(.ccx10) .ccx10-collector-copy{padding: 80px 12% 80px 8%; align-self: center;} :where(.ccx10) .ccx10-collector-copy .ccx10-eyebrow{color: var(--gold); margin-bottom: 25px;} :where(.ccx10) .ccx10-collector-copy h2{font-size: clamp(48px, 5.2vw, 84px);} :where(.ccx10) .ccx10-collector-intro{font: 300 31px/1.15 var(--display); margin: 28px 0px 20px;} :where(.ccx10) .ccx10-collector-copy>p:not(.ccx10-eyebrow):not(.ccx10-collector-intro):not(.ccx10-shipping){font-size: 12px; color: var(--muted);} :where(.ccx10) .ccx10-collector-price{display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0px 22px;} :where(.ccx10) .ccx10-collector-price>span:first-child{font-size: 18px;} :where(.ccx10) .ccx10-collector-price>span:last-child{font-size: 7px; letter-spacing: 0.08em; color: var(--gold);} :where(.ccx10) .ccx10-collector-copy .ccx10-button{width: 100%;} :where(.ccx10) .ccx10-shipping{font-size: 8px; letter-spacing: 0.06em; color: var(--gold); margin-top: 15px;} :where(.ccx10) .ccx10-included{margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);} :where(.ccx10) .ccx10-included summary{font-size: 11px; display: flex; justify-content: space-between; padding: 17px 0px;} :where(.ccx10) .ccx10-included p{font-size: 12px; color: var(--muted); padding-bottom: 20px;} :where(.ccx10) .ccx10-closing{padding-bottom: 0px; overflow: hidden;} :where(.ccx10) .ccx10-closing .ccx10-eyebrow{color: var(--gold); margin-bottom: 30px;} :where(.ccx10) .ccx10-closing h2{font-size: clamp(63px, 8vw, 128px); max-width: 900px;} :where(.ccx10) .ccx10-closing .ccx10-button{margin-top: 35px;} :where(.ccx10) .ccx10-closing-rule{margin-top: 100px; border-top: 1px solid var(--line);} :where(.ccx10) .ccx10-closing-word{font: 300 clamp(60px,15.7vw,300px)/1.12 var(--display); letter-spacing: -0.035em; color: rgb(51, 55, 53); white-space: nowrap; margin: 12px -5px -20px;} :where(.ccx10) footer{padding: 38px var(--gutter) 25px; border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 20px; justify-content: space-between;} :where(.ccx10) footer>span{font-size: 8px; letter-spacing: 0.13em; color: var(--muted);} :where(.ccx10) .ccx10-product-dialog,:where(.ccx10) .ccx10-film-dialog{padding: 0px; border: 1px solid rgb(85, 85, 85); background: rgb(20, 22, 22); color: var(--paper); max-width: 1100px; width: calc(100% - 48px); max-height: 90svh; overflow: auto;} :where(.ccx10) .ccx10-product-dialog::backdrop,:where(.ccx10) .ccx10-film-dialog::backdrop{background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);} :where(.ccx10) .ccx10-dialog-close{position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 29px; border: 1px solid rgba(140, 139, 128, 0.5); background: rgba(17, 17, 17, 0.8); z-index: 5;} :where(.ccx10) .ccx10-product-dialog-grid{display: grid; grid-template-columns: 1.1fr 1fr;} :where(.ccx10) .ccx10-product-gallery{min-height: 610px; position: relative; background: rgb(32, 33, 34); display: flex; align-items: center;} :where(.ccx10) .ccx10-product-gallery>img{width: 100%; height: 610px; object-fit: contain;} :where(.ccx10) .ccx10-gallery-controls{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; white-space: nowrap;} :where(.ccx10) .ccx10-gallery-controls button{font-size: 9px; background: rgba(18, 19, 19, 0.85); border: 1px solid rgb(100, 103, 93); padding: 11px 17px;} :where(.ccx10) .ccx10-gallery-controls button[aria-pressed=true]{background: var(--paper); color: rgb(20, 22, 22);} :where(.ccx10) .ccx10-product-info{padding: 65px 40px 45px; align-self: center;} :where(.ccx10) .ccx10-product-info .ccx10-eyebrow{color: var(--gold); font-size: 8px;} :where(.ccx10) .ccx10-product-info h2{font-size: 68px; margin-top: 16px;} :where(.ccx10) .ccx10-modal-price{font-size: 17px; margin: 18px 0px 22px;} :where(.ccx10) .ccx10-product-info>p:not(.ccx10-eyebrow):not(.ccx10-modal-price):not(.ccx10-shop-note){font-size: 13px; color: var(--muted);} :where(.ccx10) .ccx10-product-facts{margin: 25px 0px; font-size: 10px; display: flex; flex-direction: column; gap: 13px; line-height: 1.5;} :where(.ccx10) .ccx10-product-facts>span{border-bottom: 1px solid var(--line); padding-bottom: 13px;} :where(.ccx10) .ccx10-product-info details{font-size: 11px; margin-bottom: 28px;} :where(.ccx10) .ccx10-product-info summary{display: flex; justify-content: space-between;} :where(.ccx10) .ccx10-product-info details p{margin-top: 15px; color: var(--muted); font-size: 12px;} :where(.ccx10) .ccx10-product-info .ccx10-button{width: 100%;} :where(.ccx10) .ccx10-shop-note{font-size: 9px; color: var(--muted); margin-top: 13px;} :where(.ccx10) .ccx10-film-dialog{width: min(760px, 100% - 32px); text-align: center; background: black; border: 0px;} :where(.ccx10) .ccx10-film-dialog video{width: 100%; max-height: 78svh;} :where(.ccx10) .ccx10-film-dialog>p{font-size: 9px; letter-spacing: 0.08em; padding: 20px 45px;} @media (min-width:1600px){:where(.ccx10) .ccx10-hero-copy{max-width: 1100px;} :where(.ccx10) .ccx10-hero h1{font-size: 155px;}} @media (max-width:1180px){ :where(.ccx10) .ccx10-hero{height: calc(100svh - 82px); min-height: 690px;} :where(.ccx10) .ccx10-hero-copy{padding-top: 65px;} :where(.ccx10) .ccx10-hero h1{font-size: clamp(80px, 9vw, 130px);} :where(.ccx10) .ccx10-section-pad{padding-top: 90px; padding-bottom: 90px;} :where(.ccx10) .ccx10-story-copy{padding: 65px 10%;} :where(.ccx10) .ccx10-story-image{min-height: 640px;} :where(.ccx10) .ccx10-craft{gap: 6vw;} :where(.ccx10) .ccx10-collector-copy{padding: 55px 10%;} :where(.ccx10) .ccx10-collector-price{flex-wrap: wrap;} :where(.ccx10) .ccx10-closing{padding-bottom: 0px;} :where(.ccx10) .ccx10-product-info{padding: 60px 30px 35px;}} @media (max-width:900px){ :where(.ccx10) .ccx10-hero{height: 760px; min-height: 0px;} :where(.ccx10) .ccx10-hero-copy{padding-top: 85px;} :where(.ccx10) .ccx10-hero-portrait{width: 65%;} :where(.ccx10) .ccx10-hero h1{font-size: 95px;} :where(.ccx10) .ccx10-hero-bottom>span:nth-child(2){display: none;} :where(.ccx10) .ccx10-story-copy{padding: 65px 32px;} :where(.ccx10) .ccx10-story h2{font-size: 49px;} :where(.ccx10) .ccx10-story-image{min-height: 620px;} :where(.ccx10) .ccx10-craft{gap: 35px;} :where(.ccx10) .ccx10-craft h2{font-size: 52px;} :where(.ccx10) .ccx10-collector{grid-template-columns: 1fr 1fr;} :where(.ccx10) .ccx10-collector-copy{padding: 50px 30px;} :where(.ccx10) .ccx10-collector h2{font-size: 49px;} :where(.ccx10) .ccx10-collector-intro{font-size: 28px;} :where(.ccx10) .ccx10-collector .ccx10-button{font-size: 9px; gap: 15px; padding: 17px;} :where(.ccx10) .ccx10-product-dialog-grid{grid-template-columns: 1fr 1fr;} :where(.ccx10) .ccx10-product-gallery,:where(.ccx10) .ccx10-product-gallery>img{height: 570px; min-height: 570px;} :where(.ccx10) .ccx10-product-info{padding: 60px 25px 35px;} :where(.ccx10) .ccx10-product-info h2{font-size: 54px;} :where(.ccx10) .ccx10-product-info .ccx10-button{gap: 18px; font-size: 10px;}} @media (max-width:650px){.ccx10{--gutter: 22px;} :where(.ccx10) .ccx10-hero{height: 790px; max-height: none; min-height: 0px;} :where(.ccx10) .ccx10-hero-portrait{width: 100%; height: 550px; top: 0px;} :where(.ccx10) .ccx10-hero-portrait img{object-position: 55% 27%; opacity: 0.85;} :where(.ccx10) .ccx10-hero:after{background: linear-gradient(0deg, rgb(11, 12, 12) 14%, rgba(11, 12, 12, 0.94) 27%, rgba(11, 12, 12, 0.5) 48%, transparent 80%);} :where(.ccx10) .ccx10-hero-copy{padding: 340px var(--gutter) 85px; max-width: none;} :where(.ccx10) .ccx10-hero-copy>.ccx10-eyebrow{font-size: 8px;} :where(.ccx10) .ccx10-hero h1{font-size: clamp(67px, 13.7vw, 89px); margin-top: 20px; line-height: 0.92;} :where(.ccx10) .ccx10-hero h1 br{display: none;} :where(.ccx10) .ccx10-hero h1>span{margin-top: 2px;} :where(.ccx10) .ccx10-hero-description{font-size: 12px; margin: 20px 0px; line-height: 1.5;} :where(.ccx10) .ccx10-hero .ccx10-button{min-height: 48px; padding: 16px 22px; font-size: 10px;} :where(.ccx10) .ccx10-hero .ccx10-film-link{font-size: 9px; margin-top: 16px;} :where(.ccx10) .ccx10-hero-bottom{height: 50px; min-height: 50px; font-size: 7px; gap: 10px;} :where(.ccx10) .ccx10-hero-bottom>a{gap: 12px; font-size: 6px;} :where(.ccx10) .ccx10-hero-bottom>a span{font-size: 18px;} :where(.ccx10) .ccx10-eyebrow{font-size: 8px;} :where(.ccx10) .ccx10-section-pad{padding: 70px var(--gutter);} :where(.ccx10) h2{font-size: 52px;} :where(.ccx10) .ccx10-section-heading{display: block; margin-bottom: 30px;} :where(.ccx10) .ccx10-section-heading .ccx10-eyebrow{margin-bottom: 20px;} :where(.ccx10) .ccx10-section-intro{margin-top: 22px; font-size: 12px; max-width: 100%;} :where(.ccx10) .ccx10-section-intro .ccx10-text-link{margin-top: 15px;} :where(.ccx10) .ccx10-collection-foot{gap: 15px; margin-top: 25px; font-size: 6px; line-height: 1.5;} :where(.ccx10) .ccx10-comparison{grid-template-columns: 1fr; padding: 22px;} :where(.ccx10) .ccx10-story{grid-template-columns: 1fr;} :where(.ccx10) .ccx10-story-image{min-height: 460px; order: 1;} :where(.ccx10) .ccx10-story-image img{object-position: 25% center;} :where(.ccx10) .ccx10-story-copy{padding: 60px var(--gutter); order: 2;} :where(.ccx10) .ccx10-story-copy h2{font-size: 57px;} :where(.ccx10) .ccx10-story-copy .ccx10-eyebrow{margin-bottom: 23px;} :where(.ccx10) .ccx10-story-lead{font-size: 35px; margin-top: 27px;} :where(.ccx10) .ccx10-story-copy>p:not(.ccx10-story-lead):not(.ccx10-eyebrow){font-size: 13px; max-width: 380px;} :where(.ccx10) .ccx10-craft{grid-template-columns: 1fr; gap: 40px;} :where(.ccx10) .ccx10-craft-copy>p:not(.ccx10-eyebrow){font-size: 13px;} :where(.ccx10) .ccx10-craft .ccx10-eyebrow{margin-bottom: 23px;} :where(.ccx10) .ccx10-craft h2{font-size: 55px;} :where(.ccx10) .ccx10-craft-details{margin-top: 28px;} :where(.ccx10) .ccx10-craft-image img{aspect-ratio: 3/4; object-position: center 64%;} :where(.ccx10) .ccx10-film-band{min-height: 580px;} :where(.ccx10) .ccx10-film-band h2{font-size: 70px;} :where(.ccx10) .ccx10-film-band .ccx10-eyebrow{font-size: 8px;} :where(.ccx10) .ccx10-ambient-toggle{bottom: 20px; right: 22px; font-size: 8px;} :where(.ccx10) .ccx10-accessories .ccx10-section-heading h2{font-size: 48px;} :where(.ccx10) .ccx10-accessory-arrow{right: 12px; bottom: 10px; font-size: 18px;} :where(.ccx10) .ccx10-collector{grid-template-columns: 1fr;} :where(.ccx10) .ccx10-collector-photo{min-height: 0px;} :where(.ccx10) .ccx10-collector-copy{padding: 35px var(--gutter) 60px;} :where(.ccx10) .ccx10-collector h2{font-size: 61px;} :where(.ccx10) .ccx10-collector-intro{font-size: 31px;} :where(.ccx10) .ccx10-collector-copy>p:not(.ccx10-eyebrow):not(.ccx10-collector-intro):not(.ccx10-shipping){font-size: 13px;} :where(.ccx10) .ccx10-collector .ccx10-button{font-size: 10px; padding: 19px 22px;} :where(.ccx10) .ccx10-collector-price>span:last-child{font-size: 8px;} :where(.ccx10) .ccx10-shipping{font-size: 8px;} :where(.ccx10) .ccx10-edition-seal{width: 80px; height: 80px; left: 22px; top: 22px;} :where(.ccx10) .ccx10-edition-seal strong{font-size: 36px;} :where(.ccx10) .ccx10-closing{padding-bottom: 0px;} :where(.ccx10) .ccx10-closing h2{font-size: clamp(57px, 13.5vw, 84px);} :where(.ccx10) .ccx10-closing .ccx10-button{margin-top: 28px;} :where(.ccx10) .ccx10-closing-rule{margin-top: 65px;} :where(.ccx10) .ccx10-closing-word{font-size: 15.5vw; margin-bottom: -4px;} :where(.ccx10) footer{padding-top: 28px; gap: 22px;} :where(.ccx10) footer>span{display: none;} :where(.ccx10) .ccx10-product-dialog{width: calc(100% - 24px); max-height: 94svh;} :where(.ccx10) .ccx10-product-dialog-grid{grid-template-columns: 1fr;} :where(.ccx10) .ccx10-product-gallery{min-height: 390px; height: 390px;} :where(.ccx10) .ccx10-product-gallery>img{height: 390px; min-height: 390px; object-fit: contain;} :where(.ccx10) .ccx10-product-info{padding: 32px 25px;} :where(.ccx10) .ccx10-product-info h2{font-size: 56px;} :where(.ccx10) .ccx10-product-info .ccx10-button{font-size: 10px;} :where(.ccx10) .ccx10-modal-price{margin-top: 14px;} :where(.ccx10) .ccx10-dialog-close{position: sticky; float: right; top: 10px; right: 10px; margin: 10px 10px -50px 0px;} :where(.ccx10) .ccx10-film-dialog .ccx10-dialog-close{position: absolute;} :where(.ccx10) .ccx10-product-facts{margin: 23px 0px;} :where(.ccx10) .ccx10-film-dialog video{max-height: 78svh;} :where(.ccx10) .ccx10-film-dialog>p{font-size: 8px; padding: 18px 25px;} :where(.ccx10) .ccx10-gallery-controls{bottom: 15px;}} @media (prefers-reduced-motion:reduce){.ccx10{scroll-behavior: auto;} .ccx10,:where(.ccx10) *,:where(.ccx10) *:before,:where(.ccx10) *:after{animation: none !important; transition: none !important;} } :where(.ccx10) .ccx10-gallery-controls[hidden]{display: none;} :where(.ccx10) .ccx10-craft-image{width: 100%; max-width: 400px; justify-self: center;} @media (max-width:650px){:where(.ccx10) .ccx10-craft-image{max-width: 280px;} } :where(.ccx10) .ccx10-limited-link{color: var(--gold); letter-spacing: 0.06em;} :where(.ccx10) .ccx10-mini-edition{display: grid; place-items: center; min-width: 31px; height: 31px; border: 1px solid rgba(184, 171, 145, 0.5); border-radius: 50%; font: 400 18px var(--display);} :where(.ccx10) .ccx10-edition-strip{display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 28px var(--gutter); background: var(--gold); color: rgb(21, 23, 21);} :where(.ccx10) .ccx10-edition-strip>a{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 18px; border-right: 1px solid rgba(21, 23, 21, 0.19); transition: opacity .2s;} :where(.ccx10) .ccx10-edition-strip>a:last-child{border-right: 0px;} :where(.ccx10) .ccx10-edition-strip>a:hover{opacity: 0.7;} :where(.ccx10) .ccx10-edition-overline{font-size: 8px; letter-spacing: 0.18em;} :where(.ccx10) .ccx10-edition-strip strong{font: 300 72px/1.05 var(--display); letter-spacing: -0.04em; margin: 3px 0px 6px;} :where(.ccx10) .ccx10-edition-name{font-size: 10px; font-weight: 700; letter-spacing: 0.1em;} :where(.ccx10) .ccx10-edition-caption{font-size: 9px; line-height: 1.5; margin-top: 7px; color: rgb(54, 59, 53);} :where(.ccx10) .ccx10-product-info>.ccx10-edition-notice{font-size: 10px !important; line-height: 1.6; color: var(--gold) !important; border: 1px solid rgba(184, 171, 145, 0.376); padding: 12px 14px; margin: 0px 0px 22px; text-transform: uppercase; letter-spacing: 0.04em;} :where(.ccx10) .ccx10-closing-edition{font-size: 13px; color: var(--gold); margin-top: 26px; line-height: 1.8;} @media (max-width:900px){:where(.ccx10) .ccx10-hero-copy>.ccx10-eyebrow{font-size: 9px; letter-spacing: 0.11em;} :where(.ccx10) .ccx10-edition-strip strong{font-size: 60px;} :where(.ccx10) .ccx10-edition-name{font-size: 8px;}} @media (max-width:650px){:where(.ccx10) .ccx10-hero-copy>.ccx10-eyebrow{font-size: 7px; letter-spacing: 0.1em;} :where(.ccx10) .ccx10-edition-strip{grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px var(--gutter);} :where(.ccx10) .ccx10-edition-strip>a{padding: 22px 8px;} :where(.ccx10) .ccx10-edition-strip>a:nth-child(2){border-right: 0px;} :where(.ccx10) .ccx10-edition-strip>a:nth-child(-n+2){border-bottom: 1px solid rgba(21, 23, 21, 0.19);} :where(.ccx10) .ccx10-edition-strip strong{font-size: 54px;} :where(.ccx10) .ccx10-edition-name{font-size: 9px;} :where(.ccx10) .ccx10-limited-link{font-size: 9px; gap: 10px;} :where(.ccx10) .ccx10-closing-edition{font-size: 11px;}} @media (max-width:650px){} @media (max-width:650px){:where(.ccx10) .ccx10-hero h1{font-size: clamp(48px, 13.7vw, 89px);} :where(.ccx10) .ccx10-story-copy h2{font-size: clamp(46px, 13vw, 57px);} :where(.ccx10) .ccx10-closing h2{font-size: clamp(38px, 10.5vw, 68px);}} :where(.ccx10) .ccx10-collection-unveil-link{margin-top: 26px; color: var(--gold); max-width: 100%; line-height: 1.6; text-align: left;} :where(.ccx10) .ccx10-craft-image img{height: auto;} :where(.ccx10) .ccx10-unveil{background: rgb(18, 20, 20); border-block: 1px solid var(--line);} :where(.ccx10) .ccx10-unveil .ccx10-section-heading,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-heading{align-items: flex-end;} :where(.ccx10) .ccx10-unveil .ccx10-section-intro,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-intro{max-width: 360px;} :where(.ccx10) .ccx10-unveil h2,:where(.ccx10) .ccx10-collector-unveil h2{font-size: clamp(48px, 5.2vw, 82px);} :where(.ccx10) .ccx10-unveil .ccx10-section-intro strong,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-intro strong{color: var(--paper); font-weight: 400;} :where(.ccx10) .ccx10-journey{min-width: 0px;} :where(.ccx10) .ccx10-journey-tabs{display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-block: 1px solid #50534b; margin-bottom: 30px; gap: 0px;} :where(.ccx10) .ccx10-journey-tab{position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 19px 15px 20px; text-align: left; min-width: 0px; color: var(--muted); font-size: 10px; line-height: 1.3; letter-spacing: 0.035em; transition: background .2s,color .2s;} :where(.ccx10) .ccx10-journey-tab:not(:last-child){border-right: 1px solid var(--line);} :where(.ccx10) .ccx10-journey-tab>span{color: var(--gold); font: 300 25px/1 var(--display);} :where(.ccx10) .ccx10-journey-tab[aria-selected=true]{background: rgb(34, 38, 34); color: var(--paper);} :where(.ccx10) .ccx10-journey-tab[aria-selected=true]:after{content: ""; position: absolute; bottom: -1px; left: 0px; right: 0px; height: 3px; background: var(--gold);} :where(.ccx10) .ccx10-journey-tab:hover{background: rgb(28, 32, 29); color: var(--paper);} :where(.ccx10) .ccx10-journey-panel{display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr); gap: clamp(30px, 5vw, 80px); align-items: center; min-height: 470px;} :where(.ccx10) .ccx10-journey-panel[hidden]{display: none;} :where(.ccx10) .ccx10-journey-panel:focus-visible{outline: 2px solid var(--gold); outline-offset: 8px;} :where(.ccx10) .ccx10-journey-art{min-width: 0px; position: relative; background: rgb(28, 30, 29); display: flex; align-items: center; justify-content: center; min-height: 440px; padding: 20px;} :where(.ccx10) .ccx10-detail-photo{position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; background: rgb(28, 30, 29);} :where(.ccx10) .ccx10-detail-photo img{width: 100%; height: 420px; object-fit: contain; object-position: center; transition: filter .2s;} :where(.ccx10) .ccx10-detail-photo:hover img{filter: brightness(1.07);} :where(.ccx10) .ccx10-detail-photo.ccx10-rotate-photo{aspect-ratio: 1 / 1;} :where(.ccx10) .ccx10-journey-art .ccx10-detail-photo.ccx10-rotate-photo img{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; transform: rotate(-90deg);} :where(.ccx10) .ccx10-photo-corner{position: absolute; right: 12px; bottom: 12px; width: 33px; height: 33px; border: 1px solid rgba(184, 171, 145, 0.5); background: rgba(17, 17, 17, 0.8); display: grid; place-items: center; color: var(--paper); font-size: 20px; z-index: 1;} :where(.ccx10) .ccx10-pack-overview img{height: auto; max-height: 530px;} :where(.ccx10) .ccx10-photo-pair{display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; min-width: 0px; width: 100%;} :where(.ccx10) .ccx10-photo-pair .ccx10-detail-photo img{height: 380px;} :where(.ccx10) .ccx10-photo-pair figure{margin: 0px; min-width: 0px;} :where(.ccx10) .ccx10-photo-pair figcaption{font-size: 8px; letter-spacing: 0.1em; margin-top: 14px; color: var(--gold); text-transform: uppercase;} :where(.ccx10) .ccx10-journey-copy{padding: 10px 0px; min-width: 0px;} :where(.ccx10) .ccx10-journey-copy .ccx10-eyebrow{color: var(--gold); font-size: 9px; margin-bottom: 21px;} :where(.ccx10) .ccx10-journey-copy h3{font-size: clamp(36px, 3.7vw, 58px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 23px;} :where(.ccx10) .ccx10-journey-copy>p:not(.ccx10-eyebrow):not(.ccx10-photo-note){font-size: 13px; color: rgb(189, 190, 182); max-width: 400px;} :where(.ccx10) .ccx10-journey-copy .ccx10-photo-note{font-size: 9px; color: var(--gold); margin-top: 20px; line-height: 1.6; max-width: 390px;} :where(.ccx10) .ccx10-journey-copy .ccx10-text-link{margin-top: 20px; line-height: 1.5; max-width: 100%; text-align: left;} :where(.ccx10) .ccx10-journey-copy blockquote{margin: 26px 0px 0px; border-left: 1px solid var(--gold); padding-left: 20px; color: var(--paper); font: 300 29px/1.2 var(--display);} :where(.ccx10) .ccx10-journey-copy blockquote cite{font: 9px / 1.5 CCXFrequencyRoboto, Arial, sans-serif; display: block; letter-spacing: 0.08em; color: var(--gold); margin-top: 12px; text-transform: uppercase;} :where(.ccx10) .ccx10-journey-controls{display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 23px; margin-top: 30px;} :where(.ccx10) .ccx10-journey-controls>span{font-size: 9px; letter-spacing: 0.13em; color: var(--gold);} :where(.ccx10) .ccx10-journey-controls>div{display: flex; gap: 14px;} :where(.ccx10) .ccx10-journey-controls button{font-size: 10px; display: flex; align-items: center; gap: 16px; padding: 13px 18px; border: 1px solid rgb(98, 101, 86);} :where(.ccx10) .ccx10-journey-controls button:disabled{opacity: 0.3; cursor: default;} :where(.ccx10) .ccx10-journey-controls button:not(:disabled):hover{background: rgb(37, 44, 37); border-color: var(--gold);} :where(.ccx10) .ccx10-journey-controls button span{font-size: 16px;} :where(.ccx10) .ccx10-cloth-art{display: flex; flex-direction: column; gap: 18px;} :where(.ccx10) .ccx10-cloth-art .ccx10-detail-photo img{height: 360px;} :where(.ccx10) .ccx10-cloth-toggle{font-size: 10px; border: 1px solid rgb(119, 124, 108); padding: 12px 19px; display: flex; align-items: center; gap: 24px;} :where(.ccx10) .ccx10-cloth-toggle>span{font-size: 18px; line-height: 1;} :where(.ccx10) .ccx10-signature-art .ccx10-detail-photo img{height: 300px;} :where(.ccx10) .ccx10-signature-art{background: rgb(32, 33, 34);} :where(.ccx10) .ccx10-accessory-packaging{display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: clamp(30px, 6vw, 100px); align-items: center; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 60px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-detail-photo{max-width: 340px; justify-self: center;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-detail-photo img{height: 420px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-eyebrow{color: var(--gold); margin-bottom: 22px;} :where(.ccx10) .ccx10-accessory-packaging h3{font-size: clamp(37px, 4vw, 62px); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 24px;} :where(.ccx10) .ccx10-accessory-packaging p:not(.ccx10-eyebrow){font-size: 13px; color: var(--muted); max-width: 450px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-text-link{margin-top: 24px;} :where(.ccx10) .ccx10-collector-photo img{height: auto; max-height: 660px; object-fit: contain;} :where(.ccx10) .ccx10-collector-preview-link{margin-top: 22px; color: var(--gold);} :where(.ccx10) .ccx10-collector-unveil{background: rgb(16, 18, 17); padding-top: 100px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-tabs{grid-template-columns: repeat(4,minmax(0,1fr));} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-panel{grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 6vw;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-art{min-height: 500px; background: rgb(25, 28, 26);} :where(.ccx10) .ccx10-collector-unveil .ccx10-detail-photo img{height: 460px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-copy h3{font-size: clamp(39px, 4.4vw, 68px);} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-copy .ccx10-button{margin-top: 28px;} :where(.ccx10) .ccx10-sealed-label{display: flex; align-items: center; gap: 10px; font-size: 8px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-top: 22px;} :where(.ccx10) .ccx10-sealed-label:before{content: ""; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg);} :where(.ccx10) .ccx10-collector-certificates{font-size: 10px; color: var(--gold); line-height: 1.6; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line);} :where(.ccx10) .ccx10-detail-dialog{padding: 0px; border: 1px solid rgb(86, 91, 81); background: rgb(17, 20, 19); color: var(--paper); width: min(1040px, 100% - 36px); max-width: none; max-height: 94svh; overflow: auto;} :where(.ccx10) .ccx10-detail-dialog::backdrop{background: rgba(0, 0, 0, 0.867); backdrop-filter: blur(8px);} :where(.ccx10) .ccx10-detail-dialog .ccx10-dialog-close{position: absolute; float: none; margin: 0px; top: 14px; right: 14px;} :where(.ccx10) .ccx10-detail-dialog figure{margin: 0px; padding: 68px 24px 28px;} :where(.ccx10) .ccx10-detail-dialog img{width: 100%; height: 65svh; object-fit: contain;} :where(.ccx10) .ccx10-detail-image-wrap{display: grid; place-items: center;} :where(.ccx10) .ccx10-detail-image-wrap.ccx10-is-rotated{width: min(100%, 65svh); aspect-ratio: 1 / 1; margin-inline: auto;} :where(.ccx10) .ccx10-detail-image-wrap.ccx10-is-rotated img{width: 100%; height: 100%; transform: rotate(-90deg);} :where(.ccx10) .ccx10-detail-dialog figcaption{max-width: 760px; margin: 24px auto 0px; border-top: 1px solid var(--line); padding-top: 20px;} :where(.ccx10) .ccx10-detail-dialog h3{font-size: 29px; color: var(--paper); margin-bottom: 9px;} :where(.ccx10) .ccx10-detail-dialog p{font-size: 11px; color: var(--muted);} :where(.ccx10) .ccx10-detail-dialog a{display: inline-block; font-size: 9px; color: var(--gold); margin-top: 15px; border-bottom: 1px solid rgb(99, 101, 85); padding-bottom: 6px;} :where(.ccx10) .ccx10-modal-unveil-link{margin-top: 16px !important; color: var(--gold); font-size: 9px; line-height: 1.5;} @media (max-width:1180px){:where(.ccx10) .ccx10-journey-panel{gap: 35px;} :where(.ccx10) .ccx10-journey-art{min-height: 400px;} :where(.ccx10) .ccx10-detail-photo img{height: 380px;} :where(.ccx10) .ccx10-photo-pair .ccx10-detail-photo img{height: 320px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-art{min-height: 440px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-detail-photo img{height: 400px;}} @media (max-width:900px){:where(.ccx10) .ccx10-journey-panel,:where(.ccx10) .ccx10-collector-unveil .ccx10-journey-panel{grid-template-columns: 1fr 1fr; gap: 28px;} :where(.ccx10) .ccx10-journey-tab{padding-inline: 10px; font-size: 9px;} :where(.ccx10) .ccx10-journey-copy h3{font-size: 39px;} :where(.ccx10) .ccx10-journey-art{min-height: 340px; padding: 12px;} :where(.ccx10) .ccx10-detail-photo img{height: 320px;} :where(.ccx10) .ccx10-photo-pair{gap: 8px;} :where(.ccx10) .ccx10-photo-pair .ccx10-detail-photo img{height: 290px;} :where(.ccx10) .ccx10-journey-copy>p:not(.ccx10-eyebrow):not(.ccx10-photo-note){font-size: 12px;} :where(.ccx10) .ccx10-journey-copy .ccx10-eyebrow{font-size: 8px;} :where(.ccx10) .ccx10-cloth-art .ccx10-detail-photo img{height: 280px;} :where(.ccx10) .ccx10-signature-art .ccx10-detail-photo img{height: 200px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-art{min-height: 380px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-detail-photo img{height: 350px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-copy h3{font-size: 42px;} } @media (max-width:650px){:where(.ccx10) .ccx10-unveil h2,:where(.ccx10) .ccx10-collector-unveil h2{font-size: clamp(40px, 12vw, 61px);} :where(.ccx10) .ccx10-unveil .ccx10-section-intro,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-intro{max-width: 100%;} :where(.ccx10) .ccx10-journey-tabs{grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 24px;} :where(.ccx10) .ccx10-journey-tab{padding: 14px 10px; gap: 8px; font-size: 9px; min-height: 76px;} :where(.ccx10) .ccx10-journey-tab>span{font-size: 21px;} :where(.ccx10) .ccx10-journey-tab:nth-child(-n+3){border-bottom: 1px solid var(--line);} :where(.ccx10) .ccx10-journey-tab:nth-child(3){border-right: 0px;} :where(.ccx10) .ccx10-journey-panel,:where(.ccx10) .ccx10-collector-unveil .ccx10-journey-panel{grid-template-columns: 1fr; gap: 28px; min-height: 0px; align-items: start;} :where(.ccx10) .ccx10-journey-art{min-height: 0px; padding: 12px;} :where(.ccx10) .ccx10-detail-photo img{height: 330px;} :where(.ccx10) .ccx10-pack-overview img{height: auto; max-height: none;} :where(.ccx10) .ccx10-photo-pair .ccx10-detail-photo img{height: 290px;} :where(.ccx10) .ccx10-journey-copy{padding: 0px;} :where(.ccx10) .ccx10-journey-copy .ccx10-eyebrow{margin-bottom: 15px;} :where(.ccx10) .ccx10-journey-copy h3{font-size: 39px; margin-bottom: 19px;} :where(.ccx10) .ccx10-journey-copy>p:not(.ccx10-eyebrow):not(.ccx10-photo-note){font-size: 12px; max-width: 100%;} :where(.ccx10) .ccx10-journey-copy .ccx10-photo-note{font-size: 9px; margin-top: 16px;} :where(.ccx10) .ccx10-journey-copy blockquote{font-size: 28px;} :where(.ccx10) .ccx10-journey-controls{gap: 10px; margin-top: 27px; padding-top: 20px;} :where(.ccx10) .ccx10-journey-controls>span{font-size: 8px; letter-spacing: 0.05em;} :where(.ccx10) .ccx10-journey-controls>div{gap: 8px;} :where(.ccx10) .ccx10-journey-controls button{padding: 12px 14px; gap: 12px; font-size: 9px;} :where(.ccx10) .ccx10-cloth-art .ccx10-detail-photo img{height: 330px;} :where(.ccx10) .ccx10-signature-art .ccx10-detail-photo img{height: 200px;} :where(.ccx10) .ccx10-photo-pair figcaption{font-size: 7px;} :where(.ccx10) .ccx10-accessory-packaging{grid-template-columns: 1fr; gap: 30px; margin-top: 42px; padding-top: 40px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-detail-photo{max-width: 290px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-detail-photo img{height: 390px;} :where(.ccx10) .ccx10-accessory-packaging h3{font-size: 39px;} :where(.ccx10) .ccx10-accessory-packaging .ccx10-eyebrow{margin-bottom: 19px;} :where(.ccx10) .ccx10-accessory-packaging p:not(.ccx10-eyebrow){font-size: 12px;} :where(.ccx10) .ccx10-collector-unveil{padding-top: 70px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-tabs{grid-template-columns: repeat(4,minmax(0,1fr));} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-tab{font-size: 8px; padding-inline: 8px; border-bottom: 0px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-tab:nth-child(3){border-right: 1px solid var(--line);} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-art{min-height: 0px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-detail-photo img{height: 390px;} :where(.ccx10) .ccx10-collector-unveil .ccx10-journey-copy h3{font-size: 43px;} :where(.ccx10) .ccx10-detail-dialog{width: calc(100% - 24px);} :where(.ccx10) .ccx10-detail-dialog figure{padding: 65px 14px 22px;} :where(.ccx10) .ccx10-detail-dialog img{height: 59svh;} :where(.ccx10) .ccx10-detail-dialog figcaption{margin-top: 18px;} :where(.ccx10) .ccx10-detail-dialog h3{font-size: 26px;} :where(.ccx10) .ccx10-detail-dialog p{font-size: 10px;} :where(.ccx10) .ccx10-collection-unveil-link{font-size: 8px; gap: 20px;}} :where(.ccx10) .ccx10-accessories{position: relative; background: rgb(23, 21, 24); overflow: hidden; border-top: 1px solid var(--rule);} :where(.ccx10) .ccx10-accessory-stage{height: 100svh; min-height: 830px; max-height: 1150px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(at 69% 51%, rgba(59, 52, 40, 0.17), transparent 65%);} :where(.ccx10) .ccx10-accessory-top{position: absolute; top: 40px; left: 0px; right: 0px; z-index: 5;} :where(.ccx10) .ccx10-accessory-top .ccx10-section-index{border-top: 0px; padding-top: 0px;} :where(.ccx10) .ccx10-accessory-top .ccx10-section-index>span:last-child{color: var(--gold);} :where(.ccx10) .ccx10-accessory-title{position: absolute; left: var(--pad); top: 125px; z-index: 3; font-size: clamp(85px, 9.4vw, 175px); line-height: 0.86; letter-spacing: -0.074em; pointer-events: none;} :where(.ccx10) .ccx10-accessory-title em{font-size: 1.025em;} :where(.ccx10) .ccx10-accessory-intro{position: absolute; top: 148px; right: var(--pad); z-index: 3; font-size: 9px; text-align: right; color: var(--muted);} :where(.ccx10) .ccx10-accessory-panel{position: absolute; inset: 0px;} :where(.ccx10) .ccx10-accessory-art{position: absolute; left: 31%; top: 15%; width: 73%; height: 91%; z-index: 1; overflow: hidden; touch-action: pan-y; mask-image: radial-gradient(54% 53% at 50% 50%, black 33%, transparent 91%); -webkit-mask-image: radial-gradient(54% 53% at 50% 50%, black 33%, transparent 91%);} :where(.ccx10) .ccx10-accessory-art img{width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: rotate(-14deg) scale(1.08); transition: opacity .28s,transform 1.1s var(--ease); filter: sepia(.08);} :where(.ccx10) .ccx10-accessory-art[data-object="chain"] img{object-fit: contain; transform: rotate(14deg) scale(1.08);} :where(.ccx10) .ccx10-accessory-art[data-object="visor"] img{transform: rotate(-12deg) scale(1.06);} :where(.ccx10) .ccx10-accessory-art[data-object="mask"] img{transform: rotate(12deg) scale(1.02);} :where(.ccx10) .ccx10-accessory-art.ccx10-changing img{opacity: 0; transform: rotate(-5deg) scale(.98);} :where(.ccx10) .ccx10-accessory-outline{position: absolute; right: 1.5%; top: 8%; font-size: 31vw; line-height: 1; font-weight: 500; letter-spacing: -0.09em; color: transparent; -webkit-text-stroke: 1px #ddd4c212; z-index: 0; pointer-events: none;} :where(.ccx10) .ccx10-accessory-caption{position: absolute; left: var(--pad); bottom: 60px; width: 31%; z-index: 4;} :where(.ccx10) .ccx10-accessory-limited{display: inline-flex; align-items: center; gap: 9px; font-size: 8px; letter-spacing: 0.13em; color: var(--gold);} :where(.ccx10) .ccx10-accessory-limited i{display: block; width: 4px; height: 4px; background: var(--gold); border-radius: 50%;} :where(.ccx10) .ccx10-accessory-caption h3{font-size: clamp(24px, 2.5vw, 45px); line-height: 1.03; letter-spacing: -0.055em; margin-top: 23px;} :where(.ccx10) .ccx10-accessory-caption>p{font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 19px; max-width: 245px;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link{margin-top: 20px; min-width: 230px; font-size: 9px;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link>span{font-size: 23px;} :where(.ccx10) .ccx10-accessory-side-label{position: absolute; right: var(--pad); top: 45%; z-index: 3; writing-mode: vertical-rl; font-size: 7px; color: var(--muted);} :where(.ccx10) .ccx10-accessory-controls{position: absolute; bottom: 63px; right: var(--pad); display: flex; align-items: center; gap: 11px; z-index: 5;} :where(.ccx10) .ccx10-accessory-count{display: flex; gap: 12px; margin-right: 20px; font-size: 10px;} :where(.ccx10) .ccx10-accessory-count>span:last-child{color: var(--muted);} :where(.ccx10) .ccx10-accessory-arrow{width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; font-size: 22px; transition: background .25s,color .25s;} :where(.ccx10) .ccx10-accessory-arrow:hover{background: var(--sand); color: var(--ink);} :where(.ccx10) .ccx10-accessory-tabs{position: relative; z-index: 6; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0 var(--pad); background: rgb(18, 17, 19);} :where(.ccx10) .ccx10-accessory-tab{display: flex; align-items: center; position: relative; text-align: left; gap: 22px; padding: 28px 25px 28px 0px; border-right: 1px solid var(--rule); opacity: 0.45; transition: opacity .3s,background .3s;} :where(.ccx10) .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 25px;} :where(.ccx10) .ccx10-accessory-tab:last-child{border-right: 0px; padding-right: 0px;} :where(.ccx10) .ccx10-accessory-tab:before{content: ""; height: 2px; background: var(--gold); position: absolute; top: -1px; left: 0px; right: 0px; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);} :where(.ccx10) .ccx10-accessory-tab[aria-selected="true"],:where(.ccx10) .ccx10-accessory-tab:hover{opacity: 1;} :where(.ccx10) .ccx10-accessory-tab[aria-selected="true"]:before{transform: scaleX(1);} :where(.ccx10) .ccx10-accessory-tab-index{font-size: 8px; color: var(--gold);} :where(.ccx10) .ccx10-accessory-tab-copy{display: flex; flex-direction: column; gap: 8px;} :where(.ccx10) .ccx10-accessory-tab-copy>span:first-child{font-size: 13px; line-height: 1.3; letter-spacing: -0.02em;} :where(.ccx10) .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 6px; letter-spacing: 0.11em; color: var(--muted);} :where(.ccx10) .ccx10-accessory-tab-symbol{margin-left: auto; font-size: 20px; color: var(--gold); transition: transform .3s;} :where(.ccx10) .ccx10-accessory-tab:hover .ccx10-accessory-tab-symbol{transform: translate(2px,-2px);} @media (min-width:1600px){:where(.ccx10) .ccx10-accessory-stage{min-height: 1050px;} :where(.ccx10) .ccx10-accessory-title{top: 160px;} :where(.ccx10) .ccx10-accessory-art{left: 34%; width: 68%; top: 11%; height: 97%;} :where(.ccx10) .ccx10-accessory-caption{bottom: 80px;} :where(.ccx10) .ccx10-accessory-controls{bottom: 83px;}} @media (min-width:761px) and (max-width:1100px){ :where(.ccx10) .ccx10-accessory-stage{min-height: 790px;} :where(.ccx10) .ccx10-accessory-title{font-size: 10vw; top: 130px;} :where(.ccx10) .ccx10-accessory-art{left: 27%; width: 83%; top: 16%; height: 82%;} :where(.ccx10) .ccx10-accessory-caption{width: 34%; bottom: 60px;} :where(.ccx10) .ccx10-accessory-caption h3{font-size: 3.3vw;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link{min-width: 200px;} :where(.ccx10) .ccx10-accessory-intro{top: 112px; font-size: 7px;} :where(.ccx10) .ccx10-accessory-tab{gap: 13px; padding-top: 23px; padding-bottom: 23px; padding-right: 16px;} :where(.ccx10) .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 16px;} :where(.ccx10) .ccx10-accessory-tab-copy>span:first-child{font-size: 11px;} :where(.ccx10) .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 5px;} :where(.ccx10) .ccx10-accessory-tab-symbol{font-size: 17px;} :where(.ccx10) .ccx10-accessory-controls{bottom: 63px;}} @media (max-width:760px){:where(.ccx10) .ccx10-accessory-stage{height: 100svh; min-height: 850px; max-height: 1030px;} :where(.ccx10) .ccx10-accessory-top{top: 32px;} :where(.ccx10) .ccx10-accessory-top .ccx10-section-index{font-size: 6px;} :where(.ccx10) .ccx10-accessory-title{top: 105px; font-size: 16.1vw; line-height: 0.88; max-width: 95%; letter-spacing: -0.07em;} :where(.ccx10) .ccx10-accessory-intro{top: 57px; font-size: 6px; line-height: 1.5;} :where(.ccx10) .ccx10-accessory-art{left: -18%; width: 138%; height: 63%; top: 24%; mask-image: radial-gradient(53% 51% at 50% 50%, black 31%, transparent 94%); -webkit-mask-image: radial-gradient(53% 51% at 50% 50%, black 31%, transparent 94%);} :where(.ccx10) .ccx10-accessory-art img{transform: rotate(-18deg) scale(1.02);} :where(.ccx10) .ccx10-accessory-art[data-object="chain"] img{transform: rotate(15deg) scale(.98);} :where(.ccx10) .ccx10-accessory-art[data-object="visor"] img{transform: rotate(-13deg) scale(1.04);} :where(.ccx10) .ccx10-accessory-art[data-object="mask"] img{transform: rotate(12deg) scale(.97);} :where(.ccx10) .ccx10-accessory-outline{top: 22%; right: -3%; font-size: 64vw; -webkit-text-stroke-color: rgba(221, 212, 194, 0.094);} :where(.ccx10) .ccx10-accessory-side-label{display: none;} :where(.ccx10) .ccx10-accessory-caption{bottom: 32px; width: 66%;} :where(.ccx10) .ccx10-accessory-limited{font-size: 6px; gap: 7px;} :where(.ccx10) .ccx10-accessory-limited i{height: 3px; width: 3px;} :where(.ccx10) .ccx10-accessory-caption h3{font-size: 26px; line-height: 1.03; margin-top: 15px; max-width: 235px;} :where(.ccx10) .ccx10-accessory-caption>p{font-size: 10px; margin-top: 13px; max-width: 225px;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link{margin-top: 12px; min-width: 190px; font-size: 8px; padding: 9px 0px;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link>span{font-size: 21px;} :where(.ccx10) .ccx10-accessory-controls{right: var(--pad); bottom: 34px; gap: 8px; flex-wrap: wrap; width: 87px;} :where(.ccx10) .ccx10-accessory-count{width: 100%; justify-content: flex-end; font-size: 8px; margin: 0px 0px 11px; gap: 10px;} :where(.ccx10) .ccx10-accessory-arrow{height: 38px; width: 38px; font-size: 20px;} :where(.ccx10) .ccx10-accessory-tabs{padding: 0 var(--pad);} :where(.ccx10) .ccx10-accessory-tab{display: block; padding: 18px 8px 17px 0px; min-height: 112px;} :where(.ccx10) .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 10px;} :where(.ccx10) .ccx10-accessory-tab-index{font-size: 6px; margin-bottom: 10px; display: block;} :where(.ccx10) .ccx10-accessory-tab-copy{gap: 7px; max-width: 80px;} :where(.ccx10) .ccx10-accessory-tab-copy>span:first-child{font-size: 10px; min-height: 26px;} :where(.ccx10) .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 5px; letter-spacing: 0.02em; line-height: 1.6;} :where(.ccx10) .ccx10-accessory-tab-symbol{display: none;} } @media (max-width:390px){:where(.ccx10) .ccx10-accessory-stage{min-height: 800px;} :where(.ccx10) .ccx10-accessory-title{top: 102px;} :where(.ccx10) .ccx10-accessory-art{top: 24%; height: 59%;} :where(.ccx10) .ccx10-accessory-caption h3{font-size: 23px;} :where(.ccx10) .ccx10-accessory-caption{bottom: 30px;} :where(.ccx10) .ccx10-accessory-caption>p{font-size: 9px;} :where(.ccx10) .ccx10-accessory-caption .ccx10-text-link{min-width: 170px;} :where(.ccx10) .ccx10-accessory-tab-copy>span:first-child{font-size: 9px;} :where(.ccx10) .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 7px;} :where(.ccx10) .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 4.5px;} } @media (prefers-reduced-motion:reduce){:where(.ccx10) .ccx10-accessory-art img{transition: none;} :where(.ccx10) .ccx10-accessory-tab:before{transition: none;}} .ccx10{--display: CCXFrequencyRoboto,Arial,sans-serif;} .ccx10{font-family: CCXFrequencyRoboto, Arial, sans-serif; font-weight: 400;} :where(.ccx10) h1,:where(.ccx10) h2,:where(.ccx10) h3{font-family: CCXFrequencyRoboto, Arial, sans-serif; font-weight: 300;} :where(.ccx10) .ccx10-sr-only{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;} :where(.ccx10) .ccx10-hero h1{font-size: clamp(76px, 7.8vw, 134px); letter-spacing: -0.065em; line-height: 0.96;} :where(.ccx10) .ccx10-hero-copy{max-width: 1050px;} :where(.ccx10) .ccx10-hero-copy>.ccx10-eyebrow{font-size: 9px;} :where(.ccx10) .ccx10-hero h1 br{display: none;} :where(.ccx10) .ccx10-section-heading h2,:where(.ccx10) .ccx10-closing h2{letter-spacing: -0.055em;} :where(.ccx10) .ccx10-collection .ccx10-section-heading{margin-bottom: 54px;} :where(.ccx10) .ccx10-craft h2{font-size: clamp(42px, 4.6vw, 76px); letter-spacing: -0.055em;} :where(.ccx10) .ccx10-story-copy h2{letter-spacing: -0.055em; font-size: clamp(46px, 4.4vw, 73px);} :where(.ccx10) .ccx10-collector-copy h2{font-size: clamp(44px, 4.5vw, 76px); letter-spacing: -0.055em;} :where(.ccx10) .ccx10-film-band h2{font-size: clamp(60px, 7.4vw, 124px); letter-spacing: -0.06em;} :where(.ccx10) .ccx10-unveil .ccx10-section-heading h2,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-heading h2{font-size: clamp(44px, 5vw, 78px);} :where(.ccx10) .ccx10-journey-copy h3{letter-spacing: -0.05em;} :where(.ccx10) #ccx10-accessories{--pad: var(--gutter); --rule: var(--line); --sand: var(--paper); --ink: var(--bg); --ease: cubic-bezier(.22,.65,.23,1); background: rgb(16, 17, 17); border-top: 1px solid var(--line);} :where(.ccx10) #ccx10-accessories .ccx10-micro{font-size: 9px; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase;} :where(.ccx10) #ccx10-accessories .ccx10-section-index{display: flex; justify-content: space-between; gap: 20px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{height: 100svh; min-height: 920px; max-height: 1150px; background: radial-gradient(at 68% 51%, rgba(75, 66, 51, 0.11), transparent 65%);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-top.ccx10-section-pad{padding: 0 var(--gutter); top: 40px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{left: var(--gutter); top: 118px; font-size: clamp(76px, 8.7vw, 154px); letter-spacing: -0.07em; line-height: 0.9; font-weight: 300;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title>span:first-of-type{color: var(--gold);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{top: 136px; right: var(--gutter); max-width: 250px; font-size: 11px; line-height: 1.7; letter-spacing: 0px; text-transform: none; text-align: right;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{display: block; max-width: 225px; margin-top: 18px; margin-left: auto; font-size: 10px; color: var(--gold); line-height: 1.7;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art{left: 31%; width: 74%; top: 20%; height: 82%;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-outline{top: 12%; font-family: CCXFrequencyRoboto, Arial, sans-serif; font-weight: 300;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{bottom: 58px; width: 31%; max-width: 410px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption h3{font-size: clamp(25px, 2.7vw, 44px); letter-spacing: -0.055em; line-height: 1.05; max-width: 340px; font-weight: 400;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-price{display: block; color: var(--gold); font-size: 13px; margin-top: 15px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 12px; line-height: 1.7; max-width: 310px; margin-top: 15px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-certificate{display: block; font-size: 8px; letter-spacing: 0.1em; color: var(--gold); margin-top: 19px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{margin-top: 19px; min-height: 44px; font-size: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-limited{font-size: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-side-label{font-size: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls{bottom: 60px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls .ccx10-accessory-arrow{position: static; padding: 0px; font-size: 22px; min-width: 44px; min-height: 44px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tabs{background: rgb(11, 12, 12);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>span:first-child{font-size: 14px; font-weight: 400;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-index{font-size: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-count{font-size: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging{margin-top: 0px; padding: 90px var(--gutter); border-top: 0px; background: rgb(11, 12, 12);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging h3{font-size: clamp(32px, 3.3vw, 54px); letter-spacing: -0.05em;} :where(.ccx10) .ccx10-product-gallery>img{mix-blend-mode: lighten;} :where(.ccx10) .ccx10-product-info h2{letter-spacing: -0.045em;} @media (min-width:1600px){:where(.ccx10) .ccx10-hero h1{font-size: 139px;} :where(.ccx10) .ccx10-hero-copy{max-width: 1200px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{min-height: 1080px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{bottom: 70px;}} @media (max-width:1180px){ :where(.ccx10) .ccx10-hero h1{font-size: 8.2vw;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{font-size: 10px; max-width: 190px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{font-size: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{width: 34%;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 11px;} :where(.ccx10) .ccx10-craft h2{font-size: 4.7vw;} :where(.ccx10) .ccx10-story-copy h2{font-size: 4.8vw;} :where(.ccx10) .ccx10-collector-copy h2{font-size: 4.8vw;}} @media (max-width:900px){:where(.ccx10) .ccx10-hero h1{font-size: 9vw;} :where(.ccx10) .ccx10-hero-copy{padding-top: 85px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{font-size: 9.4vw; top: 130px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{top: 410px; left: var(--gutter); right: auto; text-align: left; max-width: 230px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{margin-left: 0px; margin-top: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{min-height: 1000px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art{left: 26%; width: 86%; top: 26%; height: 70%;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{width: 40%; bottom: 58px;} :where(.ccx10) .ccx10-story-copy h2{font-size: 5.1vw;} :where(.ccx10) .ccx10-collector-copy h2{font-size: 5.1vw;}} @media (max-width:650px){:where(.ccx10) .ccx10-hero{height: 830px;} :where(.ccx10) .ccx10-hero-copy{padding-top: 355px;} :where(.ccx10) .ccx10-hero h1{font-size: clamp(48px, 12.4vw, 80px); letter-spacing: -0.065em; line-height: 1;} :where(.ccx10) .ccx10-hero-copy>.ccx10-eyebrow{font-size: 7px;} :where(.ccx10) .ccx10-hero-description{margin-top: 22px;} :where(.ccx10) .ccx10-hero-bottom{font-size: 6px;} :where(.ccx10) .ccx10-hero-bottom>span:first-child{max-width: 170px; line-height: 1.6;} :where(.ccx10) .ccx10-collection .ccx10-section-heading{margin-bottom: 34px;} :where(.ccx10) .ccx10-section-heading h2{font-size: clamp(42px, 10.7vw, 64px);} :where(.ccx10) .ccx10-story-copy h2{font-size: clamp(40px, 11vw, 63px);} :where(.ccx10) .ccx10-craft h2{font-size: clamp(36px, 9.8vw, 56px);} :where(.ccx10) .ccx10-collector-copy h2{font-size: clamp(40px, 11vw, 65px);} :where(.ccx10) .ccx10-film-band h2{font-size: clamp(40px, 10.8vw, 64px);} :where(.ccx10) .ccx10-unveil .ccx10-section-heading h2,:where(.ccx10) .ccx10-collector-unveil .ccx10-section-heading h2{font-size: clamp(40px, 10.8vw, 64px);} :where(.ccx10) .ccx10-journey-copy h3{font-size: clamp(35px, 10vw, 56px);} :where(.ccx10) .ccx10-closing h2{font-size: clamp(36px, 10vw, 60px);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-top.ccx10-section-pad{top: 28px;} :where(.ccx10) #ccx10-accessories .ccx10-section-index{align-items: start;} :where(.ccx10) #ccx10-accessories .ccx10-section-index>span{font-size: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-section-index>span:last-child{font-size: 6px; text-align: right; max-width: 80px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{height: auto; min-height: 1040px; max-height: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{top: 100px; font-size: 14.7vw; line-height: 0.92; letter-spacing: -0.07em;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{left: var(--gutter); right: auto; top: calc(105px + 42vw); text-align: left; font-size: 10px; max-width: 290px; line-height: 1.6;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>br{display: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>br:after{content: " ";} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{max-width: 280px; font-size: 9px; line-height: 1.6; margin-top: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art{left: -19%; width: 140%; top: 28%; height: 49%; mask-image: radial-gradient(53% 51% at 50% 50%, rgb(0, 0, 0) 31%, transparent 94%); -webkit-mask-image: radial-gradient(53% 51% at 50% 50%, rgb(0, 0, 0) 31%, transparent 94%);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-outline{top: 34%; font-size: 69vw;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{left: var(--gutter); bottom: 36px; width: 74%; max-width: 310px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption h3{font-size: 29px; max-width: 280px; margin-top: 14px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-limited{font-size: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-price{font-size: 12px; margin-top: 13px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 11px; max-width: 280px; margin-top: 13px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-certificate{font-size: 7px; margin-top: 14px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{font-size: 9px; margin-top: 12px; min-width: 210px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls{right: var(--gutter); bottom: 37px; width: 94px; gap: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-count{font-size: 9px; margin-bottom: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls .ccx10-accessory-arrow{height: 42px; width: 42px; min-height: 42px; min-width: 42px; font-size: 22px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab{min-height: 115px; padding-top: 19px; padding-bottom: 18px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>span:first-child{font-size: 11px; line-height: 1.4; min-height: 31px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 6px; line-height: 1.6; letter-spacing: 0.02em;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-index{font-size: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging{padding: 65px var(--gutter);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging h3{font-size: clamp(29px, 8.3vw, 46px); line-height: 1.08;} :where(.ccx10) .ccx10-product-info h2{font-size: 48px;} :where(.ccx10) .ccx10-product-info>.ccx10-eyebrow{font-size: 8px;} :where(.ccx10) .ccx10-product-info .ccx10-product-facts{font-size: 11px;}} @media (max-width:390px){:where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{min-height: 1000px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{font-size: 14.5vw;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{top: calc(112px + 42vw);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption h3{font-size: 26px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 10px; max-width: 235px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{width: 73%;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-certificate{font-size: 6px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{min-width: 190px; font-size: 8px;} } @media (min-width:901px){ } :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging{grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(36px, 4.5vw, 86px); align-items: center;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging .ccx10-detail-photo{width: 100%; max-width: none; aspect-ratio: 16/9; justify-self: stretch; overflow: hidden; border: 0px; padding: 0px; background: transparent;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging .ccx10-detail-photo img{width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center; mix-blend-mode: lighten; mask-image: linear-gradient(transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 93%, transparent); -webkit-mask-image: linear-gradient(transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 93%, transparent);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging .ccx10-photo-corner{width: 40px; height: 40px; right: 18px; bottom: 18px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging h3{font-size: clamp(28px, 2.7vw, 49px); line-height: 1.06;} @media (max-width:900px){:where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging{grid-template-columns: minmax(0,1fr); gap: 34px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging .ccx10-detail-photo{max-width: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging h3{font-size: clamp(30px, 6vw, 46px);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-packaging p:not(.ccx10-eyebrow){max-width: 560px;}} :where(.ccx10) #ccx10-craft{align-items: stretch;} :where(.ccx10) #ccx10-craft .ccx10-craft-image{width: 100%; max-width: none; min-width: 0px; min-height: 0px; align-self: stretch; justify-self: stretch; overflow: hidden;} :where(.ccx10) #ccx10-craft .ccx10-craft-image>img{position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 63%;} @media (max-width:650px){:where(.ccx10) #ccx10-craft .ccx10-craft-image{aspect-ratio: 3/4;}} @media (prefers-reduced-motion:reduce){ } :where(.ccx10) .ccx10-single-eyewear{width: calc(100% + var(--gutter) + var(--gutter)); margin-inline: calc(0px - var(--gutter)); background: rgb(16, 17, 18); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);} :where(.ccx10) .ccx10-eyewear-top{display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px var(--gutter); border-bottom: 1px solid var(--line);} :where(.ccx10) .ccx10-eyewear-tabs{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: min(580px, 68%);} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]{display: flex; align-items: center; gap: 17px; min-height: 88px; padding: 20px 24px; border: 1px solid rgba(238, 234, 225, 0.48); background: transparent; color: var(--paper); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.055em; transition: background .25s,color .25s,border-color .25s;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]>span{font-size: 9px; letter-spacing: 0.04em; align-self: flex-start; margin-top: 3px; opacity: 0.65;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]:after{content: ""; flex: 0 0 9px; height: 9px; width: 9px; border: 1px solid; border-radius: 50%; margin-left: auto;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab][aria-selected=true]{background: var(--paper); border-color: var(--paper); color: var(--bg);} :where(.ccx10) .ccx10-eyewear-tabs [role=tab][aria-selected=true]:after{background: currentcolor;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab][aria-selected=false]:hover{background: rgba(238, 234, 225, 0.055); border-color: var(--paper);} :where(.ccx10) .ccx10-eyewear-marker{max-width: 240px; font-size: 9px; line-height: 1.7; letter-spacing: 0.12em; text-align: right; color: var(--gold); text-transform: uppercase;} :where(.ccx10) .ccx10-eyewear-scene{height: clamp(640px, 53vw, 900px); position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(at 69% 52%, rgba(81, 72, 58, 0.14) 0%, transparent 61%), linear-gradient(110deg, rgb(17, 18, 19), rgb(24, 23, 25) 62%, rgb(16, 17, 18));} :where(.ccx10) .ccx10-eyewear-scene:before{content: ""; position: absolute; left: 40%; right: 5%; top: 13%; bottom: 9%; background: radial-gradient(rgba(200, 181, 144, 0.04), transparent 64%); pointer-events: none; z-index: 0;} :where(.ccx10) .ccx10-eyewear-ghost{position: absolute; right: 4%; bottom: 68px; font-size: clamp(200px, 29vw, 550px); line-height: 0.8; font-weight: 500; letter-spacing: -0.09em; color: rgba(238, 234, 225, 0.04); pointer-events: none; z-index: 0; user-select: none;} :where(.ccx10) .ccx10-eyewear-visual{position: absolute; top: 50%; left: 24%; width: 81%; height: 116%; transform: translateY(-50%); z-index: 1; mask-image: radial-gradient(56% 48% at 50% 50%, rgb(0, 0, 0) 55%, transparent 100%); -webkit-mask-image: radial-gradient(56% 48% at 50% 50%, rgb(0, 0, 0) 55%, transparent 100%); pointer-events: none;} :where(.ccx10) .ccx10-eyewear-visual>img{width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; mix-blend-mode: lighten; transform: perspective(1600px) rotateX(var(--eyewear-y,0deg)) rotateY(var(--eyewear-x,0deg)); transition: opacity .24s,transform .8s cubic-bezier(.22,.65,.23,1);} :where(.ccx10) .ccx10-eyewear-visual>img.ccx10-changing{opacity: 0.2;} :where(.ccx10) .ccx10-eyewear-editorial{position: absolute; top: 75px; left: var(--gutter); width: 26%; max-width: 420px; z-index: 3;} :where(.ccx10) .ccx10-eyewear-number{font-size: 10px; line-height: 1.5; letter-spacing: 0.1em; color: var(--gold);} :where(.ccx10) .ccx10-eyewear-editorial h3{font-size: clamp(35px, 4.3vw, 76px); font-weight: 300; line-height: 1.03; letter-spacing: -0.055em; margin-top: 32px;} :where(.ccx10) .ccx10-eyewear-editorial>p{font-size: 12px; line-height: 1.75; color: var(--muted); max-width: 255px; margin-top: 26px;} :where(.ccx10) .ccx10-eyewear-edition{display: flex; flex-direction: column; align-items: start; gap: 12px; margin-top: 60px;} :where(.ccx10) .ccx10-eyewear-edition>strong{font-size: clamp(56px, 5.6vw, 94px); font-weight: 300; line-height: 1; letter-spacing: -0.055em;} :where(.ccx10) .ccx10-eyewear-edition>span{font-size: 8px; line-height: 1.7; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);} :where(.ccx10) .ccx10-eyewear-open{position: absolute; right: 9%; bottom: 23%; width: 47px; height: 47px; border: 1px solid rgba(238, 234, 225, 0.39); border-radius: 50%; z-index: 4; display: grid; place-items: center; font-size: 24px; background: rgba(20, 21, 21, 0.3); transition: background .2s,border-color .2s;} :where(.ccx10) .ccx10-eyewear-open:hover{background: var(--green); border-color: var(--green);} :where(.ccx10) .ccx10-eyewear-views{position: absolute; right: var(--gutter); bottom: 40px; display: flex; align-items: center; gap: 35px; z-index: 4;} :where(.ccx10) .ccx10-eyewear-views button{display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 7px 0px; border-bottom: 1px solid transparent; color: var(--muted); font-size: 10px; transition: color .2s,border-color .2s;} :where(.ccx10) .ccx10-eyewear-views button>span{font-size: 7px; opacity: 0.65;} :where(.ccx10) .ccx10-eyewear-views button[aria-pressed=true]{color: var(--paper); border-bottom-color: var(--gold);} :where(.ccx10) .ccx10-eyewear-view-note{position: absolute; bottom: 52px; left: var(--gutter); font-size: 8px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); z-index: 3;} :where(.ccx10) .ccx10-eyewear-bottom{display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--gutter) 30px; border-top: 1px solid var(--line);} :where(.ccx10) .ccx10-eyewear-bottom-label{font-size: 8px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);} :where(.ccx10) .ccx10-eyewear-bottom-model{display: flex; gap: 24px; align-items: center; margin-top: 9px;} :where(.ccx10) .ccx10-eyewear-bottom-model>span:first-child{font-size: 39px; line-height: 1.1; font-weight: 300; letter-spacing: -0.055em;} :where(.ccx10) .ccx10-eyewear-bottom-model>span:last-child{font-size: 12px; color: var(--gold);} :where(.ccx10) .ccx10-eyewear-bottom .ccx10-button{min-width: 220px; min-height: 56px;} @media (min-width:1800px){:where(.ccx10) .ccx10-eyewear-editorial{top: 100px;} :where(.ccx10) .ccx10-eyewear-editorial>p{font-size: 14px; max-width: 290px;} :where(.ccx10) .ccx10-eyewear-edition{margin-top: 80px;} :where(.ccx10) .ccx10-eyewear-marker{font-size: 10px;}} @media (max-width:1100px){:where(.ccx10) .ccx10-eyewear-tabs{width: 66%;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]{font-size: 31px; min-height: 82px; padding: 18px 21px;} :where(.ccx10) .ccx10-eyewear-marker{font-size: 8px;} :where(.ccx10) .ccx10-eyewear-scene{height: 690px;} :where(.ccx10) .ccx10-eyewear-editorial{top: 65px; width: 28%;} :where(.ccx10) .ccx10-eyewear-editorial h3{font-size: 4.6vw;} :where(.ccx10) .ccx10-eyewear-editorial>p{font-size: 11px; max-width: 225px;} :where(.ccx10) .ccx10-eyewear-edition{margin-top: 52px;} :where(.ccx10) .ccx10-eyewear-visual{left: 22%; width: 86%; height: 110%;} :where(.ccx10) .ccx10-eyewear-ghost{font-size: 31vw; bottom: 95px;}} @media (max-width:760px){:where(.ccx10) .ccx10-eyewear-top{display: block; padding: 23px var(--gutter) 19px;} :where(.ccx10) .ccx10-eyewear-tabs{width: 100%; gap: 10px;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]{font-size: 30px; min-height: 76px; padding: 17px 18px; gap: 12px;} :where(.ccx10) .ccx10-eyewear-tabs [role=tab]>span{font-size: 8px;} :where(.ccx10) .ccx10-eyewear-marker{text-align: left; max-width: none; margin-top: 17px; font-size: 7px; letter-spacing: 0.1em;} :where(.ccx10) .ccx10-eyewear-marker br{display: none;} :where(.ccx10) .ccx10-eyewear-scene{height: 760px;} :where(.ccx10) .ccx10-eyewear-editorial{top: 33px; width: calc(100% - var(--gutter) - var(--gutter)); max-width: none;} :where(.ccx10) .ccx10-eyewear-number{font-size: 8px;} :where(.ccx10) .ccx10-eyewear-editorial h3{font-size: clamp(33px, 7.5vw, 53px); margin-top: 21px; width: 66%; line-height: 1.03;} :where(.ccx10) .ccx10-eyewear-editorial>p{font-size: 11px; line-height: 1.7; max-width: 62%; margin-top: 17px;} :where(.ccx10) .ccx10-eyewear-edition{position: absolute; top: 25px; right: 0px; margin: 0px; align-items: end; gap: 9px; text-align: right;} :where(.ccx10) .ccx10-eyewear-edition>strong{font-size: 49px;} :where(.ccx10) .ccx10-eyewear-edition>span{font-size: 6px; max-width: 100px; letter-spacing: 0.06em;} :where(.ccx10) .ccx10-eyewear-visual{left: -15%; width: 130%; height: 77%; top: 58%; mask-image: radial-gradient(56% 49% at 50% 50%, rgb(0, 0, 0) 59%, transparent 100%); -webkit-mask-image: radial-gradient(56% 49% at 50% 50%, rgb(0, 0, 0) 59%, transparent 100%);} :where(.ccx10) .ccx10-eyewear-visual>img{object-fit: contain;} :where(.ccx10) .ccx10-eyewear-ghost{font-size: 48vw; bottom: 125px; left: 5%; right: auto;} :where(.ccx10) .ccx10-eyewear-open{right: var(--gutter); bottom: 143px; width: 41px; height: 41px; font-size: 22px;} :where(.ccx10) .ccx10-eyewear-views{bottom: 47px; left: var(--gutter); right: var(--gutter); justify-content: space-between; gap: 15px;} :where(.ccx10) .ccx10-eyewear-views button{font-size: 9px; gap: 8px; min-height: 44px;} :where(.ccx10) .ccx10-eyewear-views button>span{font-size: 7px;} :where(.ccx10) .ccx10-eyewear-view-note{bottom: 23px; font-size: 6px;} :where(.ccx10) .ccx10-eyewear-bottom{padding: 23px var(--gutter); gap: 16px;} :where(.ccx10) .ccx10-eyewear-bottom-label{font-size: 6px;} :where(.ccx10) .ccx10-eyewear-bottom-model{display: block; margin-top: 9px;} :where(.ccx10) .ccx10-eyewear-bottom-model>span:first-child{display: block; font-size: 31px;} :where(.ccx10) .ccx10-eyewear-bottom-model>span:last-child{display: block; font-size: 10px; margin-top: 7px;} :where(.ccx10) .ccx10-eyewear-bottom .ccx10-button{min-width: 168px; min-height: 52px; padding: 17px; font-size: 9px; gap: 24px;}} @media (max-width:760px){:where(.ccx10) .ccx10-eyewear-visual{left: -10%; width: 120%;}} @media (max-width:390px){:where(.ccx10) .ccx10-eyewear-tabs [role=tab]{font-size: 27px; min-height: 72px; padding: 16px 14px;} :where(.ccx10) .ccx10-eyewear-scene{height: 700px;} :where(.ccx10) .ccx10-eyewear-editorial h3{font-size: 8vw;} :where(.ccx10) .ccx10-eyewear-editorial>p{font-size: 10px;} :where(.ccx10) .ccx10-eyewear-edition>strong{font-size: 43px;} :where(.ccx10) .ccx10-eyewear-edition>span{font-size: 5.5px;} :where(.ccx10) .ccx10-eyewear-visual{top: 59%; height: 76%;} :where(.ccx10) .ccx10-eyewear-bottom .ccx10-button{min-width: 153px;} :where(.ccx10) .ccx10-eyewear-bottom-model>span:first-child{font-size: 29px;}} @media (prefers-reduced-motion:reduce){:where(.ccx10) .ccx10-eyewear-visual>img{transition: none; transform: none;}} :where(.ccx10) #ccx10-collector-carousel.ccx10-collector-carousel{display: block; min-height: 0px; width: 100%; padding: 26px 28px 18px; overflow: hidden; isolation: isolate; background: radial-gradient(at 50% 40%, rgb(37, 39, 36) 0%, rgb(23, 26, 24) 60%, rgb(20, 23, 21) 100%); border: 1px solid rgba(184, 171, 145, 0.12);} :where(.ccx10) .ccx10-collector-carousel-top{position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 18px; font-size: 8px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold);} :where(.ccx10) .ccx10-collector-carousel-top>span:last-child{color: var(--muted); text-align: right;} :where(.ccx10) .ccx10-collector-carousel-viewport{position: relative; width: 100%; aspect-ratio: 1.14 / 1; touch-action: pan-y pinch-zoom; user-select: none; cursor: grab; outline-offset: -4px;} :where(.ccx10) .ccx10-collector-carousel-viewport.ccx10-is-dragging{cursor: grabbing;} :where(.ccx10) .ccx10-collector-piece{position: absolute; inset: 0px; isolation: isolate;} :where(.ccx10) .ccx10-collector-piece[hidden]{display: none;} :where(.ccx10) .ccx10-collector-piece.ccx10-is-entering{animation: collector-piece-in .42s cubic-bezier(.2,.7,.2,1) both;} :where(.ccx10) .ccx10-collector-piece-ghost{position: absolute; z-index: -1; left: 50%; top: 49%; transform: translate(-50%,-50%); font: 300 clamp(90px,12vw,220px)/1 var(--display); letter-spacing: -0.07em; color: rgba(238, 234, 225, 0.04); pointer-events: none;} :where(.ccx10) .ccx10-collector-piece-open{display: block; position: absolute; inset: 0px; width: 100%; height: 100%; padding: 0px; cursor: inherit;} :where(.ccx10) .ccx10-collector-piece-open img{width: 100%; height: 100%; max-width: none; object-fit: contain; mix-blend-mode: lighten; transform: translateX(var(--collector-drag,0px)); transition: transform .35s cubic-bezier(.2,.7,.2,1),filter .3s; mask-image: radial-gradient(57% 57% at 50% 50%, rgb(0, 0, 0) 43%, rgba(0, 0, 0, 0.667) 68%, transparent 95%); -webkit-mask-image: radial-gradient(57% 57% at 50% 50%, rgb(0, 0, 0) 43%, rgba(0, 0, 0, 0.667) 68%, transparent 95%); pointer-events: none;} :where(.ccx10) .ccx10-collector-piece-open:hover img{filter: brightness(1.07);} :where(.ccx10) .ccx10-is-dragging .ccx10-collector-piece-open img{transition: none;} :where(.ccx10) .ccx10-collector-piece-zoom{position: absolute; bottom: 15px; right: 0px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(184, 171, 145, 0.376); border-radius: 50%; font-size: 20px; color: var(--paper); transition: background .25s,border-color .25s;} :where(.ccx10) .ccx10-collector-piece-open:hover .ccx10-collector-piece-zoom{background: rgba(184, 171, 145, 0.125); border-color: var(--gold);} :where(.ccx10) .ccx10-collector-carousel-caption{display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; position: relative; padding: 12px 0px 24px; min-height: 94px;} :where(.ccx10) .ccx10-collector-piece-name{font: 300 clamp(26px,2.7vw,44px)/1.08 var(--display); letter-spacing: -0.045em;} :where(.ccx10) .ccx10-collector-carousel-caption p{font-size: 9px; color: var(--gold); margin-top: 10px; line-height: 1.5;} :where(.ccx10) .ccx10-collector-swipe-hint{display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; padding-bottom: 2px;} :where(.ccx10) .ccx10-collector-swipe-hint svg,:where(.ccx10) .ccx10-collector-carousel-arrows svg{fill: none; stroke: currentcolor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;} :where(.ccx10) .ccx10-collector-carousel-controls{display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(184, 171, 145, 0.2); padding-top: 17px;} :where(.ccx10) .ccx10-collector-carousel-count{white-space: nowrap; font: 300 22px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;} :where(.ccx10) .ccx10-collector-carousel-count>span:not(:first-child){font-size: 10px; color: var(--gold);} :where(.ccx10) .ccx10-collector-carousel-indicators{display: flex; align-items: center; gap: 4px; flex: 1 1 0%; justify-content: center; min-width: 0px;} :where(.ccx10) .ccx10-collector-carousel-indicators button{height: 44px; min-width: 19px; max-width: 34px; flex: 1 1 0%; padding: 8px 3px;} :where(.ccx10) .ccx10-collector-carousel-indicators button>span{display: block; width: 100%; height: 2px; background: rgba(184, 171, 145, 0.25); transition: background .25s,transform .25s;} :where(.ccx10) .ccx10-collector-carousel-indicators button[aria-pressed=true]>span{background: var(--gold); transform: scaleY(2);} :where(.ccx10) .ccx10-collector-carousel-indicators button:hover>span{background: var(--paper);} :where(.ccx10) .ccx10-collector-carousel-arrows{display: flex; gap: 8px;} :where(.ccx10) .ccx10-collector-carousel-arrows button{display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(184, 171, 145, 0.44); border-radius: 50%; transition: background .25s,border-color .25s,color .25s; color: var(--gold); padding: 12px;} :where(.ccx10) .ccx10-collector-carousel-arrows svg{width: 27px; height: 20px; transition: transform .25s;} :where(.ccx10) .ccx10-collector-carousel-arrows button:hover{background: var(--gold); color: rgb(16, 18, 17); border-color: var(--gold);} :where(.ccx10) .ccx10-collector-carousel-arrows button:first-child:hover svg{transform: translateX(-2px);} :where(.ccx10) .ccx10-collector-carousel-arrows button:last-child:hover svg{transform: translateX(2px);} :where(.ccx10) #ccx10-collector-carousel .ccx10-visually-hidden{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px;} @keyframes collector-piece-in { 0% { opacity: 0; transform: translateX(var(--collector-enter,22px)); } 100% { opacity: 1; transform: translateX(0); } } @media (max-width:1180px){:where(.ccx10) #ccx10-collector-carousel.ccx10-collector-carousel{padding: 22px 22px 16px;} :where(.ccx10) .ccx10-collector-swipe-hint{display: none;} :where(.ccx10) .ccx10-collector-carousel-controls{gap: 13px;} :where(.ccx10) .ccx10-collector-carousel-arrows button{width: 46px; height: 46px;} :where(.ccx10) .ccx10-collector-carousel-indicators{gap: 2px;} :where(.ccx10) .ccx10-collector-carousel-indicators button{min-width: 15px; padding-inline: 2px;}} @media (max-width:900px) and (min-width:651px){:where(.ccx10) #ccx10-collector-carousel.ccx10-collector-carousel{padding-inline: 16px;} :where(.ccx10) .ccx10-collector-carousel-top{font-size: 7px; letter-spacing: 0.06em;} :where(.ccx10) .ccx10-collector-carousel-controls{gap: 8px; flex-wrap: wrap;} :where(.ccx10) .ccx10-collector-carousel-indicators{min-width: 100px;} :where(.ccx10) .ccx10-collector-carousel-arrows{gap: 5px;} :where(.ccx10) .ccx10-collector-carousel-arrows button{width: 44px; height: 44px;} :where(.ccx10) .ccx10-collector-carousel-count{font-size: 20px;} :where(.ccx10) .ccx10-collector-carousel-count>span:not(:first-child){font-size: 9px;} :where(.ccx10) .ccx10-collector-carousel-caption{padding-bottom: 20px;} :where(.ccx10) .ccx10-collector-piece-name{font-size: 28px;}} @media (max-width:650px){:where(.ccx10) #ccx10-collector-carousel.ccx10-collector-carousel{padding: 22px 20px 16px;} :where(.ccx10) .ccx10-collector-carousel-top{font-size: 7px; gap: 12px; letter-spacing: 0.1em;} :where(.ccx10) .ccx10-collector-carousel-viewport{aspect-ratio: 1.08 / 1;} :where(.ccx10) .ccx10-collector-piece-ghost{font-size: 27vw;} :where(.ccx10) .ccx10-collector-carousel-caption{padding-top: 9px; padding-bottom: 22px; min-height: 87px;} :where(.ccx10) .ccx10-collector-piece-name{font-size: clamp(28px, 8vw, 40px);} :where(.ccx10) .ccx10-collector-carousel-caption p{font-size: 8px; margin-top: 8px;} :where(.ccx10) .ccx10-collector-piece-zoom{width: 35px; height: 35px; bottom: 13px;} :where(.ccx10) .ccx10-collector-carousel-controls{padding-top: 15px; gap: 12px;} :where(.ccx10) .ccx10-collector-carousel-arrows{gap: 7px;} :where(.ccx10) .ccx10-collector-carousel-arrows button{width: 44px; height: 44px;} :where(.ccx10) .ccx10-collector-carousel-indicators{gap: 2px;} :where(.ccx10) .ccx10-collector-carousel-indicators button{min-width: 14px; padding-inline: 2px;} :where(.ccx10) .ccx10-collector-carousel-count{font-size: 23px;}} @media (max-width:380px){:where(.ccx10) .ccx10-collector-carousel-controls{flex-wrap: wrap; gap: 4px 12px;} :where(.ccx10) .ccx10-collector-carousel-indicators{order: 3; flex-basis: 100%; justify-content: space-between;} :where(.ccx10) .ccx10-collector-carousel-indicators button{max-width: none;} :where(.ccx10) .ccx10-collector-carousel-top{font-size: 6px;}} @media (prefers-reduced-motion:reduce){:where(.ccx10) .ccx10-collector-piece.ccx10-is-entering{animation: none;} :where(.ccx10) .ccx10-collector-piece-open img,:where(.ccx10) .ccx10-collector-carousel-arrows svg,:where(.ccx10) .ccx10-collector-carousel-indicators button>span{transition: none;}} @media (min-width:761px){:where(.ccx10) #ccx10-accessories{scroll-margin-top: -94px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-showcase{--accessory-tab-height: clamp(72px,8.6svh,94px); display: grid; grid-template-rows: minmax(0,1fr) var(--accessory-tab-height); height: calc(100svh - var(--ccx10-header-height, 0px) - 1px); min-height: 0px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-stage{height: 100%; min-height: 0px; max-height: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-top.ccx10-section-pad{top: clamp(20px, 3.4svh, 38px);} :where(.ccx10) #ccx10-accessories .ccx10-section-index{align-items: center;} :where(.ccx10) #ccx10-accessories .ccx10-section-index>span{font-size: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{top: clamp(58px, 9svh, 106px); font-size: min(8.7vw, 13.5svh, 154px); line-height: 0.9; letter-spacing: -0.07em;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{top: clamp(64px, 10svh, 116px); right: var(--gutter); left: auto; max-width: 235px; font-size: clamp(10px, 1.1svh, 12px); line-height: 1.6; text-align: right;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{font-size: 9px; line-height: 1.6; margin-top: 12px; margin-left: auto; max-width: 220px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art{left: 30%; width: 76%; top: 7%; height: 94%; mask-image: radial-gradient(54% 53% at 50% 50%, rgb(0, 0, 0) 36%, transparent 95%); -webkit-mask-image: radial-gradient(54% 53% at 50% 50%, rgb(0, 0, 0) 36%, transparent 95%);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art img{object-fit: contain; transform: rotate(-11deg) scale(1.12);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art[data-object="chain"] img{transform: rotate(12deg) scale(1.1);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art[data-object="visor"] img{transform: rotate(-10deg) scale(1.08);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art[data-object="mask"] img{transform: rotate(10deg) scale(1.04);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-art.ccx10-changing img{opacity: 0; transform: rotate(-5deg) scale(1);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-outline{top: 10%; font-size: min(31vw, 64svh);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{width: 33%; max-width: 380px; bottom: clamp(22px, 4svh, 44px);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-limited{font-size: 8px; line-height: 1.5;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption h3{font-size: clamp(24px, min(2.6vw, 4.2svh), 40px); margin-top: 14px; line-height: 1.04; max-width: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-price{font-size: 12px; margin-top: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 11px; line-height: 1.55; margin-top: 11px; max-width: 305px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-certificate{font-size: 7px; margin-top: 12px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{font-size: 9px; margin-top: 12px; min-height: 44px; min-width: 220px; padding-block: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls{right: var(--gutter); bottom: clamp(22px, 4svh, 44px); width: auto; flex-wrap: nowrap; gap: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-count{width: auto; margin: 0px 15px 0px 0px; font-size: 9px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-controls .ccx10-accessory-arrow{width: 46px; height: 46px; font-size: 23px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-side-label{top: 45%; font-size: 6px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tabs{height: 100%; min-height: 0px; padding-inline: var(--gutter);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab{display: flex; align-items: center; gap: 16px; min-height: 0px; padding: 12px 20px 12px 0px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 20px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab:last-child{padding-right: 0px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-index{font-size: 8px; margin: 0px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy{gap: 6px; max-width: none;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>span:first-child{font-size: 13px; min-height: 0px; line-height: 1.3;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 6px; line-height: 1.5;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-symbol{display: block; font-size: 19px;}} @media (min-width:761px) and (max-width:1100px){:where(.ccx10) #ccx10-accessories .ccx10-accessory-caption{width: 38%; max-width: 330px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{max-width: 185px; font-size: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{font-size: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{min-width: 200px; font-size: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab{gap: 10px; padding-right: 12px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab+.ccx10-accessory-tab{padding-left: 12px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>span:first-child{font-size: 11px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-copy>.ccx10-micro{font-size: 5px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-tab-symbol{font-size: 16px;}} @media (min-width:761px) and (max-height:640px){:where(.ccx10) #ccx10-accessories .ccx10-accessory-showcase{--accessory-tab-height: 66px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-top.ccx10-section-pad{top: 18px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-title{top: 54px; font-size: min(8.4vw, 12svh, 108px);} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro{top: 56px; font-size: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-intro>span{margin-top: 8px; font-size: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption,:where(.ccx10) #ccx10-accessories .ccx10-accessory-controls{bottom: 18px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption h3{font-size: 24px; margin-top: 10px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-price{font-size: 11px; margin-top: 7px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption>p{font-size: 10px; line-height: 1.5; margin-top: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-certificate{font-size: 6px; margin-top: 8px;} :where(.ccx10) #ccx10-accessories .ccx10-accessory-caption .ccx10-text-link{margin-top: 8px; font-size: 8px;}} @media (min-width:761px) and (max-height:450px){:where(.ccx10) #ccx10-accessories .ccx10-accessory-showcase{min-height: 520px;}} .ccx10{width:100%;max-width:none;margin:0;padding:0;background:#0b0c0c;color:#eeeae1;font:400 14px/1.5 CCXFrequencyRoboto,Arial,sans-serif;letter-spacing:normal;text-align:left;--ccx10-header-height:0px} .ccx10 a{color:inherit}.ccx10 button{letter-spacing:normal;text-transform:none;box-shadow:none}.ccx10 h1,.ccx10 h2,.ccx10 h3{color:inherit;text-transform:none}.ccx10 button[disabled]{cursor:default;opacity:.45}.ccx10 [hidden]{display:none!important} .ccx10 .ccx10-button{letter-spacing:.09em;text-transform:uppercase}.ccx10 .ccx10-text-link{letter-spacing:.08em;text-transform:uppercase}.ccx10 .ccx10-micro{letter-spacing:.12em} .ccx10 .ccx10-cart-form{margin:22px 0 12px}.ccx10 .ccx10-cart-form .ccx10-button{width:100%;border:0}.ccx10 .ccx10-product-info>.ccx10-text-link{font-size:9px;color:var(--gold)} .ccx10 .ccx10-dialog-close{position:absolute;float:none;top:12px;right:12px;margin:0;z-index:5}.ccx10 .ccx10-detail-photo:focus-visible{outline-offset:-5px}.ccx10 .ccx10-accessory-tab:focus-visible{outline-offset:-5px} .ccx10 .ccx10-gallery-controls button{color:var(--paper)}.ccx10 .ccx10-gallery-controls button[aria-pressed=true]{color:var(--bg)} .ccx10 .ccx10-hero{max-height:1050px}.ccx10 .ccx10-hero h1{font-weight:300}.ccx10 .ccx10-hero h1 span{color:var(--gold)} .ccx10 section[id]{scroll-margin-top:var(--ccx10-header-height,0px)} .ccx10 [data-ccx10-link][aria-disabled=true]{pointer-events:none;opacity:.5} body.ccx10-modal-open{overflow:hidden} body:has(#xo-main-content .ccx10) .section-footer{position:static!important;bottom:auto!important} @media(min-width:761px){.ccx10 #ccx10-accessories{scroll-margin-top:var(--ccx10-header-height,0px)}} @media(prefers-reduced-motion:reduce){.ccx10 *,.ccx10 *:before,.ccx10 *:after{animation:none!important;transition:none!important}} #ccx10-top { min-height: 100vh !important; min-height: 100dvh !important; height: auto !important; max-height: none !important; } .ccx10-accessory-top .ccx10-section-index > span:first-child { font-size: 10px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.16em !important; color: var(--gold) !important; } /* Bouton vert pour chaque accessoire */ #ccx10-accessory-explore { background: #007b45 !important; color: #fff !important; border: 0 !important; padding: 16px 22px !important; min-height: 54px !important; } #ccx10-accessory-explore:hover { background: #006338 !important; } /* UNVEIL YOUR FREQUENCY — desktop compact */ @media (min-width: 990px) { #ccx10-unveil { padding-block: 24px !important; } #ccx10-unveil .ccx10-section-heading { margin-bottom: 18px !important; gap: 28px; } #ccx10-unveil .ccx10-section-heading .ccx10-eyebrow { margin-bottom: 12px !important; } #ccx10-unveil h2 { font-size: clamp(34px, 6vh, 56px) !important; line-height: 1 !important; } #ccx10-unveil .ccx10-section-intro { font-size: 12px; line-height: 1.5; margin: 0; } #ccx10-unveil .ccx10-journey-tabs { margin-bottom: 16px !important; } #ccx10-unveil .ccx10-journey-tab { padding: 10px 14px !important; gap: 6px !important; } #ccx10-unveil .ccx10-journey-tab > span { font-size: 20px !important; } #ccx10-unveil .ccx10-journey-panel { min-height: 0 !important; gap: 4vw !important; } #ccx10-unveil .ccx10-journey-art { min-height: 0 !important; height: clamp(320px, 55vh, 560px); padding: 14px !important; box-sizing: border-box; } #ccx10-unveil .ccx10-detail-photo img { height: clamp(175px, 32vh, 340px) !important; max-height: 100%; object-fit: contain !important; } #ccx10-unveil .ccx10-journey-copy { padding: 0 !important; } #ccx10-unveil .ccx10-journey-copy .ccx10-eyebrow { margin-bottom: 10px !important; } #ccx10-unveil .ccx10-journey-copy h3 { font-size: clamp(28px, 4.3vh, 44px) !important; margin-bottom: 12px !important; } #ccx10-unveil .ccx10-journey-copy .ccx10-text-link, #ccx10-unveil .ccx10-photo-note { margin-top: 10px !important; } #ccx10-unveil .ccx10-journey-controls { margin-top: 14px !important; padding-top: 12px !important; } #ccx10-unveil .ccx10-journey-controls button { padding: 9px 16px !important; } } #ccx10-top .ccx10-limited-link, #ccx10-top .ccx10-limited-link span { color: #b8ab91 !important; } #ccx10-top .ccx10-mini-edition { border-color: #b8ab91 !important; } /* COLLECTOR BOX — section compacte sur ordinateur */ @media (min-width: 990px) { #ccx10-collector-unveil { padding-block: 24px !important; } #ccx10-collector-unveil .ccx10-section-heading { margin-bottom: 18px !important; gap: 28px; } #ccx10-collector-unveil .ccx10-section-heading .ccx10-eyebrow { margin-bottom: 12px !important; } #ccx10-collector-unveil h2 { font-size: clamp(34px, 6vh, 56px) !important; line-height: 1 !important; } #ccx10-collector-unveil .ccx10-section-intro { font-size: 12px; line-height: 1.5; margin: 0; } #ccx10-collector-unveil .ccx10-journey-tabs { margin-bottom: 16px !important; } #ccx10-collector-unveil .ccx10-journey-tab { padding: 10px 14px !important; gap: 6px !important; } #ccx10-collector-unveil .ccx10-journey-tab > span { font-size: 20px !important; } #ccx10-collector-unveil .ccx10-journey-panel { min-height: 0 !important; gap: 4vw !important; } #ccx10-collector-unveil .ccx10-journey-art { min-height: 0 !important; height: clamp(250px, 43vh, 440px); padding: 14px !important; box-sizing: border-box; } #ccx10-collector-unveil .ccx10-detail-photo img { height: clamp(175px, 32vh, 340px) !important; max-height: 100%; object-fit: contain !important; } #ccx10-collector-unveil .ccx10-rotate-photo { width: min(100%, 32vh); } #ccx10-collector-unveil .ccx10-journey-copy { padding: 0 !important; } #ccx10-collector-unveil .ccx10-journey-copy .ccx10-eyebrow { margin-bottom: 10px !important; } #ccx10-collector-unveil .ccx10-journey-copy h3 { font-size: clamp(28px, 4.3vh, 44px) !important; margin-bottom: 12px !important; } #ccx10-collector-unveil .ccx10-journey-copy .ccx10-text-link, #ccx10-collector-unveil .ccx10-photo-note { margin-top: 10px !important; } #ccx10-collector-unveil .ccx10-journey-copy .ccx10-button, #ccx10-collector-unveil .ccx10-sealed-label, #ccx10-collector-unveil .ccx10-journey-copy blockquote { margin-top: 12px !important; } #ccx10-collector-unveil .ccx10-journey-controls { margin-top: 14px !important; padding-top: 12px !important; } #ccx10-collector-unveil .ccx10-journey-controls button { padding: 9px 16px !important; } /* Carrousel du quatrième onglet */ #ccx10-collector-unveil #ccx10-collector-carousel { height: auto; min-height: 0 !important; padding: 14px !important; } #ccx10-collector-unveil .ccx10-collector-carousel-viewport { aspect-ratio: auto; height: clamp(140px, 25vh, 260px); } #ccx10-collector-unveil .ccx10-collector-carousel-caption { padding-block: 8px; min-height: 0; } #ccx10-collector-unveil .ccx10-collector-carousel-controls { padding-top: 8px; } } /* YOUR COLLECTION — photo carrée à gauche */ #ccx10-collector-unveil #ccx10-box-panel-4:not([hidden]) { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 16px 4vw !important; align-items: start; } #ccx10-collector-unveil #ccx10-collector-carousel { display: contents !important; } #ccx10-collector-unveil #ccx10-collector-carousel-viewport { grid-column: 1; grid-row: 1 / 4; align-self: start; width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; margin: 0; background: #191b1a; overflow: hidden; } /* Petites mentions en haut du carré */ #ccx10-box-panel-4 .ccx10-collector-carousel-top { position: absolute; top: 16px; left: 16px; width: calc((100% - 4vw) * 1.1 / 2.1 - 32px); z-index: 2; pointer-events: none; } /* Photo entière, sans effet de fondu sur ses bords */ #ccx10-collector-unveil #ccx10-box-panel-4 .ccx10-collector-piece-open img { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: normal; mask-image: none; -webkit-mask-image: none; } /* Informations à droite */ #ccx10-box-panel-4 > .ccx10-journey-copy { grid-column: 2; grid-row: 1; } #ccx10-box-panel-4 .ccx10-collector-carousel-caption { grid-column: 2; grid-row: 2; min-height: 0 !important; padding: 14px 0 !important; border-top: 1px solid var(--line); } #ccx10-box-panel-4 .ccx10-collector-carousel-controls { grid-column: 2; grid-row: 3; padding-top: 10px !important; } #ccx10-box-panel-4 .ccx10-collector-piece-zoom { right: 16px; bottom: 16px; } /* Mobile : carré au-dessus, informations en dessous */ @media (max-width: 650px) { #ccx10-collector-unveil #ccx10-box-panel-4:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 20px !important; } #ccx10-collector-unveil #ccx10-collector-carousel-viewport { grid-column: 1; grid-row: 1; } #ccx10-box-panel-4 .ccx10-collector-carousel-top { width: calc(100% - 32px); } #ccx10-box-panel-4 > .ccx10-journey-copy { grid-column: 1; grid-row: 4; } #ccx10-box-panel-4 .ccx10-collector-carousel-caption { grid-column: 1; grid-row: 2; } #ccx10-box-panel-4 .ccx10-collector-carousel-controls { grid-column: 1; grid-row: 3; } } @media (min-width: 990px) { #ccx10-collector-unveil #ccx10-box-panel-4:not([hidden]) { grid-template-columns: min(46%, 48vh) minmax(0, 1fr); gap: 10px 4vw !important; } #ccx10-box-panel-4 .ccx10-collector-carousel-top { width: calc(min(46%, 48vh) - 32px); } /* Masquer les descriptions */ #ccx10-box-panel-4 > .ccx10-journey-copy > p:not(.ccx10-eyebrow):not(.ccx10-photo-note), #ccx10-box-panel-4 #ccx10-collector-piece-note { display: none; } #ccx10-collector-unveil #ccx10-box-panel-4 .ccx10-journey-copy h3 { font-size: clamp(26px, 3.5vh, 36px) !important; margin-bottom: 10px !important; } #ccx10-box-panel-4 .ccx10-collector-certificates { margin-top: 10px; padding-top: 10px; } } /* Collector Box — photos carrées, onglets 01 à 03 */ #ccx10-collector-unveil :is(#ccx10-box-panel-1, #ccx10-box-panel-2, #ccx10-box-panel-3) .ccx10-journey-art { width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; padding: 0 !important; justify-self: start; align-self: start; } #ccx10-collector-unveil :is(#ccx10-box-panel-1, #ccx10-box-panel-2, #ccx10-box-panel-3) .ccx10-detail-photo { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; } #ccx10-collector-unveil :is(#ccx10-box-panel-1, #ccx10-box-panel-2, #ccx10-box-panel-3) .ccx10-detail-photo img { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; object-position: center; } @media (min-width: 990px) { #ccx10-collector-unveil :is(#ccx10-box-panel-1, #ccx10-box-panel-2, #ccx10-box-panel-3) { grid-template-columns: min(48%, 56vh) minmax(0, 1fr); gap: 4vw !important; align-items: center; } } /* UNVEIL YOUR FREQUENCY — photos carrées qui remplissent l'espace */ #ccx10-unveil .ccx10-journey-art { width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; padding: 0 !important; overflow: hidden; align-self: start; } #ccx10-unveil .ccx10-journey-art .ccx10-detail-photo { width: 100% !important; height: 100% !important; } #ccx10-unveil .ccx10-journey-art .ccx10-detail-photo img { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; /* mettre "contain" pour ne rien rogner */ object-position: center; } /* Onglets avec deux photos côte à côte : deux carrés */ #ccx10-unveil .ccx10-photo-pair { height: 100%; align-items: stretch; } #ccx10-unveil .ccx10-photo-pair .ccx10-detail-photo { aspect-ratio: 1 / 1; height: auto !important; } /* Onglet avec le bouton (chiffon) : la photo prend la place restante */ #ccx10-unveil .ccx10-cloth-art .ccx10-detail-photo { flex: 1 1 auto; min-height: 0; } /* Ordinateur : le carré se cale sur la hauteur de l'écran */ @media (min-width: 990px) { #ccx10-unveil .ccx10-journey-panel { grid-template-columns: min(50%, 62vh) minmax(0, 1fr); gap: 4vw !important; align-items: center; } } /* Onglet 02 — une seule photo carrée */ #ccx10-fan-panel-2 .ccx10-photo-pair figure:nth-child(2), #ccx10-fan-panel-2 figcaption { display: none !important; } #ccx10-fan-panel-2 .ccx10-journey-art { padding: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; } #ccx10-fan-panel-2 .ccx10-photo-pair { display: block; width: 100%; height: 100%; } #ccx10-fan-panel-2 figure, #ccx10-fan-panel-2 .ccx10-detail-photo { width: 100%; height: 100%; margin: 0; } #ccx10-fan-panel-2 .ccx10-detail-photo img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* THE SIGNATURE — deux carrés et texte centré */ #ccx10-unveil #ccx10-fan-panel-6 { height: auto !important; min-height: 0 !important; align-items: center !important; } #ccx10-fan-panel-6 .ccx10-journey-art { width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; background: transparent !important; align-self: center !important; } #ccx10-fan-panel-6 .ccx10-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; height: auto !important; align-items: start; } #ccx10-fan-panel-6 figure { min-width: 0; height: auto !important; margin: 0; } #ccx10-fan-panel-6 .ccx10-detail-photo { position: relative; width: 100%; height: auto !important; aspect-ratio: 1 / 1; } #ccx10-fan-panel-6 .ccx10-detail-photo img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; } #ccx10-fan-panel-6 .ccx10-journey-copy { align-self: center !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 990px) { #ccx10-unveil #ccx10-fan-panel-6 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px !important; } #ccx10-fan-panel-6 .ccx10-journey-art { max-width: min(100%, 76vh); justify-self: start; } } @media (min-width: 990px) { /* Même hauteur pour les points 05 et 06 */ #ccx10-unveil #ccx10-fan-panel-5, #ccx10-unveil #ccx10-fan-panel-6 { @media (min-width: 990px) { #ccx10-unveil #ccx10-fan-panel-5, #ccx10-unveil #ccx10-fan-panel-6 { height: auto !important; min-height: 0 !important; align-items: center !important; } /* Même hauteur que le réglage compact initial */ #ccx10-unveil #ccx10-fan-panel-5 .ccx10-journey-art, #ccx10-unveil #ccx10-fan-panel-6 .ccx10-journey-art { height: clamp(250px, 43vh, 440px) !important; min-height: 0 !important; aspect-ratio: auto !important; align-self: center !important; } #ccx10-fan-panel-5 .ccx10-detail-photo { height: 100% !important; } #ccx10-fan-panel-5 .ccx10-detail-photo img { height: 100% !important; object-fit: contain !important; } /* Deux photos carrées, centrées dans cette hauteur */ #ccx10-fan-panel-6 .ccx10-photo-pair { height: 100% !important; align-items: center !important; } #ccx10-fan-panel-5 .ccx10-journey-copy, #ccx10-fan-panel-6 .ccx10-journey-copy { align-self: center !important; } /* Engineered in Switzerland — blanc partout */ .iw-header-swiss-label, .iw-header-swiss-label span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Boutons RIDE FRAME / VIBE FRAME plus longs */ @media (min-width: 761px) { #ccx10-collection.ccx10-compact-collection .ccx10-eyewear-tabs { width: 620px !important; max-width: calc(100% - var(--gutter) - var(--gutter)); grid-template-columns: 1fr 1fr !important; gap: 16px !important; } #ccx10-collection.ccx10-compact-collection .ccx10-eyewear-tabs [role="tab"] { width: 100% !important; min-width: 0 !important; padding-inline: 28px !important; white-space: nowrap; box-sizing: border-box; } }