/* ==========================================================
   v8 B, "Pop couture": frank colours taken from the acetates of the frames, colour blocks that change
   with the frame in the spotlight, a bolder typeface (Syne) with Bodoni italics, playful details.
   Joyful like the glasses, still high end: soft grounds, one strong colour at a time.
   ========================================================== */
@property --p1 { syntax: '<color>'; inherits: true; initial-value: #8B5FA8; }
@property --p2 { syntax: '<color>'; inherits: true; initial-value: #3B2A4A; }
@property --p3 { syntax: '<color>'; inherits: true; initial-value: #EFE3F2; }
@property --p4 { syntax: '<color>'; inherits: true; initial-value: #C9A23A; }
:root {
  transition: --p1 1s ease, --p2 1s ease, --p3 1s ease, --p4 1s ease;
  --paper: #FFFCF8; --cream: #FBF6EF; --blush: #F7F1EA; --panel: #F5EFE8; --beige: #EEE6DC;
  --case: #F6F0E9; --case-2: #EEE6DC; --ink: #171414; --text-2: #3F3836; --muted: #7C716C; --muted-2: #7C716C;
  --coral: var(--p1); --coral-d: var(--p2); --coral-l: var(--p3); --rose: var(--p1); --rose-d: var(--p2); --rose-dd: var(--p2); --rose-l: var(--p3);
  --gold: var(--p2); --gold-d: var(--p2); --gold-l: var(--p3);
  --v8-bg: #FFFCF8; --v8-bg2: color-mix(in srgb, var(--p3) 70%, #FFFCF8); --v8-tile: #F6F0E9; --v8-ink: #171414; --v8-text: #3F3836; --v8-muted: #7C716C;
  --v8-line: rgba(23,20,20,.16); --v8-accent: var(--p1); --v8-btn: #171414; --v8-btn-ink: #FFFFFF;
  --v8-title: 'Syne', 'Jost', sans-serif; --v8-title-w: 700;
  --v8-map-land: color-mix(in srgb, var(--p3) 60%, #FFFFFF); --v8-map-line: var(--p2); --v8-label-bg: #FFFFFF;
  --v8-r: 26px; --v8-r-s: 999px;
}
body { background: var(--paper); }
::selection { background: var(--p1); color: #fff; }
.announce { background: var(--p2) !important; color: #fff !important; }
.announce-track span::after { background: var(--p4) !important; }
.site-header { background: rgba(255,252,248,.94) !important; }
.btn-primary { background: #171414 !important; border-color: #171414 !important; color: #fff !important; box-shadow: none !important; border-radius: 999px !important; }
.btn-primary:hover { background: var(--p1) !important; border-color: var(--p1) !important; }
.pill-try { background: var(--p3) !important; color: var(--p2) !important; }
.site-footer { background: var(--p2) !important; color: #fff !important; }
.site-footer .inline-form input { border-color: rgba(255,255,255,.35) !important; color: #fff !important; background: transparent !important; }
.site-footer .inline-form .btn { background: #fff !important; border-color: #fff !important; color: var(--p2) !important; }
.finder { background: color-mix(in srgb, var(--p3) 55%, #FFFCF8) !important; border-bottom: 0 !important; }
.chip { border-radius: 999px !important; }
.display, .display-md, .display-sm, .h3, .card-name { font-family: var(--v8-title) !important; font-weight: 700 !important; letter-spacing: -.02em; }
.v7-h2, .v7-h3 { font-family: var(--v8-title) !important; font-weight: 700 !important; letter-spacing: -.025em; }
.v7-piece-img, .v7-col-img { background: color-mix(in srgb, var(--p3) 55%, #FFFFFF) !important; border-radius: 22px; }
.v7tp-stage { background: radial-gradient(60% 60% at 50% 40%, #FFFFFF, color-mix(in srgb, var(--p3) 80%, #fff)) !important; border-radius: 26px; }
.v7-eyebrow { color: var(--p2) !important; }

.v8-h2 { font-size: clamp(40px, 5vw, 82px); letter-spacing: -.04em; line-height: .95; }
.v8-h2 em, .v8-title .it, .v8-big span { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.v8-eyebrow { color: var(--p2); }
.v8-btn:hover { background: var(--p1); border-color: var(--p1); }

/* hero: the opening video full width, a bold uppercase title on a white veil, colour from the frame on screen */
.v8-hero-pop .v8-media { --v8-hero-bg: #F4F1EC; }
.v8-hero-pop .v8-veil { background: linear-gradient(90deg, rgba(255,252,248,.95) 0%, rgba(255,252,248,.8) 28%, rgba(255,252,248,.15) 52%, rgba(255,252,248,0) 62%); }
.v8-hero-pop .v8-veil::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(90deg, var(--p1) 0 40%, var(--p4) 40% 58%, var(--p2) 58% 86%, var(--p3) 86%); transition: background 1s; }
.v8-hero-pop .v8-title { font-size: clamp(64px, 8vw, 146px); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.v8-hero-pop .v8-title .it { text-transform: none; font-size: .3em; letter-spacing: 0; margin-top: .3em; color: var(--p2); }
.v8-dot { font-style: normal; color: var(--p1); transition: color 1s; }
.v8-badge { position: absolute; right: var(--pad); top: 34px; width: clamp(90px, 9vw, 130px); animation: v8Spin 22s linear infinite; z-index: 2; }
.v8-badge text { font: 700 10.4px/1 'Syne', sans-serif; letter-spacing: .2em; fill: var(--ink); }
@keyframes v8Spin { to { transform: rotate(360deg); } }
.v8-hero-pop .v8-hero-cap { background: var(--p1); color: #fff; transition: background 1s; }
.v8-hero-pop .v8-hero-cap span { color: rgba(255,255,255,.85); }
.v8-hero-pop .v8-hero-cap b { font-family: 'Syne', sans-serif; font-weight: 700; }
/* sections */
.v8-marquee { background: var(--p1); color: #fff; border: 0; transform: rotate(-1.2deg); margin: 10px -2%; width: 104%; }
.v8-mq span span { font-family: 'Syne', sans-serif; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.v8-mq i { color: var(--p4); }
.v8-zoom { background: color-mix(in srgb, var(--c3, var(--p3)) 85%, #FFFFFF); }
.v8-piece:hover .v8-zoom { background: var(--c3); }
.v8-piece-body h3 { font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.v8-hscroll { background: var(--paper); }
.v8-panel.col { background: var(--c3, var(--p3)); }
.v8-panel.col::before { content: ''; position: absolute; right: -14%; top: -12%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--c1); opacity: .9; transition: transform 1s var(--v8-ease); }
.v8-panel.col:hover::before { transform: scale(1.12); }
.v8-panel-img { z-index: 1; }
.v8-panel-n { color: var(--c2, var(--ink)); font-family: 'Syne', sans-serif; font-weight: 700; z-index: 1; }
.v8-panel-t, .v8-panel-p, .v8-panel .v8-link { position: relative; z-index: 1; }
.v8-panel.end { background: var(--ink); color: #fff; border: 0; }
.v8-panel.end > span:not(.v8-link) { color: rgba(255,255,255,.75); } .v8-panel.end .v8-link { color: #fff; }
.v8-worn-slot { background: var(--p3); }
.v8-worn-slot::after { content: ''; position: absolute; right: -8%; bottom: -10%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--p1); opacity: .85; }
.v8-worn-in { z-index: 1; background: #fff; border-radius: 22px; }
.v8-try { background: var(--p2); color: #fff; }
.v8-try .v8-eyebrow, .v8-try .v8-h2 { color: #fff; } .v8-try .v8-p, .v8-try .v8-small { color: rgba(255,255,255,.78); }
.v8-try .v8-h2 em { color: var(--p4); }
.v8-try-chips button { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); border-radius: 18px; }
.v8-try-chips button.on { background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
.v8-try .v8-btn { background: #fff; color: var(--ink); border-color: #fff; }
.v8-qr-card { border-radius: 26px; }
.v8-big b { color: var(--p1); }
.v8-city i { background: var(--p1); }
.v8-city.paris > span { background: var(--p2); color: #fff; }
.v8-stockist { background: var(--p3); }
.v8-house-img { border-radius: 999px 999px 26px 26px; }
.v8-facts li { background: #fff; }
@media (max-width: 900px) {
  .v8-hero-pop .v8-veil { background: linear-gradient(0deg, rgba(255,252,248,1) 0%, rgba(255,252,248,.9) 22%, rgba(255,252,248,0) 46%); }
  .v8-hero-pop .v8-title { font-size: clamp(56px, 17vw, 88px); }
  .v8-badge { top: 14px; left: 14px; right: auto; width: 78px; }
  .v8-hero-pop .v8-veil::after { display: none; }
}
}