/* Flyback House: every page except the home page. Tokens and chrome come from site.css. */

/* ---- the gallery room: a neutral ivory the four brand rooms step out of ------------------------------- */
html[data-world="gallery"] { --fb-ground: #F3F1EA; --fb-ink: #171512; --fb-soft: #6A655C; --fb-accent: #85642B; --fb-line: rgb(23 21 18 / .15); }
html[data-tone="light"] { --fb-brand-gold: #85642B; --fb-gold: #B4862C; }
html[data-tone="light"] .bar { color: var(--fb-brand-gold); background: color-mix(in oklab, var(--fb-ground) 72%, transparent); }
html[data-tone="light"] .bar:is(.is-solid, .is-open, :hover, :focus-within) { background: color-mix(in oklab, var(--fb-ground) 92%, transparent); border-bottom-color: color-mix(in oklab, var(--fb-brand-gold) 34%, transparent); }
html[data-tone="light"] .bar :is(.logo__mark, .logo__word i, .cta) { color: var(--fb-brand-gold); }
html[data-tone="light"] .bar .cta { border-color: var(--fb-brand-gold); }
html[data-tone="light"] .bar .cta:is(:hover, :focus-visible) { background: var(--fb-brand-gold); color: var(--fb-ground); }
html[data-tone="light"] body {
  background:
    radial-gradient(70% 46vh at 14% 0%, color-mix(in oklab, #fff 62%, var(--fb-ground)) 0%, transparent 70%),
    var(--fb-ground);
  background-attachment: fixed;
}

.page { padding-top: var(--bar-h); min-height: 100vh; }
.eyebrow { margin: 0 0 18px; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fb-accent); }
.pg-head { padding-block: clamp(44px, 9vh, 110px) clamp(22px, 4vh, 44px); }
.pg-h { margin: 0 0 18px; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(3rem, 8vw, 7.4rem); line-height: .96; letter-spacing: -.02em; }
.foot--page { padding-bottom: 40px; margin-top: clamp(60px, 10vh, 120px); }
@media (max-width: 860px) { .foot--page { padding-bottom: 96px; } }

/* --------------------------------------------------------------- selection -- */
.cat { padding-bottom: 20px; }
.cat__tools { position: sticky; top: var(--bar-h); z-index: 20; display: grid; grid-template-columns: minmax(240px, 420px) 1fr; align-items: center; gap: 14px clamp(18px, 3vw, 44px);
  padding-block: 16px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: color-mix(in oklab, var(--fb-ground) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--fb-line); transition: background-color var(--slow) var(--ease); }
.cat__search { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--fb-ink); padding-block: 6px; }
.cat__search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.cat__search input { all: unset; flex: 1; min-width: 0; font-size: 1rem; letter-spacing: .01em; padding-block: 6px; }
.cat__search input::placeholder { color: var(--fb-soft); }
.cat__search:focus-within { border-bottom-color: var(--fb-accent); }
.cat__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cat__brands { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px clamp(14px, 2vw, 30px); }
.cat__brands button { all: unset; cursor: pointer; position: relative; padding-block: 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-soft); transition: color .3s var(--ease); }
.cat__brands button::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: var(--fb-accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cat__brands button:hover, .cat__brands button[aria-pressed="true"] { color: var(--fb-ink); }
.cat__brands button[aria-pressed="true"]::after { transform: scaleX(1); }
.cat__brands button:focus-visible, .cat__cols button:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 5px; }
.cat__cols { display: flex; gap: 8px; overflow-x: auto; padding-block: 18px 4px; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cat__cols::-webkit-scrollbar { display: none; }
.cat__cols.is-drag { cursor: grabbing; }
.cat__cols button { all: unset; cursor: pointer; flex: none; padding: 9px 16px; border: 1px solid var(--fb-line); font-size: .8rem; letter-spacing: .04em; color: var(--fb-soft); transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.cat__cols button i { font-style: normal; font-size: .7rem; margin-inline-start: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
.cat__cols button:hover { color: var(--fb-ink); border-color: var(--fb-ink); }
.cat__cols button[aria-pressed="true"] { background: var(--fb-ink); border-color: var(--fb-ink); color: var(--fb-ground); }
.cat__count { margin: 18px 0 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-soft); font-variant-numeric: tabular-nums; }
.cat__grid { margin: clamp(18px, 3vh, 30px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(26px, 4vh, 46px) clamp(14px, 2vw, 30px); }
.cat__grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat__more { display: flex; margin: clamp(40px, 7vh, 80px) auto 0; }
.cat__more[hidden] { display: none; }
.cat__empty { padding-block: clamp(50px, 12vh, 130px); display: grid; gap: 18px; justify-items: start; }
.cat__empty p { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; }

.wcard { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.wcard__pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, #fff 55%, var(--fb-ground)), color-mix(in oklab, var(--fb-ink) 5%, var(--fb-ground))); }
.wcard__pic img { width: 74%; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 14px color-mix(in oklab, var(--fb-ink) 20%, transparent)); transition: transform .9s var(--ease); }
.wcard:hover .wcard__pic img, .wcard:focus-visible .wcard__pic img { transform: scale(1.06); }
.wcard__360 { position: absolute; inset-inline-end: 10px; top: 10px; font-style: normal; font-size: .62rem; letter-spacing: .12em; padding: 4px 7px; border: 1px solid var(--fb-line); color: var(--fb-soft); background: color-mix(in oklab, var(--fb-ground) 70%, transparent); }
.wcard__brand { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-accent); }
.wcard__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: 1.32rem; line-height: 1.15; }
.wcard__desc { font-size: .82rem; color: var(--fb-soft); line-height: 1.45; }
.wcard__ref { margin-top: 4px; font-size: .72rem; letter-spacing: .08em; color: var(--fb-soft); font-variant-numeric: tabular-nums; }
.wcard:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 6px; }
.wcard:hover .wcard__name { color: var(--fb-accent); }
html[data-tone="light"] .wcard:hover .wcard__name { color: var(--fb-accent); }
@media (max-width: 860px) {
  .cat__tools { grid-template-columns: 1fr; }
  .cat__brands { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .cat__brands button { flex: none; }
  .cat__grid, .cat__grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .wcard__name { font-size: 1.12rem; }
}

/* ------------------------------------------------------------------- watch -- */
.w { padding-inline: var(--gutter); opacity: 0; transition: opacity .6s var(--ease); }
.w.is-ready { opacity: 1; }
.w__back { display: inline-flex; gap: 10px; margin-block: clamp(18px, 3vh, 30px); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); text-decoration: none; }
.w__back:hover { color: var(--fb-ink); }
.w__stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 90px); align-items: center; min-height: calc(100vh - var(--bar-h) - 90px); }
.w__view { position: relative; display: grid; place-items: center; }
.w__view saat-360 { width: min(100%, 78vh); margin-inline: auto; }
.w__view.is-tall saat-360 { --saat360-ratio: 5 / 7; width: min(100%, 56vh); }
.w__view.is-dark { background: #000; }
.w__view.is-dark saat-360 { width: min(100%, 74vh); }
.zoomer { width: min(100%, 56vh); aspect-ratio: 5 / 7; margin-inline: auto; overflow: hidden; cursor: zoom-in; }
.zoomer img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); filter: drop-shadow(0 26px 22px color-mix(in oklab, var(--fb-ink) 22%, transparent)); }
.zoomer.is-zoom img { transform: scale(2.4); transition-duration: .25s; filter: none; }
.w__info { display: grid; gap: 14px; justify-items: start; align-content: center; }
.w__brand { margin: 0; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fb-accent); }
.w__name { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 5.4rem); line-height: .98; letter-spacing: -.015em; }
.w__desc { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--fb-soft); max-width: 40ch; }
.w__facts { margin: 12px 0 0; width: 100%; max-width: 460px; border-top: 1px solid var(--fb-line); }
.w__facts div { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--fb-line); }
.w__facts dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fb-soft); }
.w__facts dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.w__intro { margin: 8px 0 0; max-width: 44ch; color: var(--fb-soft); font-size: .95rem; }
.w__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 8px; }
.w__price { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-accent); }
.w__hint { margin: 6px 0 0; font-size: .78rem; color: var(--fb-soft); }
.w__hint:empty { display: none; }
.w__sec { padding-block: clamp(50px, 9vh, 110px); border-top: 1px solid var(--fb-line); }
.w__sec[hidden] { display: none; }
.w__h { margin: 0 0 clamp(24px, 4vh, 44px); font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.05; }
.w__h3 { margin: clamp(34px, 6vh, 60px) 0 14px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--fb-soft); }
.w__views { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
.w__views button { all: unset; cursor: zoom-in; display: block; width: 100%; aspect-ratio: 1; background: linear-gradient(180deg, color-mix(in oklab, #fff 55%, var(--fb-ground)), color-mix(in oklab, var(--fb-ink) 5%, var(--fb-ground))); overflow: hidden; }
.w__views li[data-tall] button { aspect-ratio: 5 / 7; }
.w__views li.is-night button, html[data-world="rm"] .w__views button { background: #000; }
.w__views img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.w__views button:hover img, .w__views button:focus-visible img { transform: scale(1.07); }
.w__views button:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 4px; }
.w__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vh, 56px) clamp(30px, 6vw, 110px); margin-bottom: 26px; }
.w__specs h3 { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--fb-accent); font-family: var(--sc-font-display); font-weight: 400; font-size: 1.5rem; }
.w__specs dl { margin: 0; }
.w__specs dl div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 18px; padding-block: 12px; border-bottom: 1px solid var(--fb-line); }
.w__specs dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-soft); padding-top: 3px; }
.w__specs dd { margin: 0; font-size: .95rem; }
.w__missing { padding-block: 18vh; display: grid; gap: 24px; justify-items: start; }
.w__missing[hidden] { display: none; }

/* the four houses each arrange the stage their own way */
html[data-world="rolex"] .w__stage { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(10px, 2vh, 24px); }
html[data-world="rolex"] .w__view { width: 100%; padding-block: clamp(6px, 2vh, 20px);
  background: radial-gradient(50% 60% at 50% 46%, color-mix(in oklab, #fff 80%, var(--fb-ground)) 0%, transparent 72%); }
html[data-world="rolex"] .w__view saat-360 { width: min(100%, 68vh); }
html[data-world="rolex"] .w__info { justify-items: center; }
html[data-world="rolex"] .w__name { font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
html[data-world="rolex"] .w__desc { max-width: 52ch; }
html[data-world="rolex"] .w__facts { max-width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--fb-line); }
html[data-world="rolex"] .w__facts div { flex-direction: column; align-items: center; gap: 6px; border-bottom: 0; padding: 16px 10px; }
html[data-world="rolex"] .w__facts div + div { border-inline-start: 1px solid var(--fb-line); }
html[data-world="rolex"] .w__facts dd { text-align: center; }
html[data-world="rolex"] .w__act { justify-content: center; }
html[data-world="rolex"] .w__intro { max-width: 60ch; }
html[data-world="patek"] .w__name { font-style: italic; }
html[data-world="ap"] .w__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
html[data-world="ap"] .w__view { order: 2; }
html[data-world="ap"] .w__name { font-weight: 400; }
html[data-world="rm"] .w__name { font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2.3rem, 4.6vw, 4.6rem); }
html[data-world="rm"] .w__view { border-top: 1px solid var(--fb-accent); }
html[data-world="rm"] .w__view:not(.is-dark) { background: linear-gradient(180deg, color-mix(in oklab, var(--fb-ink) 6%, var(--fb-ground)), transparent); }
@media (max-width: 860px) {
  .w__stage, html[data-world="ap"] .w__stage { grid-template-columns: 1fr; min-height: 0; gap: 20px; }
  html[data-world="ap"] .w__view { order: 0; }
  .w__view saat-360, .w__view.is-tall saat-360, .zoomer { width: min(100%, 60vh); }
  .w__specs { grid-template-columns: 1fr; }
  html[data-world="rolex"] .w__facts { grid-template-columns: 1fr; }
  html[data-world="rolex"] .w__facts div + div { border-inline-start: 0; border-top: 1px solid var(--fb-line); }
}

/* large view of one still */
.lb { border: 0; padding: 0; margin: auto; width: min(94vw, 94vh); height: min(94vw, 94vh); max-width: none; max-height: none; background: var(--fb-ground); color: var(--fb-ink); }
.lb.is-night { background: #000; color: #F0EFEC; }
.lb::backdrop { background: rgb(10 9 8 / .72); }
.lb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb__close { all: unset; cursor: pointer; position: absolute; inset-inline-end: 14px; top: 12px; z-index: 2; padding: 8px 12px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.lb__close:focus-visible { outline: 1px solid currentColor; }

/* --------------------------------------------------- services, about, contact -- */
.page--services, .page--about, .page--contact { padding-top: 0; }
.hero { position: relative; min-height: min(86vh, 860px); display: grid; align-items: end; overflow: hidden; }
.hero--tall { min-height: 100vh; }
.hero__film { position: absolute; inset: 0; background: #050505; }
.hero__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__film video.is-live { opacity: 1; }
.hero__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 13 11 / .96) 0%, rgb(14 13 11 / .5) 44%, rgb(14 13 11 / .28) 100%); }
.hero__in { position: relative; z-index: 2; padding-block: calc(var(--bar-h) + 40px) clamp(40px, 9vh, 96px); }
.hero__h { margin: 0; max-width: 16ch; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(3rem, 8.4vw, 8rem); line-height: .96; letter-spacing: -.02em; text-wrap: balance; }
.hero__p { margin: clamp(18px, 3vh, 30px) 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.3vw, 1.22rem); color: color-mix(in oklab, var(--fb-ink) 82%, transparent); }
.svc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fb-line); }
.svc li { display: grid; grid-template-columns: clamp(50px, 8vw, 130px) minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; gap: clamp(14px, 3vw, 50px); padding-block: clamp(24px, 4.6vh, 50px); border-bottom: 1px solid var(--fb-line); transition: padding-inline .6s var(--ease); }
.svc li:hover { padding-inline: 14px 0; }
.svc__n { font-size: .78rem; letter-spacing: .16em; color: var(--fb-accent); font-variant-numeric: tabular-nums; }
.svc__h { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1; }
.svc p { margin: 0; color: var(--fb-soft); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 40ch; }
.facts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about__big { margin: 0 0 clamp(26px, 4vh, 44px); font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.2; max-width: 26ch; }
.houses { margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--fb-line); }
.houses a { display: block; padding-block: 14px; border-bottom: 1px solid var(--fb-line); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 300; color: inherit; text-decoration: none; transition: padding-inline .5s var(--ease), color .35s var(--ease); }
.houses a:hover, .houses a:focus-visible { padding-inline-start: 14px; outline: none; }
.chan { display: grid; border-top: 1px solid var(--fb-line); }
.chan__a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: clamp(20px, 3.6vh, 36px); border-bottom: 1px solid var(--fb-line); color: inherit; text-decoration: none; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1; transition: padding-inline .5s var(--ease), color .35s var(--ease); }
.chan__a i { font-style: normal; font-size: .5em; color: var(--fb-accent); transition: transform .5s var(--ease); }
.chan__a:hover, .chan__a:focus-visible { padding-inline-start: 14px; outline: none; }
.chan__a:hover i { transform: translateX(8px); }
[dir="rtl"] .chan__a i, [dir="rtl"] .w__back span { transform: scaleX(-1); }
.endcap { border-top: 1px solid var(--fb-line); padding-top: clamp(70px, 14vh, 170px); }
.endcap__h { margin: 0 0 18px; max-width: 18ch; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 1; text-wrap: balance; }
.endcap__act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: clamp(24px, 4vh, 40px); }
@media (max-width: 860px) {
  .svc li { grid-template-columns: 44px 1fr; }
  .svc p { grid-column: 2; }
  .facts--three { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wcard__pic img, .w__views img, .zoomer img, .svc li, .houses a, .chan__a, .w { transition: none; }
}

/* pass 2: after reading the screenshots */
/* brand names stay Latin: `all: unset` drops the locale the lang attribute sets, so Turkish uppercasing dotted the I */
:is(button, a, span, b, p, h1, h2, h3, i)[lang="en"] { -webkit-locale: "en"; }
.hero__in { width: 100%; box-sizing: border-box; }
html[data-world="rolex"] .w__stage { min-height: 0; padding-bottom: clamp(30px, 6vh, 70px); }
html[data-world="rolex"] .w__view saat-360 { width: min(100%, 52vh); }

/* pass 3: every card turns in its own small frame */
.wcard__pic > * { grid-area: 1 / 1; }
.wcard__pic img { transition: transform .9s var(--ease), opacity .5s var(--ease); }
.wcard__pic saat-360 { width: 100%; opacity: 0; transition: opacity .5s var(--ease); }
.wcard__pic.is-tall saat-360 { --saat360-ratio: 5 / 7; width: 78%; }
.wcard__pic.is-spin saat-360 { opacity: 1; }
.wcard__pic.is-spin img { opacity: 0; }
.wcard__pic.is-dark.is-spin { background: #000; }
.wcard { -webkit-user-drag: none; }
/* the turntable fills the whole frame, so the pause button always sits in the frame's corner */
.wcard__pic saat-360, .wcard__pic.is-tall saat-360 { --saat360-ratio: 4 / 5; width: 100%; }
.wcard__pic saat-360, .wcard__pic.is-tall saat-360 { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* ---- pillar pages: authenticity, expertise, privacy ---------------------------------------------------- */
.pg-head--pillar { padding-block: clamp(60px, 13vh, 150px) clamp(30px, 6vh, 70px); }
.pg-h--long { max-width: 14ch; font-size: clamp(2.8rem, 7vw, 6.6rem); line-height: 1; text-wrap: balance; }
.lede--big { max-width: 50ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.plain--first { border-top: 0; padding-top: 0; }
.houses--pillars a { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); }
.houses--pillars span { font-family: var(--sc-font-text); font-size: .72rem; letter-spacing: .2em; color: var(--fb-accent); font-variant-numeric: tabular-nums; }
.houses--pillars .is-here a { color: var(--fb-soft); pointer-events: none; }
:lang(zh) .pg-h--long, :lang(ar) .pg-h--long { line-height: 1.3; letter-spacing: 0; }

/* a resting card shows the first frame of its own turn at the same size the turn is drawn */
.wcard__pic.is-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }
.wcard:hover .wcard__pic.is-frame img { transform: none; }

/* ---- more houses: the brand row scrolls sideways, and a watch with several photographs gets a picture strip ---- */
.cat__tools { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); }
.cat__brands { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 6px clamp(16px, 2vw, 30px); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); padding-inline-end: 40px; }
.cat__brands::-webkit-scrollbar { display: none; }
.cat__brands button { flex: none; white-space: nowrap; }
.w__views li.is-on button { outline: 1px solid var(--fb-accent); outline-offset: 3px; }
.w__view.is-still .zoomer { background: linear-gradient(180deg, color-mix(in oklab, #fff 55%, var(--fb-ground)), color-mix(in oklab, var(--fb-ink) 4%, var(--fb-ground))); }

/* photographs that come with their own ground fill the frame instead of floating in it */
.wcard__pic.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }

/* ---- women / men: two doors and "all", above the search ------------------------------------------------- */
.cat__sex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(18px, 3vh, 30px); border-top: 1px solid var(--fb-line); }
.cat__sex button { all: unset; cursor: pointer; position: relative; box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: clamp(16px, 2.6vh, 26px) clamp(10px, 1.6vw, 24px) clamp(14px, 2.2vh, 22px) 0; margin-inline-end: clamp(10px, 1.6vw, 24px); color: var(--fb-soft); transition: color .35s var(--ease); }
.cat__sex button::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px; background: var(--fb-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cat__sex b { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1; }
.cat__sex i { font-style: normal; font-size: .72rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.cat__sex button:hover, .cat__sex button[aria-pressed="true"] { color: var(--fb-ink); }
.cat__sex button[aria-pressed="true"]::before { transform: scaleX(1); }
.cat__sex button:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 4px; }
[dir="rtl"] .cat__sex button::before { transform-origin: right; }
@media (max-width: 860px) { .cat__sex b { font-size: 1.35rem; } .cat__sex button { flex-direction: column; gap: 4px; } }

/* ---- hearts on the catalogue, the bag on the watch page ---------------------------------------------------- */
.cat__grid > li { position: relative; }
.wcard__360 { top: auto; bottom: 10px; }
.wfav, .w__fav, .ac-heart, .ac-icon { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; color: var(--fb-ink); }
.wfav { position: absolute; top: 8px; inset-inline-end: 8px; width: 36px; height: 36px; z-index: 2; opacity: .72; transition: opacity .3s var(--ease); }
.wfav:hover, .wfav:focus-visible, .wfav[aria-pressed="true"] { opacity: 1; }
:is(.wfav, .w__fav, .ac-heart, .ac-icon) svg { width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill .35s var(--ease), stroke .35s var(--ease); }
:is(.wfav, .w__fav, .ac-heart, .ac-icon)[aria-pressed="true"] svg { fill: var(--fb-accent); stroke: var(--fb-accent); }
:is(.wfav, .w__fav, .ac-heart, .ac-icon):focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 2px; }
.cta--line { background: transparent; border-color: var(--fb-line); }
.cta--line[aria-pressed="true"] { border-color: var(--fb-accent); color: var(--fb-accent); }
/* pressed and under the pointer: the fill is the accent, so the words turn to the ground colour (they vanished before) */
.cta--line[aria-pressed="true"]:is(:hover, :focus-visible) { color: var(--fb-ground); }
.w__fav { width: 46px; height: 46px; border: 1px solid var(--fb-line); }
.w__fav svg { width: 22px; height: 22px; }
.w__act .w__price { flex-basis: 100%; }
@media (max-width: 860px) { .w__act { gap: 14px 10px; } .w__act #w-buy, .w__act #w-cart { flex: 1 1 0; min-width: 0; padding: 0 12px; } .w__act .w__fav { flex: none; height: 46px; } }

/* ---- the account page ------------------------------------------------------------------------------------ */
.ac { padding-block: clamp(36px, 8vh, 96px) clamp(60px, 12vh, 140px); min-height: 70vh; }
.ac-boot .ac-h { opacity: .25; }
.ac-head { margin-bottom: clamp(26px, 5vh, 52px); }
.ac-h { margin: 0 0 14px; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.02em; }
.ac-lead { margin: 0; color: var(--fb-soft); font-size: .98rem; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ac-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fb-accent); }
.ac-tabs { position: relative; display: flex; gap: clamp(18px, 3vw, 40px); border-bottom: 1px solid var(--fb-line); margin-bottom: clamp(26px, 5vh, 48px); overflow-x: auto; scrollbar-width: none; }
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tabs button { all: unset; cursor: pointer; padding: 14px 0 16px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); white-space: nowrap; display: inline-flex; gap: 8px; align-items: baseline; transition: color .3s var(--ease); }
:lang(zh) .ac-tabs button, :lang(ar) .ac-tabs button { letter-spacing: .04em; font-size: .92rem; }
.ac-tabs button[aria-selected="true"], .ac-tabs button:hover { color: var(--fb-ink); }
.ac-tabs button:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 4px; }
.ac-tabs i { font-style: normal; font-size: .7rem; letter-spacing: 0; color: var(--fb-accent); font-variant-numeric: tabular-nums; }
.ac-ind { position: absolute; left: 0; bottom: 0; height: 1px; background: var(--fb-accent); transition: transform .55s cubic-bezier(.16, 1, .3, 1), width .55s cubic-bezier(.16, 1, .3, 1); }
.ac-rise { animation: ac-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ac-rise { from { opacity: 0; transform: translateY(14px); } }

.ac-h2 { margin: 0 0 18px; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; }
.ac-form { display: grid; gap: 16px; align-content: start; }
.ac-f { display: grid; gap: 7px; }
.ac-f > span:first-child { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fb-soft); }
.ac-f small { font-size: .78rem; color: var(--fb-soft); }
.ac-f input, .ac-inline input { all: unset; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--fb-line); font-size: 1rem; color: var(--fb-ink); transition: border-color .3s var(--ease); }
.ac-f input:focus, .ac-inline input:focus { border-bottom-color: var(--fb-accent); }
.ac-f input::placeholder, .ac-inline input::placeholder { color: color-mix(in oklab, var(--fb-soft) 70%, transparent); }
.ac-pw { display: flex; align-items: center; }
.ac-pw input { flex: 1; }
.ac-show { all: unset; cursor: pointer; padding: 6px 2px 6px 12px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); }
.ac-check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: .88rem; line-height: 1.5; color: var(--fb-soft); cursor: pointer; }
.ac-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--fb-accent); }
.ac-check a { color: inherit; }
.ac-form .cta { justify-self: start; margin-top: 6px; }
.ac-form.is-busy { opacity: .6; }
.ac-err { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in oklab, #9b2c1f 40%, transparent); color: #8a2a1d; font-size: .88rem; }
.ac-ok { margin: 0; color: var(--fb-accent); font-size: .92rem; }
.ac-small { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--fb-soft); }
.ac-link { all: unset; cursor: pointer; justify-self: start; font-size: .8rem; color: var(--fb-soft); border-bottom: 1px solid var(--fb-line); padding-bottom: 2px; }
.ac-inline { display: flex; gap: 12px; align-items: end; }
.ac-inline .cta { flex: none; }
.ac-fg { display: grid; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--fb-line); }
.ac-fg p { margin: 0; font-size: .86rem; color: var(--fb-soft); line-height: 1.55; }
.ac-narrow { max-width: 440px; }

.ac-sign { display: grid; grid-template-columns: 1fr 1fr minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.ac-perks ul { margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--fb-line); }
.ac-perks li { display: grid; grid-template-columns: 34px 1fr; padding: 15px 0; border-bottom: 1px solid var(--fb-line); font-size: .92rem; line-height: 1.45; }
.ac-perks li i { font-style: normal; font-size: .72rem; color: var(--fb-accent); font-variant-numeric: tabular-nums; padding-top: 3px; }
.ac-tg { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 18px; border: 1px solid var(--fb-accent); color: inherit; text-decoration: none; transition: background-color .4s var(--ease); }
.ac-tg:hover { background: color-mix(in oklab, var(--fb-accent) 8%, transparent); }
.ac-tg svg { width: 24px; height: 24px; fill: none; stroke: var(--fb-accent); stroke-width: 1.2; stroke-linejoin: round; }
.ac-tg b { display: block; font-weight: 500; font-size: .92rem; }
.ac-tg small { display: block; margin-top: 4px; font-size: .8rem; color: var(--fb-soft); line-height: 1.45; }

.ac-empty { display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 10vh, 110px) 0; text-align: center; }
.ac-empty svg { width: 64px; height: 64px; fill: none; stroke: var(--fb-accent); stroke-width: 1; }
.ac-empty p { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.3rem); }

.ac-cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(30px, 5vw, 80px); align-items: start; }
.ac-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fb-line); }
.ac-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: clamp(14px, 2.4vw, 28px); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--fb-line); }
.ac-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, #fff 55%, var(--fb-ground)), color-mix(in oklab, var(--fb-ink) 5%, var(--fb-ground))); }
.ac-pic img { width: 78%; height: 86%; object-fit: contain; filter: drop-shadow(0 10px 10px color-mix(in oklab, var(--fb-ink) 18%, transparent)); transition: transform .9s var(--ease); }
.ac-pic.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.ac-txt { display: grid; gap: 3px; min-width: 0; }
.ac-txt small { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-accent); }
.ac-txt a { color: inherit; text-decoration: none; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; }
.ac-txt span { font-size: .84rem; color: var(--fb-soft); }
.ac-stock { justify-self: start; margin-top: 6px; font-style: normal; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); padding: 4px 8px; border: 1px solid var(--fb-line); }
.ac-stock.is-in { color: var(--fb-accent); border-color: color-mix(in oklab, var(--fb-accent) 50%, transparent); }
.ac-act { display: grid; justify-items: end; gap: 8px; }
.ac-icon { width: 40px; height: 40px; }
.ac-x { all: unset; cursor: pointer; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.ac-x:hover, .ac-x:focus-visible { color: var(--fb-ink); border-bottom-color: var(--fb-line); }
.ac-sum { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--fb-line); }
.ac-sum .eyebrow { margin: 0; }
.ac-count { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: 2.2rem; line-height: 1; }
.ac-note { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: .86rem; line-height: 1.5; color: var(--fb-soft); }
.ac-note svg { width: 18px; height: 18px; fill: none; stroke: var(--fb-accent); stroke-width: 1.2; margin-top: 1px; }
.cta.ac-buy { width: 100%; gap: 12px; background: var(--fb-ink); color: var(--fb-ground); border-color: var(--fb-ink); min-height: 54px; white-space: normal; text-align: center; }
.cta.ac-buy:hover, .cta.ac-buy:focus-visible { background: var(--fb-accent); border-color: var(--fb-accent); }
.ac-buy svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .5s var(--ease); }
.ac-buy:hover svg { transform: translateX(4px); }
[dir="rtl"] .ac-buy svg { transform: scaleX(-1); }
.ac-done { display: grid; justify-items: start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--fb-line); }
.ac-done svg { width: 40px; height: 40px; fill: none; stroke: var(--fb-accent); stroke-width: 1.2; }
.ac-done circle { stroke-dasharray: 126; stroke-dashoffset: 126; animation: ac-draw .8s cubic-bezier(.16, 1, .3, 1) forwards; }
.ac-done path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ac-draw .5s .45s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes ac-draw { to { stroke-dashoffset: 0; } }
.ac-done p { margin: 0; font-size: .86rem; color: var(--fb-soft); line-height: 1.5; }

.ac-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(28px, 4vh, 44px) clamp(14px, 2vw, 28px); }
.ac-grid li { position: relative; display: grid; gap: 12px; align-content: start; }
.ac-card { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.ac-card .ac-pic { margin-bottom: 12px; }
.ac-card:hover .ac-pic img { transform: scale(1.05); }
.ac-card small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-accent); }
.ac-card b { font-weight: 400; font-family: var(--sc-font-display); font-size: 1.3rem; line-height: 1.1; }
.ac-card span { font-size: .82rem; color: var(--fb-soft); }
.ac-heart { position: absolute; top: 8px; inset-inline-end: 8px; width: 38px; height: 38px; }
.ac-add { all: unset; box-sizing: border-box; cursor: pointer; justify-self: start; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--fb-accent); }
.ac-add[aria-pressed="true"] { color: var(--fb-accent); }

.ac-orders { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.ac-order { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--fb-line); }
.ac-ohead { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.ac-ohead span { display: grid; }
.ac-ohead small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-soft); }
.ac-ohead b { font-weight: 400; font-family: var(--sc-font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ac-ohead time { color: var(--fb-soft); font-size: .86rem; }
.ac-st { margin-inline-start: auto; font-style: normal; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--fb-line); color: var(--fb-soft); }
.ac-st.is-paid, .ac-st.is-delivered { color: var(--fb-accent); border-color: var(--fb-accent); }
.ac-st.is-awaiting { color: var(--fb-ink); border-color: var(--fb-ink); }
.ac-track { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.ac-track li { display: grid; gap: 8px; font-size: .72rem; color: var(--fb-soft); }
.ac-track i { height: 1px; background: var(--fb-line); position: relative; }
.ac-track i::after { content: ""; position: absolute; inset-inline-start: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--fb-ground); border: 1px solid var(--fb-line); box-sizing: border-box; }
.ac-track li.is-done { color: var(--fb-ink); }
.ac-track li.is-done i { background: var(--fb-accent); }
.ac-track li.is-done i::after { background: var(--fb-accent); border-color: var(--fb-accent); }
.ac-oitems { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.ac-oitems a { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; font-size: .9rem; }
.ac-oitems img { width: 46px; height: 56px; object-fit: contain; }

.ac-prof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.ac-side { display: grid; gap: clamp(26px, 4vh, 40px); }
.ac-box { display: grid; gap: 14px; padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--fb-line); }
.ac-box .ac-h2 { margin-bottom: 4px; }
.ac-box .cta, .ac-box .link { justify-self: start; }
.ac-del summary { cursor: pointer; font-size: .78rem; color: var(--fb-soft); margin-top: 8px; }
.ac-del[open] { display: grid; gap: 12px; }
.ac-danger { border-color: #8a2a1d; color: #8a2a1d; }
.ac-danger:hover, .ac-danger:focus-visible { background: #8a2a1d; color: var(--fb-ground); }

@media (max-width: 1100px) { .ac-sign { grid-template-columns: 1fr 1fr; } .ac-perks { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .ac-sign, .ac-cart, .ac-prof { grid-template-columns: 1fr; }
  .ac-sign #f-up { order: 2; } .ac-perks { order: 3; }
  .ac-sum { position: static; }
  .ac-line { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .ac-track span { font-size: .62rem; }
  .ac-inline { flex-wrap: wrap; } .ac-inline .cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ac-rise, .ac-done circle, .ac-done path { animation: none; stroke-dashoffset: 0; } .ac-ind { transition: none; } }

/* ---- 2026-11-15 · prices in the visitor's currency ---- */
.wcard__price[hidden], .w__amount[hidden], .w__money-note[hidden] { display: none; }
.wcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; font-size: 1rem; color: var(--fb-ink); font-variant-numeric: tabular-nums; }
.wcard__price b, .card__price b, .w__amount b { font-weight: 400; }
.wcard__price i { font-style: normal; font-size: .72rem; letter-spacing: .08em; color: var(--fb-soft); }
.w__money { margin: 4px 0 18px; }
.w__amount { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--sc-font-display); font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.w__amount i { font-family: var(--sc-font-body, inherit); font-style: normal; font-size: .82rem; letter-spacing: .1em; color: var(--fb-soft); }
.w__money-note { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .84rem; color: var(--fb-soft); }
.curpick { display: inline-flex; align-items: center; gap: 10px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-soft); }
.curpick select { appearance: none; -webkit-appearance: none; font: inherit; letter-spacing: .12em; color: var(--fb-ink); background: transparent; border: 1px solid var(--fb-line); border-radius: 0; padding: 8px 30px 8px 12px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fb-accent) 50%), linear-gradient(135deg, var(--fb-accent) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.curpick select:hover, .curpick select:focus-visible { border-color: var(--fb-accent); outline: none; }
[dir="rtl"] .curpick select { padding: 8px 12px 8px 30px; background-position: 10px 52%, 15px 52%; }
.curpick--cat { margin-top: 14px; }
:lang(zh) .curpick, :lang(ar) .curpick { letter-spacing: .04em; font-size: .86rem; }
.houses { flex-wrap: wrap; }
.w__amount i { font-family: var(--sc-font-text); }

/* ---- 2026-11-15 (2) · phone: the search takes the row, the brand names run on their own row under it ---- */
@media (max-width: 860px) {
  .cat__tools { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cat__brands { min-width: 0; }
}
.w__disc { margin: clamp(26px, 4vh, 44px) 0 0; padding-top: 18px; border-top: 1px solid var(--fb-line); max-width: none; }