/* The price guide (/watches) and each model's price page (/watch/<slug>). Loaded after doc.css,
   which has the site header, tab bar and footer. */
:root{
  --accent-soft:rgba(15,74,51,.09);--gold-soft:rgba(196,151,58,.16);
  --good:#0f6b45;--good-ink:#fff;--good-soft:rgba(15,107,69,.11);
  --bad:#a3262e;--warn:#94580c;--score:#c1272d;
  --steel:#b9bdb6;--glyph-edge:rgba(20,38,29,.28);
  --font-board:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;
}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabbar a[aria-current="page"]{color:var(--gold-on-green)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-2px;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:var(--gold-on-green)}
@media (min-width:900px){
  .tabs-top a[aria-current="page"]{color:var(--accent-ink)}
  .tabs-top a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;background:var(--gold-on-green)}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line-strong);background:var(--raised);color:var(--text);font:500 14px/1.2 var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.section-title{margin:0;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.section-title::before{content:"";display:inline-block;width:7px;height:7px;margin:0 .7em .16em 0;background:var(--gold);transform:rotate(45deg)}
.note{margin:9px 0 0;font-size:12.5px;color:var(--muted);max-width:72ch}
.empty-note{margin:12px 0 0;padding:16px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:13.5px}

.wp{max-width:860px;padding-block:18px 8px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:500 12px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Hero: the dial icon and the name */
.wp-hero{display:flex;align-items:center;gap:18px;margin-top:14px}
.wp-glyph{flex:none;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fffdf7 0,#efe7d4 72%);box-shadow:inset 0 0 0 1px var(--line)}
.wp-glyph .glyph{display:block}
.wp-id{min-width:0}
.wp-title{margin:0;color:var(--accent);font-variant-numeric:lining-nums}
.h-brand{display:block;font:600 12.5px/1.2 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.h-model{display:block;margin-top:5px;font:600 36px/1.02 var(--font-serif);text-wrap:balance}
.h-ref{display:block;margin-top:7px;font:500 15px/1.2 var(--font-sans);letter-spacing:.04em;color:var(--text)}
.wp-sub{margin:6px 0 0;color:var(--muted);font-size:13.5px}
@media (max-width:560px){
  .wp-hero{gap:14px}
  .wp-glyph{width:80px;height:80px}
  .wp-glyph .glyph{width:64px;height:64px}
  .h-model{font-size:29px}
}

/* Value card: the scoreboard frame used across the site */
.vcard{margin-top:20px;border:4px solid var(--accent);border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(20,38,29,.12)}
.vc-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:12px 16px 11px;background:var(--accent);border-bottom:2px solid var(--gold-on-green)}
.vc-title{margin:0;font:600 17px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.vc-sub{font:italic 500 16px/1.2 var(--font-serif);color:var(--gold-on-green)}
.vc-body{padding:18px 16px 6px}
.vc-num{margin:0;font:600 50px/1 var(--font-board);color:#141a16;letter-spacing:.01em}
.vc-range{margin:10px 0 0;font-size:14px;color:var(--muted)}
.vc-range b{color:var(--text);font-weight:600}
.chg{display:inline-block;margin-top:10px;padding:4px 8px;border-radius:6px;font:600 12.5px/1.2 var(--font-sans);background:var(--raised);color:var(--muted)}
.chg.up{background:var(--good-soft);color:var(--good)}
.chg.down{background:rgba(163,38,46,.1);color:var(--bad)}
.vc-basis{margin:12px 0 0;font-size:13px;color:var(--muted);max-width:62ch}
.vc-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px}
.vc-actions .btn{flex:1 1 180px}
@media (max-width:560px){.vc-num{font-size:44px}.vc-body{padding:16px 14px 4px}.vc-actions{padding:12px 14px 14px}}

.wp-sec{margin-top:44px}
.sec-sub{margin:8px 0 0;color:var(--muted);font-size:13.5px;max-width:64ch}
.sec-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.more-link{font-size:13px;font-weight:500;color:var(--accent);text-decoration:none;white-space:nowrap}
.more-link:hover{text-decoration:underline;text-underline-offset:2px}
.tbl-wrap{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* A shared deal, shown first */
.shared{margin-top:16px;border:4px solid var(--gold);border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(20,38,29,.12)}
.shared .vc-top{background:var(--accent)}
.shared.gone{padding:14px 16px;border-width:1px;border-color:var(--line-strong);background:var(--surface);box-shadow:none}
.shared.gone p{margin:0;font-size:14px}
.sd-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:16px 16px 4px}
.shared .sd-pic{width:96px;height:96px}
.sd-title{margin:0;font-size:14.5px;font-weight:500;line-height:1.3}
.sd-meta{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.sd-nums{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0}
.sd-price{font:600 30px/1 var(--font-board);color:#141a16}
.sd-val{font-size:13px;color:var(--muted)}
.sd-ends{margin:8px 0 0;font-size:13px;color:var(--muted)}
.vs.risky{color:var(--bad);border:1px dashed rgba(163,38,46,.5)}

/* Value by condition */
table.vgrid{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vgrid th,.vgrid td{padding:10px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.vgrid thead th{font:600 10.5px/1.25 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:normal;vertical-align:bottom;background:var(--raised)}
.vgrid tbody th{text-align:left;font-weight:600;color:var(--text)}
.vgrid tr:last-child th,.vgrid tr:last-child td{border-bottom:0}
.vgrid .ref-row{background:rgba(196,151,58,.07)}
.vgrid td.here{font-weight:600;color:var(--accent);box-shadow:inset 0 0 0 2px var(--gold)}
@media (max-width:560px){.vgrid{font-size:12.5px}.vgrid th,.vgrid td{padding:9px 4px}.vgrid th:first-child{padding-left:8px}.vgrid td:last-child,.vgrid th:last-child{padding-right:7px}.vgrid thead th{font-size:9.5px;letter-spacing:.05em}.vgrid.big{font-size:11.5px}}

/* Listings for sale */
.sub-h{margin:18px 0 8px;font:600 12px/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.lst{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.lst li+li{border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;color:var(--text);text-decoration:none}
a.li:hover{background:#fff}
a.li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.li-pic{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:8px;background:var(--raised);overflow:hidden}
.li-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.li-main{min-width:0}
.li-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.3;font-weight:500}
.li-meta{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.ends{font-variant-numeric:tabular-nums;color:var(--text);font-weight:500}
.ends.hot{color:var(--score)}
.li-num{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.li-price{font:600 18px/1 var(--font-board);font-variant-numeric:tabular-nums;color:#141a16;white-space:nowrap}
.vs{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:22px;padding:0 7px;border-radius:6px;font:600 12px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.vs.steal{background:var(--good);color:var(--good-ink)}
.vs.deal{background:var(--good-soft);color:var(--good)}
.vs.fair{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.vs.full{color:var(--muted)}
.vs.over{color:var(--faint)}
.vs.early{color:var(--faint);border:1px dashed var(--line-strong)}
.risk-tag{font:600 10.5px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}
.gate-note{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border:1px solid var(--gold-soft);border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 999px var(--gold-soft);font-size:13.5px}
.gate-note svg{flex:none;margin-top:3px;color:var(--gold-ink)}
@media (max-width:560px){.li{grid-template-columns:56px minmax(0,1fr) auto;gap:10px;padding:10px}.li-pic{width:56px;height:56px}}

/* Recent sales */
table.comps{width:100%;border-collapse:collapse;font-size:13px}
.comps th{font:600 10.5px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--line-strong)}
.comps td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.comps .r{text-align:right;padding-right:0}
.comps td.r{font-weight:600}

/* Charts: an SVG for the lines, HTML for labels and dots */
.chart{margin:14px 0 0;padding:12px 4px 26px 50px}
.ch-plot{position:relative;height:190px}
.ch-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-area{fill:var(--accent-soft)}
.ch-band{fill:rgba(15,74,51,.08)}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ch-y{position:absolute;left:-50px;width:42px;text-align:right;transform:translateY(-50%);font:500 11.5px/1 var(--font-sans);color:var(--faint);font-variant-numeric:tabular-nums}
.ch-x{position:absolute;top:100%;margin-top:9px;font:500 11.5px/1 var(--font-sans);color:var(--faint);white-space:nowrap;transform:translateX(-50%)}
.ch-x.start{transform:none}
.ch-x.end{transform:translateX(-100%)}
.ch-pt{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.ch-pt.sale{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--gold)}
.ch-val{position:absolute;transform:translate(calc(-100% - 9px),calc(-100% - 7px));font:600 13px/1 var(--font-sans);color:var(--accent);white-space:nowrap;background:rgba(244,239,226,.85);padding:2px 3px;border-radius:4px}
.ch-val.below{transform:translate(calc(-100% - 9px),9px)}
.vcard .ch-val{background:rgba(255,255,255,.85)}
@media (min-width:700px){.ch-plot{height:230px}}
.hist-chg{font-size:13px;font-weight:600}
.hist-chg.up{color:var(--good)}.hist-chg.down{color:var(--bad)}.hist-chg.flat{color:var(--muted)}

/* Market index on the price guide */
.idx{margin-top:22px}
.idx .vc-body{padding-bottom:14px}
.idx .chg{margin-left:10px;vertical-align:10px}
.idx .vc-num{display:inline-block}
.idx-brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.idx-brands a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);text-decoration:none;font-size:13px}
.idx-brands a:hover{border-color:var(--gold)}
.idx-brands b{font-weight:600;font-variant-numeric:tabular-nums}
.idx-brands .up{color:var(--good)}.idx-brands .down{color:var(--bad)}.idx-brands .flat{color:var(--muted)}
.idx-brands span{white-space:nowrap}
@media (max-width:560px){
  .idx-brands{display:flex;overflow-x:auto;margin-inline:-14px;padding:0 14px 6px;scrollbar-width:none}
  .idx-brands::-webkit-scrollbar{display:none}
  .idx-brands li{flex:none}
  .idx-brands a{gap:10px}
}

/* About */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:12px 0 0;border-top:1px solid var(--line)}
.specs div{padding:11px 12px 11px 0;border-bottom:1px solid var(--line)}
.specs dt{font:600 10.5px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.specs dd{margin:4px 0 0;font-size:14px}
@media (max-width:560px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.faq h3{margin:20px 0 6px;font:600 20px/1.2 var(--font-serif);color:var(--accent);font-variant-numeric:lining-nums}
.faq p{margin:0;font-size:14.5px;line-height:1.6;max-width:70ch}

/* More models */
.mm{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mm a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none;min-width:0}
.mm a:hover{border-color:var(--gold)}
.mm .glyph{flex:none}
.mm-name{flex:1;min-width:0}
.mm-name b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.mm-name span{display:block;margin-top:2px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-val{font-weight:600;font-size:13.5px;white-space:nowrap}
.all-link{margin:14px 0 0;font-size:14px;font-weight:500}
.all-link a{text-decoration:none}
.all-link a:hover{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.mm{grid-template-columns:1fr}}

/* Sold prices */
.sec-row .links{display:flex;flex-wrap:wrap;gap:4px 16px}
.sold-day{margin-top:22px}
.sold-day .sub-h span{margin-left:6px;color:var(--faint);font-weight:500;letter-spacing:.04em;text-transform:none}
.bchips a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bchips a[aria-current="page"] span{color:rgba(251,247,236,.72)}
.hub-upd a{color:var(--accent);text-decoration:none;font-weight:600}

/* The price guide */
.hub-head{padding-top:6px}
.wp-h1{margin:0;font:600 40px/1.05 var(--font-serif);color:var(--accent);font-variant-numeric:lining-nums}
.hub-head .lede{margin:12px 0 0;font:italic 500 19px/1.4 var(--font-serif);max-width:60ch;font-variant-numeric:lining-nums}
.hub-upd{margin:10px 0 0;font:500 12px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.bchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.bchips a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:500;text-decoration:none}
.bchips a:hover{border-color:var(--accent)}
.bchips span{font-size:11.5px;color:var(--faint)}
.hub-brand{margin-top:36px;scroll-margin-top:84px}
.hub-list{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.hub-list a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.hub-list a:hover{background:var(--surface)}
.hl-name{min-width:0}
.hl-name b{display:block;font:600 18px/1.15 var(--font-serif);color:var(--text);font-variant-numeric:lining-nums}
.hl-name span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hl-nums{display:grid;justify-items:end;gap:3px;text-align:right}
.hl-val{font:600 17px/1 var(--font-board);color:#141a16;white-space:nowrap}
.hl-chg{font-size:12px;font-weight:600}
.hl-chg.up{color:var(--good)}.hl-chg.down{color:var(--bad)}.hl-chg.flat{color:var(--muted)}
.hl-live{font-size:11.5px;color:var(--faint);white-space:nowrap}
@media (max-width:560px){
  .wp-h1{font-size:34px}
  .bchips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bchips::-webkit-scrollbar{display:none}
  .bchips a{flex:none}
}