/* Kings & Queens - the collection (on top of main.css: tokens, type, buttons, header, menu, cursor, footer) */

.cat section{position:relative}

/* ---------------- intro: short, so the first row of watches is in view on arrival (Jeff, 13-10: "too tall for ecommerce") ----------------
   crumbs | rating; the heading with its count raised beside it and the line beneath it | the four promises; then the next
   level down (the houses, or a house's models) as a row of pills, each carrying the cut-out of its newest watch */
.ct-hero{padding:112px 0 0}
.ct-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.ct-crumbs{display:flex;flex-wrap:wrap;gap:10px;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.ct-crumbs a{transition:color calc(var(--beat)*2) linear}
.ct-crumbs a:hover{color:var(--gilt)}
.ct-crumbs [aria-current]{color:var(--vellum)}
.ct-rating{flex:none;display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sage);transition:color calc(var(--beat)*2) linear}
.ct-rating:hover{color:var(--vellum)}
.ct-rating span{color:var(--brass);letter-spacing:.12em;font-size:12px}
.ct-rating b{font-weight:400;color:var(--vellum)}
.ct-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--g) * 2);align-items:end;margin-top:clamp(16px,2vw,30px)}
.ct-tl{display:flex;align-items:flex-start;gap:clamp(8px,.8vw,14px)}
/* sized by the width and the height of the window, so a short laptop screen keeps its watches in view too */
.ct-title{font:400 clamp(42px,min(4.6vw,8.2vh),92px)/.98 var(--display);letter-spacing:-.025em}
.ct-count{margin-top:.5em;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--brass)}
.ct-intro{max-width:600px;margin-top:clamp(10px,1vw,16px);font:400 15px/1.6 var(--sans);color:var(--sage);text-wrap:pretty}
.ct-trust{list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:14px 30px;padding-bottom:6px}
.ct-trust li{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ct-trust svg.i{width:18px;height:18px;color:var(--brass)}
/* the next level down: one row that runs on sideways, with arrows (pointer) and soft edges where it does */
.ct-subs-w{position:relative;display:flow-root;margin-top:clamp(20px,2.2vw,32px);padding-bottom:clamp(22px,2.2vw,32px)}
.ct-subs{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth;padding-top:14px;margin-top:-14px}   /* room above for the watches that peek over their pills */
.ct-subs::-webkit-scrollbar{display:none}
.ct-sub{flex:none;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(243,238,228,.2);font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.ct-sub img{height:46px;width:auto;margin:-16px -4px 0 -10px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform calc(var(--beat)*4) var(--sweep)}
.ct-sub b{font:400 11px/1 var(--mono);color:var(--brass)}
.ct-sub:hover{box-shadow:inset 0 0 0 1px var(--brass)}
.ct-sub:hover img{transform:translateY(-4px) rotate(-7deg)}
.ct-sub.on{background:var(--brass);color:var(--hatton);box-shadow:none}
.ct-sub.on b{color:var(--hatton)}
.ct-subs-w:before,.ct-subs-w:after{content:"";position:absolute;top:-14px;bottom:clamp(22px,2.2vw,32px);width:72px;z-index:1;pointer-events:none;opacity:0;transition:opacity calc(var(--beat)*2) linear}
.ct-subs-w:before{left:0;background:linear-gradient(90deg,var(--hatton) 20%,rgba(13,26,19,0))}
.ct-subs-w:after{right:0;background:linear-gradient(270deg,var(--hatton) 20%,rgba(13,26,19,0))}
.ct-subs-w.can-l:before,.ct-subs-w.can-r:after{opacity:1}
.ct-sx{position:absolute;top:5px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hatton);box-shadow:inset 0 0 0 1px rgba(243,238,228,.25);color:var(--vellum);cursor:pointer;opacity:0;pointer-events:none;transition:opacity calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.ct-sx svg.i{width:18px;height:18px}
.ct-sx:hover{box-shadow:inset 0 0 0 1px var(--brass)}
.ct-sx.prev{left:0} .ct-sx.next{right:0}
.ct-subs-w.can-l .ct-sx.prev,.ct-subs-w.can-r .ct-sx.next{opacity:1;pointer-events:auto}
html.touch .ct-sx{display:none}

/* a search's results (?q=, js/catalogue.js): the heading names the words; the line, the promises and the houses step aside */
.cat.has-q .ct-intro,.cat.has-q .ct-trust,.cat.has-q .ct-subs-w{display:none}
.cat.has-q .ct-hero{padding-bottom:clamp(30px,3vw,48px)}

/* ---------------- the bar: filter, chips, count, sort ---------------- */
.ct-list{padding-bottom:clamp(110px,10vw,180px)}
.ct-bar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid rgba(18,21,18,.1);transition:transform calc(var(--beat)*4) var(--sweep)}
html:not(.hdr-off) .ct-bar.stuck{transform:translateY(88px)}
.ct-bar-in{display:flex;align-items:center;gap:18px;min-height:76px}
.ct-open{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 20px;background:var(--ink);color:var(--vellum);font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color calc(var(--beat)*2) linear}
.ct-open:hover{background:var(--heritage)}
.ct-open svg.i{width:17px;height:17px}
.ct-n[hidden]{display:none}
.ct-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brass);color:var(--hatton);font:400 11px/1 var(--mono)}
.ct-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--vellum);box-shadow:inset 0 0 0 1px rgba(18,21,18,.12);font:400 13px/1 var(--sans);cursor:pointer}
.ct-chip svg.i{width:13px;height:13px}
.ct-chip:hover{box-shadow:inset 0 0 0 1px var(--bronze)}
.ct-qc{background:var(--ink);color:var(--vellum);box-shadow:none} .ct-qc:hover{box-shadow:inset 0 0 0 1px var(--brass)}
.ct-shown{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.ct-shown b{font-weight:400;color:var(--ink)}
.ct-sort{position:relative;display:inline-flex;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.ct-sort select{appearance:none;height:46px;padding:0 38px 0 16px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.18);font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.ct-sort svg.i{position:absolute;right:12px;width:16px;height:16px;pointer-events:none;color:var(--ink)}
.ct-sv{display:none}                                          /* the choice's words, for a phone's bar (below, 600px) */

/* ---------------- the grid ---------------- */
.ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,3.4vw,64px) var(--g);padding-top:clamp(28px,2.6vw,44px)}
.ct-tile[hidden]{display:none}
.ct-tile{display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:4/5;padding:clamp(24px,2.4vw,40px);background:var(--hatton);color:var(--vellum)}
.ct-tile svg.i{width:28px;height:28px;color:var(--brass)}
.ct-tile .lab{color:var(--brass);margin-top:auto}
.ct-tile p{font:400 clamp(26px,2vw,36px)/1.15 var(--display)}
.ct-tile p em{color:var(--gilt)}
.ct-tile .link{align-self:flex-start;color:var(--gilt)}
.ct-empty{padding:80px 0;text-align:center}
.ct-empty p{font:400 clamp(30px,3vw,48px)/1.2 var(--display);margin-bottom:28px}
.ct-empty em{color:var(--bronze)}
.ct-empty .ct-eask{margin-left:12px} .ct-eask[hidden]{display:none}
.ct-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:end;margin-top:clamp(110px,10vw,180px);padding-top:clamp(50px,5vw,80px);border-top:1px solid rgba(18,21,18,.14)}
.ct-ask .h2{margin-top:20px}
.ct-ask-r p{font:400 18px/1.65 var(--sans);color:var(--graphite);max-width:520px}
.ct-ask-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------------- the finder (js/finder.js): the filters as the trade's own instruments, the matching watches gathering at the top ---------------- */
.ct-drawer{position:fixed;top:0;right:0;bottom:0;z-index:92;width:min(700px,100%);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);transform:translateX(100%);visibility:hidden;transition:transform calc(var(--beat)*5) var(--sweep),visibility 0s linear calc(var(--beat)*5);box-shadow:-30px 0 60px rgba(5,10,7,.18)}
.ct-drawer.on{transform:none;visibility:visible;transition:transform calc(var(--beat)*5) var(--sweep)}    /* hidden when closed: its shadow showed down the right edge */
.ct-scrim{position:fixed;inset:0;z-index:91;background:rgba(5,10,7,.45);opacity:0;transition:opacity calc(var(--beat)*4) linear}
.ct-scrim.on{opacity:1}
.ct-dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:26px 32px 18px}
.ct-dhead .lab{color:var(--bronze)}
.ct-dhead h2{margin-top:10px;font:400 40px/1 var(--display);letter-spacing:-.012em}
.ct-dhead h2 em{color:var(--bronze)}
.ct-x{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(18,21,18,.2);cursor:pointer;transition:background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear}
.ct-x:hover{background:var(--ink);color:var(--vellum)}
/* how many, and the minute track: its lit share is the share of these watches in view */
.fl-live{padding:0 32px 16px;border-bottom:1px solid rgba(18,21,18,.1)}
.fl-top{display:flex;align-items:center;gap:20px}
.fl-n{flex:none;display:flex;align-items:baseline;gap:9px;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.fl-n b{font:400 28px/1 var(--display);letter-spacing:0;color:var(--ink)}
.fl-meter{flex:1;display:flex;justify-content:space-between;align-items:flex-end;height:12px}
.fl-meter i{width:1px;height:45%;background:rgba(18,21,18,.16);transition:background-color var(--beat) linear calc(var(--d) * 4ms)}
.fl-meter i:nth-child(5n+1){height:100%}
.fl-meter i.on{background:var(--brass)}
/* the index: straight to a section; a dot marks those in use */
.fl-index{display:flex;gap:2px;padding:10px 26px;border-bottom:1px solid rgba(18,21,18,.1);overflow-x:auto;scrollbar-width:none}
.fl-index::-webkit-scrollbar{display:none}
.fl-index button{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:999px;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);cursor:pointer;transition:background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear}
.fl-index button:hover{color:var(--ink)}
.fl-index button.cur{background:var(--vellum);color:var(--ink)}
.fl-index button i{display:none;width:5px;height:5px;border-radius:50%;background:var(--brass)}
.fl-index button.on i{display:block}
/* the sections */
.ct-facets{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 32px 36px;scrollbar-width:thin;scrollbar-color:rgba(18,21,18,.2) transparent}
.fl-sec{padding:24px 0 26px;border-bottom:1px solid rgba(18,21,18,.08)}
.fl-sec:last-child{border-bottom:0}
.fl-sh{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.fl-sh h3{flex:none;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.fl-sum{flex:1;min-width:0;font:400 italic 16px/1.2 var(--accent);color:var(--bronze);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-sx{flex:none;margin-left:auto;font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);cursor:pointer;transition:color calc(var(--beat)*2) linear}
.fl-sx:hover{color:var(--ink)}
.fl-sx[hidden]{display:none}
.fl-o{position:relative;color:var(--ink);cursor:pointer;transition:background-color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear,opacity calc(var(--beat)*2) linear}
.fl-o:disabled{opacity:.3;cursor:default}
.fl-c{font:400 10.5px/1 var(--mono);font-style:normal;color:var(--graphite)}
/* words */
.fl-chips{display:flex;flex-wrap:wrap;gap:8px}
.fl-chips .fl-o{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.16);font:400 14px/1 var(--sans)}
.fl-chips .fl-o:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--bronze)}
.fl-chips .fl-o.on{background:var(--ink);color:var(--vellum);box-shadow:none}
.fl-chips .fl-o.on .fl-c{color:var(--gilt)}
.fl-picks .fl-chips .fl-o{box-shadow:inset 0 0 0 1px rgba(184,153,95,.55)}
/* the houses, by their marks */
.fl-houses{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px}
.fl-houses .fl-o{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100px;padding:14px;background:var(--vellum);box-shadow:inset 0 0 0 1px rgba(18,21,18,.05)}
.fl-logo{display:block;width:min(86%,calc(var(--w,50%) * 1.6));max-width:136px;aspect-ratio:var(--ar,3);max-height:44px;background:var(--ink);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background-color calc(var(--beat)*2) linear}
.fl-word{font:400 22px/1 var(--display)}
.fl-houses .fl-l{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.fl-houses .fl-c,.fl-models .fl-c,.fl-sizes .fl-c{position:absolute;right:9px;top:9px}
.fl-houses .fl-o:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--bronze)}
.fl-houses .fl-o.on{background:var(--ink);box-shadow:none}
.fl-houses .fl-o.on .fl-logo{background:var(--gilt)}
.fl-houses .fl-o.on .fl-l{color:var(--sage)}
.fl-houses .fl-o.on .fl-c{color:var(--gilt)}
/* the models, by their newest watch */
.fl-mg+.fl-mg{margin-top:20px}
.fl-mg[hidden]{display:none}
.fl-gl{display:block;margin-bottom:10px;font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.fl-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.fl-models .fl-o{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px 13px;text-align:center;box-shadow:inset 0 0 0 1px rgba(18,21,18,.08)}
.fl-mi{width:100%;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(120% 80% at 50% 8%,#FFFFFF 0,var(--vellum) 46%,var(--stone) 100%)}
.fl-mi img{height:86%;width:auto;filter:drop-shadow(0 10px 10px rgba(18,21,18,.2));transition:transform calc(var(--beat)*4) var(--sweep)}
.fl-models .fl-l{font:400 16px/1.15 var(--display)}
.fl-models .fl-o:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--bronze)}
.fl-models .fl-o:hover:not(:disabled) img{transform:translateY(-4px) rotate(-5deg) scale(1.04)}
.fl-models .fl-o.on{background:rgba(184,153,95,.1);box-shadow:inset 0 0 0 1.5px var(--brass)}
.fl-models .fl-o.on .fl-l{color:var(--bronze)}
/* price and year: a minute track whose ticks rise where the stock is, two thumbs on one rail */
.fl-rv{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;font:400 30px/1 var(--display);font-feature-settings:'lnum'}
.fl-to{font:400 italic 18px/1 var(--accent);color:var(--bronze)}
.fl-track{position:relative;height:66px}
.fl-hist{position:absolute;left:0;right:0;bottom:20px;height:42px;display:flex;align-items:flex-end;gap:2px}
.fl-hist i{flex:1;height:calc(8% + var(--h,0) * 92%);background:rgba(18,21,18,.09);transition:height calc(var(--beat)*3) var(--sweep),background-color var(--beat) linear}
.fl-hist i.has{background:rgba(18,21,18,.3)}
.fl-hist i.in{background:rgba(184,153,95,.32)}
.fl-hist i.in.has{background:var(--brass)}
.fl-rail{position:absolute;left:0;right:0;bottom:12px;height:2px;background:rgba(18,21,18,.12)}
.fl-fill{position:absolute;top:0;bottom:0;background:var(--ink)}
/* both inputs span the rail, half a thumb beyond each end, so a thumb's centre sits on the rail's ends */
.fl-in{position:absolute;left:-11px;bottom:0;width:calc(100% + 22px);height:26px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:0}
.fl-in::-webkit-slider-runnable-track{height:26px;background:none}
.fl-in::-moz-range-track{background:none}
.fl-in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),0 3px 8px rgba(18,21,18,.22);pointer-events:auto;cursor:grab}
.fl-in::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),0 3px 8px rgba(18,21,18,.22);pointer-events:auto;cursor:grab}
.fl-in:active::-webkit-slider-thumb{box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 7px var(--brass),0 3px 8px rgba(18,21,18,.22)}
.fl-in:active::-moz-range-thumb{box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 7px var(--brass),0 3px 8px rgba(18,21,18,.22)}
.fl-in:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 5px rgba(184,153,95,.4)}
.fl-in:focus-visible::-moz-range-thumb{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 5px rgba(184,153,95,.4)}
@media (pointer:fine){ html.js .fl-in::-webkit-slider-thumb{cursor:none} html.js .fl-in::-moz-range-thumb{cursor:none} }
.fl-ends{display:flex;justify-content:space-between;margin-top:6px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--graphite)}
.fl-pres{margin-top:16px}
/* case sizes as rings drawn to scale */
.fl-sizes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 6px}
.fl-sizes .fl-o{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:10px 0 12px;border-radius:10px}
.fl-ring{width:56px;height:56px;fill:none;stroke:rgba(18,21,18,.42);stroke-width:1.2;transition:stroke calc(var(--beat)*2) linear,fill calc(var(--beat)*2) linear}
.fl-ring rect{fill:rgba(18,21,18,.42);stroke:none}
.fl-sizes .fl-l{font:400 11px/1 var(--mono);letter-spacing:.06em}
.fl-sizes .fl-c{top:4px;right:4px}
.fl-sizes .fl-o:hover:not(:disabled) .fl-ring{stroke:var(--bronze)}
.fl-sizes .fl-o.on{background:rgba(184,153,95,.1)}
.fl-sizes .fl-o.on .fl-ring{stroke:var(--brass);stroke-width:2.2;fill:rgba(184,153,95,.14)}
.fl-sizes .fl-o.on .fl-ring rect{fill:var(--brass)}
/* dials as small dials in their colours (twelve indices, light or dark to suit), cases as discs of their metals */
.fl-dials,.fl-metals{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:6px}
.fl-dials .fl-o,.fl-metals .fl-o{display:flex;align-items:center;gap:12px;padding:7px 14px 7px 8px;border-radius:999px;text-align:left;box-shadow:inset 0 0 0 1px rgba(18,21,18,.08)}
.fl-dials .fl-l,.fl-metals .fl-l{flex:1;min-width:0;font:400 14px/1.25 var(--sans)}
.fl-dials .fl-o:hover:not(:disabled),.fl-metals .fl-o:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--bronze)}
.fl-dials .fl-o.on,.fl-metals .fl-o.on{background:rgba(184,153,95,.1);box-shadow:inset 0 0 0 1.5px var(--brass)}
.fl-dial{flex:none;position:relative;width:34px;height:34px;border-radius:50%;--ix:rgba(255,255,255,.85);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 72%,#fff) 0,var(--c) 58%,color-mix(in srgb,var(--c) 78%,#000) 100%);box-shadow:0 0 0 2px var(--paper),0 0 0 3px rgba(18,21,18,.2),inset 0 1px 3px rgba(0,0,0,.3)}
.fl-dial.is-light{--ix:rgba(18,21,18,.55)}
.fl-dial:after{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(from -2deg,var(--ix) 0 4deg,transparent 4deg 30deg);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61% 80%,transparent 81%);mask:radial-gradient(circle,transparent 60%,#000 61% 80%,transparent 81%)}
.fl-dial.is-open{background:radial-gradient(circle,#C9A15A 0 12%,transparent 13%),repeating-conic-gradient(#2B2B2B 0 9deg,#0F0F10 9deg 22deg)}
.fl-dial.is-woven{--ix:rgba(18,21,18,.55);background:repeating-linear-gradient(0deg,rgba(60,44,20,.32) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(60,44,20,.32) 0 1px,transparent 1px 4px),#D4BD89}
.fl-dial.is-stone{background:repeating-linear-gradient(35deg,#8D9195 0 2px,#5F6368 2px 5px)}
.fl-metal{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 44%),conic-gradient(from 225deg,var(--a) 0 50%,var(--b) 50% 100%);box-shadow:0 0 0 2px var(--paper),0 0 0 3px rgba(18,21,18,.2),inset 0 -3px 5px rgba(0,0,0,.22)}
/* the foot; its count turns over like a date */
.ct-dfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 32px calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(18,21,18,.1)}
.ct-dfoot .btn{flex:1;max-width:340px}
.ct-dfoot .ct-clear{cursor:pointer}
.ct-done b,.fl-n b{display:inline-grid;overflow:hidden;vertical-align:bottom}
.ct-done b>span,.fl-n b>span{grid-area:1 / 1}
.r-out{animation:r-out calc(var(--beat)*4) var(--sweep) forwards}
.r-in{animation:r-in calc(var(--beat)*4) var(--sweep) both}
.r-out.up{animation-name:r-out-up} .r-in.up{animation-name:r-in-up}
@keyframes r-out{to{transform:translateY(100%);opacity:0}}
@keyframes r-in{from{transform:translateY(-100%);opacity:0}}
@keyframes r-out-up{to{transform:translateY(-100%);opacity:0}}
@keyframes r-in-up{from{transform:translateY(100%);opacity:0}}

/* ---------------- responsive ---------------- */
@media (max-width:1200px){
  .ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .ct-hero{padding-top:84px}
  .ct-head{flex-direction:column;align-items:flex-start;gap:10px}
  .ct-crumbs>:nth-child(-n+2){display:none}                  /* "Kings & Queens /": the header's wordmark goes home; one line for Rolex / Datejust */
  .ct-top{grid-template-columns:1fr;margin-top:14px}
  .ct-title{font-size:clamp(34px,9.6vw,48px);min-width:0;overflow-wrap:break-word}   /* a search's long word breaks rather than running off the screen */
  .ct-intro{display:none}
  .ct-trust{display:flex;gap:22px;margin:16px calc(-1 * var(--m)) 0;padding:0 var(--m);overflow-x:auto;scrollbar-width:none}
  .ct-trust::-webkit-scrollbar{display:none}
  .ct-trust li{flex:none;font-size:10.5px}
  .ct-trust svg.i{width:16px;height:16px}
  .ct-subs-w{margin:16px calc(-1 * var(--m)) 0;padding-bottom:22px}
  .ct-subs{padding-left:var(--m);padding-right:var(--m);scroll-padding-inline:var(--m)}
  .ct-subs-w:before,.ct-subs-w:after{display:none}
  .ct-sub{height:46px;padding:0 16px}
  .ct-sub img{height:42px}
  .ct-bar-in{flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px;min-height:0}
  .ct-chips{order:5;flex-basis:100%;row-gap:10px}
  .ct-chips:empty{display:none}
  .ct-chip{position:relative}
  .ct-chip:after{content:"";position:absolute;inset:-5px 0}  /* a finger's height (44px) to take a filter off; the pill as before */
  .ct-shown{margin-left:auto}
  .ct-sort span{display:none}
  .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
  .cc-meta{grid-template-columns:1fr}
  .cc-meta h3{font-size:21px}
  .cc-meta .p{font-size:15px}
  .cc-bp{display:none}
  .ct-tile p{font-size:22px}
  .ct-tile .link svg.i{width:16px;height:16px}                /* the link's arrow at a link's size: the tile's 28px icon rule took it too, and its words broke */
  .ct-empty{padding-left:var(--m);padding-right:var(--m)}     /* its own padding had taken the page's margins away */
  .ct-ask{grid-template-columns:1fr}
  .ct-drawer{top:auto;left:0;width:100%;height:100%;transform:translateY(100%)}
  .ct-dhead,.fl-live,.ct-facets,.ct-dfoot{padding-left:20px;padding-right:20px}
  .ct-dhead{padding-top:20px}
  .ct-dhead h2{font-size:32px}
  .fl-index{padding:8px 14px}
  .fl-index button{position:relative}
  .fl-index button:after{content:"";position:absolute;inset:-6px 0}   /* a finger's height (44px), inside the row's own padding; the pill as before */
  .fl-sx{padding:17px 12px 17px 8px;margin:-17px -12px -17px auto}                                         /* "Clear" a finger's size, the header's line unchanged */
  .fl-chips .fl-o{height:44px}
  .fl-houses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-models{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the models' photographs in boxes of one shape, the cards' 4:5: the cut-outs differ in height and each box grew to its own,
     so a row's names did not line up */
  .fl-mi{position:relative;aspect-ratio:4/5}
  .fl-mi img{position:absolute;left:0;top:7%;width:100%;height:86%;object-fit:contain}
  .fl-dials,.fl-metals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-dials .fl-o,.fl-metals .fl-o{padding-right:10px}
  .fl-dials .fl-l,.fl-metals .fl-l{font-size:13px}
  .fl-rv{font-size:26px}
  /* the tracks' thumbs at 28px for a finger (an iPhone's own slider's size); the rail and the ticks keep their places around them */
  .fl-track{height:70px}
  .fl-hist{bottom:24px}
  .fl-rail{bottom:14px}
  .fl-in{left:-14px;width:calc(100% + 28px);height:30px}
  .fl-in::-webkit-slider-runnable-track{height:30px}
  .fl-in::-webkit-slider-thumb{width:28px;height:28px;margin-top:1px}
  .fl-in::-moz-range-thumb{width:28px;height:28px}
  .ct-dfoot .btn{max-width:none}
  .ct-dfoot .ct-clear{min-height:44px}
  html:not(.hdr-off) .ct-bar.stuck{transform:translateY(68px)}
}
@media (max-width:600px){
  /* the bar on one row (Jeff, 19-10: "the filter button on mobile with the new arrivals need to be one line"): Filter and the
     sort at one height, the sort taking the rest. The count steps aside, the heading above carries it, and comes back at the
     end of the chips' row once a filter or a search is on */
  .ct-bar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .ct-open{grid-row:1;grid-column:1;gap:10px;padding:0 16px}
  .ct-sort{grid-row:1;grid-column:2 / -1;height:46px;padding:0 30px 0 12px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.18)}
  /* an iPhone zooms the page into a select whose words are under 16px, and leaves it zoomed: the select, at 16px and unseen,
     takes the tap over the whole box, and .ct-sv (js/catalogue.js) shows its choice at the bar's size */
  .ct-sort .ct-sv{display:block;min-width:0;font:500 12px/1 var(--sans);letter-spacing:.08em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ct-sort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px}
  .ct-sort:has(select:focus-visible){box-shadow:inset 0 0 0 1px var(--ink)}
  .ct-sort svg.i{right:10px}
  .ct-chips{grid-row:2;grid-column:1 / 3}
  .ct-shown{grid-row:2;grid-column:3;align-self:start;line-height:34px}
  .ct-chips:empty+.ct-shown{display:none}
  /* the viewing and part-exchange tiles across the row: in half a phone their words broke a word to a line */
  .ct-tile{grid-column:1 / -1;aspect-ratio:auto;gap:18px;padding:24px 20px}
  .ct-tile p{font-size:26px}
  /* the ask's two ways, and an empty grid's, one under the other at full width */
  .ct-ask-ctas .btn,.ct-empty .btn{width:100%}
  .ct-empty .ct-eask{margin:12px 0 0}
}
@media (max-width:380px){
  .ct-sort .ct-sv{font-size:11px;letter-spacing:.06em}        /* the longest sorts still fit beside a Filter with its count */
}

/* ---------------- a house or a model with nothing for sale: no bar to filter by, the ask below takes the page ---------------- */
.ct-bar[hidden]{display:none}