/* Site-level layout + BidJS restyle. Design tokens come from ds/styles.css */
.boot{padding:120px;text-align:center;font-family:var(--font-sans);letter-spacing:var(--track-label);
  text-transform:uppercase;font-size:var(--text-label);color:var(--text-muted)}
.zv-container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}
@media (max-width:760px){.zv-container{padding-left:var(--container-pad-mobile);padding-right:var(--container-pad-mobile)}}

.zv-band{background:var(--surface-dark);color:var(--text-inverse)}
.zv-panel{background:var(--surface-panel);border-top:var(--rule-hairline);border-bottom:var(--rule-hairline)}
.zv-sechead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);margin-bottom:var(--space-6)}
.zv-sechead h2{font-family:var(--font-serif);font-weight:var(--weight-serif-semibold);font-size:var(--text-h2)}
.zv-grid{display:grid;gap:var(--grid-gap)}
.zv-g4{grid-template-columns:repeat(4,1fr)}
.zv-g3{grid-template-columns:repeat(3,1fr)}
.zv-g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.zv-g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.zv-g3{grid-template-columns:repeat(2,1fr)}.zv-g2{grid-template-columns:1fr}}
@media (max-width:640px){.zv-g4,.zv-g3{grid-template-columns:1fr}}

.zv-hero h1{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-hero);
  line-height:var(--leading-tight);letter-spacing:var(--track-display);text-transform:uppercase;color:var(--paper-50)}
.zv-lede{font-family:var(--font-serif);font-style:italic;font-size:var(--text-body-lg);
  line-height:var(--leading-body);color:var(--ink-300);max-width:46ch}
.zv-prose{font-family:var(--font-serif);font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-muted);max-width:68ch}
.zv-prose p+p{margin-top:var(--space-4)}
.zv-stat{border-top:var(--rule-ink);padding-top:var(--space-5)}
.zv-stat b{display:block;font-family:var(--font-serif);font-size:var(--text-h2);font-weight:var(--weight-serif-semibold)}
.zv-stat span{font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text-muted)}

/* ---- BidJS restyle: the widget renders its own DOM; we override in place ---- */
#bidjs.bidjs-app{font-family:var(--font-serif);color:var(--text-body)}
#bidjs .btn{border-radius:var(--radius-0)!important;font-family:var(--font-sans)!important;
  text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--text-label)!important;
  padding:12px 22px!important;border-width:1px!important;box-shadow:none!important;transition:all var(--dur-fast) var(--ease-out)}
#bidjs .btn-primary{background:var(--ink-900)!important;border-color:var(--ink-900)!important;color:var(--paper-50)!important}
#bidjs .btn-primary:hover{background:var(--brass-600)!important;border-color:var(--brass-600)!important}
#bidjs .btn-default{background:transparent!important;border-color:var(--border-strong)!important;color:var(--ink-900)!important}
#bidjs .btn-default:hover{background:var(--ink-900)!important;color:var(--paper-50)!important}
#bidjs .panel,#bidjs .well,#bidjs .thumbnail{border-radius:var(--radius-0)!important;box-shadow:none!important;
  border:var(--rule-hairline)!important;background:var(--surface-card)!important}
#bidjs .form-control{border-radius:var(--radius-0)!important;border:var(--rule-hairline)!important;box-shadow:none!important;
  font-family:var(--font-serif)!important;padding:10px 12px!important;height:auto!important}
#bidjs .form-control:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px rgba(150,116,47,.18)!important}
#bidjs h1,#bidjs h2,#bidjs h3,#bidjs h4{font-family:var(--font-serif)!important;font-weight:var(--weight-serif-semibold)!important;color:var(--ink-900)!important}
#bidjs .label,#bidjs .badge{border-radius:var(--radius-0)!important;font-family:var(--font-sans)!important;
  letter-spacing:var(--track-label);text-transform:uppercase;font-weight:var(--weight-sans-medium)!important}
#bidjs a{color:var(--ink-900)}
#bidjs a:hover{color:var(--accent)}
#bidjs .pagination>li>a,#bidjs .pagination>li>span{border-radius:var(--radius-0)!important;
  border-color:var(--border-hairline)!important;color:var(--ink-900)!important;font-family:var(--font-sans)!important}
#bidjs .pagination>.active>a{background:var(--ink-900)!important;border-color:var(--ink-900)!important}
#bidjs .table>thead>tr>th{border-bottom:var(--rule-ink)!important;font-family:var(--font-sans)!important;
  text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--text-label)!important;color:var(--ink-900)!important}
#bidjs .table>tbody>tr>td{border-top:var(--rule-hairline)!important}

/* ============================================================
   BidJS → design system
   BidJS renders Bootstrap-3 markup we don't control, so brand
   values are applied by overriding its own class vocabulary.
   Everything is scoped to #bidjs so nothing leaks to the site.
   ============================================================ */

/* --- redundant summary: BidJS requires the field, but it duplicates the title --- */
#bidjs .lot__info--summary{display:none!important}

/* --- Bootstrap contextual colours -> brand --- */
#bidjs .label{padding:5px 10px!important;font-size:10px!important;font-weight:500!important}
#bidjs .label-info{background:var(--ink-900)!important;color:var(--paper-50)!important}
#bidjs .label-primary{background:var(--brass-600)!important;color:var(--paper-50)!important}
#bidjs .label-success{background:var(--olive-700)!important;color:var(--paper-50)!important}
#bidjs .label-danger,#bidjs .label-important{background:var(--oxblood-600)!important;color:var(--paper-50)!important}
#bidjs .label-warning{background:var(--brass-700)!important;color:var(--paper-50)!important}
#bidjs .label-default{background:var(--paper-200)!important;color:var(--ink-900)!important}
#bidjs .bg-muted{background:var(--paper-100)!important}
#bidjs .text-muted{color:var(--text-muted)!important}
#bidjs .text-primary{color:var(--accent)!important}
#bidjs .text-danger{color:var(--state-live)!important}
#bidjs .text-success{color:var(--olive-700)!important}

/* --- links & link-buttons --- */
#bidjs .btn-link{color:var(--brass-600)!important;font-family:var(--font-sans)!important;
  text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--text-caption)!important;
  text-decoration:none!important;padding:6px 0!important}
#bidjs .btn-link:hover,#bidjs .btn-link:focus{color:var(--brass-700)!important;text-decoration:none!important}

/* --- tabs: square, hairline, brass active --- */
#bidjs .nav-tabs{border-bottom:1px solid var(--line-200)!important}
#bidjs .nav-tabs>li>a{border-radius:0!important;border:0!important;border-bottom:2px solid transparent!important;
  margin:0 22px 0 0!important;padding:10px 0!important;background:transparent!important;
  font-family:var(--font-sans)!important;text-transform:uppercase;letter-spacing:var(--track-label);
  font-size:var(--text-label)!important;color:var(--text-muted)!important}
#bidjs .nav-tabs>li>a:hover{border-bottom-color:var(--line-400)!important;color:var(--ink-900)!important}
#bidjs .nav-tabs>li.active>a,#bidjs .nav-tabs>li.active>a:hover,#bidjs .nav-tabs>li.active>a:focus{
  border-bottom-color:var(--brass-600)!important;color:var(--ink-900)!important;background:transparent!important}

/* --- carousel chrome: dark scrim discs instead of bare white glyphs --- */
#bidjs .embla__button{background:rgba(24,24,24,.66)!important;border:0!important;border-radius:0!important;
  width:38px!important;height:38px!important;color:var(--paper-50)!important;
  transition:background var(--dur-fast) var(--ease-out)!important;opacity:1!important}
#bidjs .embla__button:hover{background:var(--brass-600)!important}
#bidjs .embla__button svg{fill:currentColor!important;stroke:currentColor!important;width:14px;height:14px}
#bidjs .carousel__image-count{font-family:var(--font-sans)!important;font-size:var(--text-caption)!important;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)!important}

/* --- lot-page navigation + thumbnails --- */
#bidjs .listing-single-nav__item,#bidjs .listing-single-nav__item a{
  font-family:var(--font-sans)!important;text-transform:uppercase;letter-spacing:var(--track-label);
  font-size:var(--text-label)!important;color:var(--ink-900)!important}
#bidjs .listing-single-nav__item:hover,#bidjs .listing-single-nav__item a:hover{color:var(--brass-600)!important}
#bidjs .embla--thumb [class*="--active"]{outline:2px solid var(--brass-600)!important;outline-offset:-2px!important}

/* --- surface + remaining chrome --- */
#bidjs{background:var(--surface-page)!important}
#bidjs .listing-card__countdown,#bidjs .lot__status,#bidjs .lot__timings{
  font-family:var(--font-sans)!important;font-size:var(--text-caption)!important;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)!important}
#bidjs .listing-card__countdown--webcast{color:var(--state-live)!important}

/* BidJS ships its own SVG icon set; the design system has none, so they are
   recoloured to the ink/brass palette rather than left as browser defaults. */
#bidjs .lot__watch svg,#bidjs .lot__watch{color:var(--ink-900)!important;fill:currentColor!important}
#bidjs .lot__watch:hover svg,#bidjs .lot__watch--active svg{color:var(--brass-600)!important}
#bidjs .react-share__ShareButton svg{fill:var(--ink-900)!important}
#bidjs .react-share__ShareButton svg rect,#bidjs .react-share__ShareButton svg circle{fill:transparent!important}
#bidjs .react-share__ShareButton:hover svg{fill:var(--brass-600)!important}

/* Prices stay in the editorial serif even though their container is UI sans. */
#bidjs .lot__info--current-bid,#bidjs .lot__info--increment,#bidjs .lot__info--bid-count{
  font-family:var(--font-serif)!important;text-transform:none!important;letter-spacing:normal!important;
  color:var(--ink-900)!important}
#bidjs .lot__info--current-bid{font-size:var(--text-h4)!important;font-weight:var(--weight-serif-semibold)!important}
#bidjs .lot__info--increment{color:var(--text-muted)!important;font-size:var(--text-body-sm)!important}

/* --- remaining Bootstrap button variants + native controls --- */
#bidjs .btn-info{background:var(--ink-900)!important;border-color:var(--ink-900)!important;color:var(--paper-50)!important}
#bidjs .btn-info:hover,#bidjs .btn-info:focus{background:var(--brass-600)!important;border-color:var(--brass-600)!important}
#bidjs .btn-success{background:var(--olive-700)!important;border-color:var(--olive-700)!important;color:var(--paper-50)!important}
#bidjs .btn-danger{background:var(--oxblood-600)!important;border-color:var(--oxblood-600)!important;color:var(--paper-50)!important}
#bidjs .btn-warning{background:var(--brass-700)!important;border-color:var(--brass-700)!important;color:var(--paper-50)!important}
#bidjs .auction-view__toggle.active{background:var(--ink-900)!important;border-color:var(--ink-900)!important;color:var(--paper-50)!important}
#bidjs input[type=checkbox],#bidjs input[type=radio]{accent-color:var(--brass-600)!important;
  width:15px!important;height:15px!important;vertical-align:-2px}

/* react-share draws white glyphs on coloured tiles; strip the tile, ink the glyph. */
#bidjs .react-share__ShareButton svg path{fill:var(--ink-900)!important}
#bidjs .react-share__ShareButton:hover svg path{fill:var(--brass-600)!important}

/* --- final chrome pass ---
   The design system states overlays on imagery are a solid ink panel, never a
   translucent scrim, so the carousel controls are opaque rather than alpha-blended. */
#bidjs .embla__button{background:var(--ink-900)!important}
#bidjs .embla__button:hover{background:var(--brass-600)!important}
#bidjs .lot__info--bid-count{margin-right:6px!important}
#bidjs .lot__watch svg{width:18px!important;height:18px!important}

/* --- watch control ---------------------------------------------------------
   BidJS ships an outline star. The design system has no star: its icon set is
   eleven fine line glyphs and its stated rule is "Unicode does the iconography".
   The star is removed and replaced with the system's own `plus` path at the same
   spec — 24x24, 1.5 stroke, square caps, mitred joins — masked so it inherits the
   ink palette and picks up brass on hover.
   --------------------------------------------------------------------------- */
#bidjs .lot__watch svg{display:none!important}
#bidjs .lot__watch{display:inline-flex!important;align-items:center;justify-content:center;
  width:24px!important;height:24px!important;line-height:1;padding:0!important;
  color:var(--ink-900)!important;cursor:pointer}
#bidjs .lot__watch::before{content:"";display:block;width:18px;height:18px;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:18px 18px;mask-size:18px 18px;
  transition:background-color var(--dur-fast) var(--ease-out)}
#bidjs .lot__watch:hover{color:var(--brass-600)!important}
/* once a lot is watched the affordance becomes "remove" */
#bidjs .lot__watch--active::before,#bidjs .lot__watch[aria-pressed="true"]::before,
#bidjs .lot__watch.active::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E")}
#bidjs .lot__watch--active,#bidjs .lot__watch[aria-pressed="true"],#bidjs .lot__watch.active{
  color:var(--brass-600)!important}

/* --- live bidding (webcast) ------------------------------------------------
   BidJS requires a summary on every lot, so the house fills it with the title.
   It is already hidden on the catalogue and lot pages; the webcast console
   renders its own copies of the same field — under the lot in play, on every
   row of the running order, and in the lot modal — so those go too. The modal
   heading's summary paragraph carries no class of its own, hence the sibling
   selector. Scoped to .bidlogix-app rather than #bidjs because the modal is
   portalled into the separate #bidlogix-modal host.
   --------------------------------------------------------------------------- */
.bidlogix-app #inplay__content--summary,
.bidlogix-app .list-item__summary,
.bidlogix-app .listing-modal__heading + p{display:none!important}

/* ============================================================
   Media proportions
   Every photograph BidJS holds — sale collages and lot shots
   alike — is 4:3. The design-system plates ask for 16/9, 16/10
   and 1/1 and crop to fill, which cut the edges off the collages
   and sliced the ends off swords. Ratios are set to 4/3 at every
   call site; AuctionCard hard-codes 16/10 internally, so its
   plate (the first child of the card) is corrected here.
   `contain` is the safety net: if a sale ever uploads a banner
   that is not 4:3 it letterboxes on the plate ground instead of
   silently cropping.
   ============================================================ */
.zv-calendar > div > div:first-child{aspect-ratio:4 / 3!important}
.zv-shell .zv-hero-plate img,
.zv-shell .zv-calendar img,
.zv-shell .zv-g4 img{object-fit:contain!important}

/* ---- hero headline: steps down as the sale title grows ---- */
.zv-hero-grid{align-items:center;gap:var(--space-8,64px)}
.zv-hero--long h1{font-size:clamp(32px,3.4vw,50px)}
.zv-hero--xlong h1{font-size:clamp(28px,2.8vw,42px);letter-spacing:.03em}

/* ============================================================
   Mobile
   The design-system header and footer lay themselves out with
   inline styles and no breakpoints: the nav is flex-shrink:0 so
   it pushed itself off-screen, and the footer stayed on four
   columns, squeezing the logo (which has a fixed height and
   inherits max-width:100%) until it distorted. Both are corrected
   here rather than in ds/, which is generated and re-synced.
   ============================================================ */
@media (max-width:900px){
  /* nav gets its own full-width row and scrolls rather than clipping */
  .zv-shell header > div:last-child{flex-wrap:wrap!important;height:auto!important;
    padding-top:14px!important;padding-bottom:0!important;gap:14px!important}
  .zv-shell header nav{order:3;width:100%;flex-shrink:1!important;min-width:0;
    overflow-x:auto;gap:22px!important;padding:2px 0 12px;scrollbar-width:none}
  .zv-shell header nav::-webkit-scrollbar{display:none}

  /* footer: four columns is unreadable on a phone */
  .zv-shell footer > div > div:first-child{grid-template-columns:1fr 1fr!important;gap:32px!important}
  .zv-shell footer > div > div:first-child > div:first-child{grid-column:1 / -1}

  /* the collage leads on mobile instead of landing under the sale stats */
  .zv-hero-grid{gap:28px}
  .zv-hero-grid .zv-hero-plate{order:-1}

  /* italic EB Garamond at 14px in muted ink is not legible at this size */
  .zv-lede{font-style:normal;font-size:17px;color:var(--paper-100)}
  .zv-shell footer p{font-style:normal!important;font-size:14.5px!important;
    color:var(--paper-200)!important;max-width:46ch!important}
}
@media (max-width:560px){
  .zv-shell footer > div > div:first-child{grid-template-columns:1fr!important;gap:28px!important}
}

/* A fixed height plus the inherited max-width:100% distorts a logo the moment
   its column is narrower than the artwork. Never let the wordmark stretch. */
.zv-shell header img,.zv-shell footer img{width:auto!important;object-fit:contain}
/* The three partner logos are all 1300x200 PNGs. Reserve their box before they decode:
   unloaded lazy images were 0px wide, so the footer strip fitted on one line and grew
   ~34px (it wraps) when the logos loaded on reaching the page bottom — the document end
   moved after the scroll extent was fixed, which WebKit/iOS shows as a cut-off footer. */
.zv-shell footer img{aspect-ratio:13 / 2}

/* Balanced wrapping keeps a long sale title from orphaning its number on a
   line of its own. */
.zv-hero h1{text-wrap:balance}

@media (max-width:900px){
  /* full-width targets rather than two part-width buttons stacked ragged */
  .zv-hero-cta{flex-direction:column;align-items:stretch}
  .zv-hero-cta > *{width:100%}
  .zv-hero-cta button{width:100%}
}
@media (max-width:560px){
  /* Five sections will not fit one phone-width line at a legible size, and a
     sideways scroll just hides them. Wrap instead — every section stays visible. */
  .zv-shell header nav{flex-wrap:wrap!important;overflow:visible!important;
    gap:8px 16px!important;padding-bottom:14px}
  .zv-shell header nav a{font-size:10.5px!important;letter-spacing:.12em!important}
}

/* The footer's partner strip is a fixed-gap flex row with no wrap, so on a phone
   the last logo sat past the right edge and took the whole document with it. */
@media (max-width:700px){
  .zv-shell footer > div > div:last-child > div{flex-wrap:wrap!important;gap:14px 20px!important}
}

/* Admin demo: a 340px sidebar plus content does not fit a phone. */
.zv-admin-grid{grid-template-columns:340px 1fr}
@media (max-width:900px){
  .zv-admin-grid{grid-template-columns:1fr}
  .zv-admin-grid > div:first-child{position:static!important}
}

/* Section heads put the label and its "view all" link on one line; on a phone
   that squeezes both. Stack them. */
@media (max-width:640px){
  .zv-sechead{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ============================================================
   Dark mode
   The design system's components carry their colours as inline
   styles built from custom properties, so the whole theme is a
   redefinition of the palette — no component is touched and every
   hover state keeps working.

   The two ramps swap roles: `ink` stops meaning "dark" and starts
   meaning "the colour of type", `paper` stops meaning "light" and
   starts meaning "the colour of ground". The semantic aliases in
   ds/tokens/colors.css point at these, so they follow for free.

   `data-theme` is stamped on <html> before first paint by the
   script in index.html, so there is no flash and no second copy
   of this block under prefers-color-scheme.
   ============================================================ */
:root[data-theme="dark"]{
  --ink-900:#F4F0E6;   /* primary type */
  --ink-700:#DAD4C6;
  --ink-500:#A49D8D;   /* muted type — AA on the page ground */
  --ink-300:#837C6C;   /* faint type */
  --paper-0:#141310;   /* raised card */
  --paper-50:#0E0E0C;  /* page ground */
  --paper-100:#1A1916; /* panel */
  --paper-200:#232119; /* deep panel / hover fill */
  --line-200:#2C2A24;  /* hairlines */
  --line-400:#413D34;  /* strong rules */
  --brass-600:#C2A05C; /* accent, lifted to carry on a dark ground */
  --brass-700:#D8BC79; /* hover goes lighter, not darker */
  --oxblood-600:#C4584F;
  --olive-700:#8C8C68;
  color-scheme:dark;
}

/* Three regions are a dark surface in BOTH themes — the hero band, the footer
   and the announcement strip. Inside them the palette keeps its light-mode
   meaning, so `ink` is still the ground and `paper` is still the type, and
   everything nested (buttons on dark, eyebrows, rules) stays correct without a
   single component override. The announcement is matched as the first child
   only when a second follows it, since without one the header row is first. */
:root[data-theme="dark"] .zv-band,
:root[data-theme="dark"] .zv-shell footer,
:root[data-theme="dark"] .zv-shell header > div:first-child:not(:last-child){
  --ink-900:#181818;
  --ink-700:#33312C;
  --ink-500:#6F6A5E;
  --ink-300:#A19A8A;
  --paper-0:#FFFFFF;
  --paper-50:#FBFAF7;
  --paper-100:#F5F2EA;
  --paper-200:#ECE7DB;
  --line-200:#3A3830;
  --line-400:#4E4B41;
  --brass-600:#C9AE6E;
  --brass-700:#DCC58C;
  /* the semantic aliases are computed where they are declared, so redefining
     the ramps alone would leave them pointing at the root's dark values */
  --text-body:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-300);
  --text-inverse:var(--paper-50);
  --text-accent:var(--brass-600);
  --surface-page:var(--paper-50);
  --surface-card:var(--paper-0);
  --surface-panel:var(--paper-100);
  --surface-dark:var(--ink-900);
  --border-hairline:var(--line-200);
  --border-strong:var(--line-400);
  --border-ink:var(--ink-900);
  --accent:var(--brass-600);
  --accent-hover:var(--brass-700);
  --accent-on-dark:var(--brass-300);
  --rule-hairline:1px solid var(--line-200);
  --rule-strong:1px solid var(--line-400);
  --rule-ink:1px solid var(--ink-900);
  --rule-double:4px double var(--line-400);
}

/* The hero band's ground comes from --surface-dark, which now resolves inside
   the restored scope above; it lands on the same charcoal as light mode, which
   reads as a raised band against the near-black page rather than as a hole. */

/* Plate grounds: the dark variant asks for --ink-700, which is type-coloured in
   dark mode, so a letterboxed image would sit on a pale slab. */


/* --- theme toggle: sits in the header action group beside Sign In --- */
.zv-theme-toggle{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--ink-900);transition:color var(--dur-fast) var(--ease-out)}
.zv-theme-toggle:hover{color:var(--brass-600)}
.zv-theme-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --- account menu: replaces the design system's inert "Sign In" label --- */
.zv-ds-signin{display:none!important}
.zv-account{position:relative}
.zv-account-btn{font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;background:transparent;border:0;
  padding:0 0 4px;color:var(--ink-900);border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease-out)}
.zv-account-btn:hover,.zv-account-btn[aria-expanded="true"]{color:var(--brass-600)}
.zv-account-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.zv-account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:190px;
  margin:0;padding:6px 0;list-style:none;background:var(--paper-50);
  border:1px solid var(--line-200);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.zv-account-menu a{display:block;padding:10px 18px;font-family:var(--font-sans);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-900);text-decoration:none}
.zv-account-menu a:hover,.zv-account-menu a:focus-visible{color:var(--brass-600);background:var(--paper-100,transparent)}
.zv-account-menu li:last-child{border-top:1px solid var(--line-200);margin-top:4px;padding-top:4px}

/* ============================================================
   Dark mode: BidJS
   BidJS ships Bootstrap 3, whose surfaces are literal whites we
   do not control. The rules above already carry anything mapped
   to a token; these cover what Bootstrap paints directly.
   ============================================================ */
:root[data-theme="dark"] #bidjs .form-control,
:root[data-theme="dark"] #bidjs select,
:root[data-theme="dark"] #bidjs textarea,
:root[data-theme="dark"] #bidjs input[type=text],
:root[data-theme="dark"] #bidjs input[type=email],
:root[data-theme="dark"] #bidjs input[type=password],
:root[data-theme="dark"] #bidjs input[type=number]{
  background:var(--surface-card)!important;color:var(--text-body)!important}
:root[data-theme="dark"] #bidjs .form-control::placeholder{color:var(--text-faint)!important}
:root[data-theme="dark"] #bidjs .input-group-addon{
  background:var(--surface-panel)!important;color:var(--text-muted)!important;
  border-color:var(--border-hairline)!important}
:root[data-theme="dark"] .bidlogix-app .modal-content,
:root[data-theme="dark"] .bidlogix-app .popover,
:root[data-theme="dark"] .bidlogix-app .dropdown-menu{
  background:var(--surface-card)!important;color:var(--text-body)!important;
  border-color:var(--border-hairline)!important}
:root[data-theme="dark"] .bidlogix-app .modal-header,
:root[data-theme="dark"] .bidlogix-app .modal-footer{border-color:var(--border-hairline)!important}
:root[data-theme="dark"] .bidlogix-app .dropdown-menu>li>a{color:var(--text-body)!important}
:root[data-theme="dark"] .bidlogix-app .dropdown-menu>li>a:hover{
  background:var(--surface-panel)!important;color:var(--accent)!important}
:root[data-theme="dark"] #bidjs .table>tbody>tr,
:root[data-theme="dark"] #bidjs .table>tbody>tr>td,
:root[data-theme="dark"] #bidjs .table-striped>tbody>tr:nth-of-type(odd){
  background:transparent!important;color:var(--text-body)!important}
:root[data-theme="dark"] #bidjs .list-group-item,
:root[data-theme="dark"] #bidjs .panel-heading,
:root[data-theme="dark"] #bidjs .panel-footer{
  background:var(--surface-panel)!important;color:var(--text-body)!important;
  border-color:var(--border-hairline)!important}
:root[data-theme="dark"] #bidjs hr{border-color:var(--border-hairline)!important}
/* ---- canvas colour (overscroll) ----
   html paints the canvas; without this the body's page colour propagates to it and the
   bounce past the footer shows a light strip. app.jsx adds .zv-end in the lower half. */
html{background:var(--surface-page)}
html.zv-end{background:#181818}

/* ---- footer partner logos are links to the house's page on each platform ---- */
.zv-shell footer a.zv-partner{display:inline-flex;align-items:center;line-height:0;padding:6px 0}
.zv-shell footer a.zv-partner img{display:block;transition:filter var(--dur-fast) var(--ease-out)}
.zv-shell footer a.zv-partner:hover img{filter:brightness(1.6)}
.zv-shell footer a.zv-partner:focus-visible{outline:2px solid var(--brass-300);outline-offset:4px}

/* sale tagline under the hero title: 2-3 lines, never longer */
.zv-lede.zv-tagline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.zv-lede.zv-tagline{max-width:none}
@media (max-width:640px){.zv-lede.zv-tagline{-webkit-line-clamp:5;line-clamp:5}}

/* ---- white product photography on dark grounds ----
   Studio shots are on pure white, which glares on the charcoal hero band (both themes) and
   on the near-black page in dark mode. The image is multiplied onto a warm stone plate:
   the white background becomes the plate colour and reads as a mount, while the objects
   keep their colour (a slight warm cast, ~17% darker, no hue shift). Tried and rejected:
   a mid-grey plate (objects visibly dulled), brightness/contrast filter (cold, flat grey).
   Plates carry an inline background, hence !important. */
.zv-shell .zv-hero-plate > div,
:root[data-theme="dark"] .zv-shell .zv-photo > div,
:root[data-theme="dark"] .zv-shell .zv-calendar > div > div:first-child,
:root[data-theme="dark"] .zv-shell .zv-g4 a > div:first-child{background:#d0cabb!important}
.zv-shell .zv-hero-plate img,
:root[data-theme="dark"] .zv-shell .zv-photo img,
:root[data-theme="dark"] .zv-shell .zv-calendar img,
:root[data-theme="dark"] .zv-shell .zv-g4 img{mix-blend-mode:multiply}
:root[data-theme="dark"] #bidjs .thumbnail{background:var(--paper-200)!important}

/* ---- keyboard focus: one visible ring for every link and button ---- */
.zv-shell a:focus-visible,.zv-shell button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- short pages (404, a failed catalogue load): footer sits at the bottom of the
   viewport instead of leaving page-coloured space beneath it. dvh so the iOS toolbar
   does not make the page taller than the visible area. ---- */
.zv-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.zv-shell > footer{margin-top:auto}

/* ---- contrast ----
   The DS brass (#96742F) is 4.16:1 on the page ground, under the 4.5:1 AA floor for the
   small caps eyebrows and the active nav item. Light mode only; dark mode has its own. */
:root{--brass-600:#866828}
/* links inside running text are told apart by more than colour */
.zv-prose a,.zv-container p a{text-decoration:underline;text-underline-offset:3px}
/* "BID VIA" sits in a block faded to 60%; start from the lightest ink so the result stays readable */
.zv-shell footer > div > div:nth-child(2) > div > span{color:var(--paper-50)!important}

/* ---- text pages (Conditions of Sale, Shipping & Collection) ---- */
.zv-legal h2{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-body);margin:48px 0 16px;padding-top:24px;border-top:var(--rule-hairline)}
.zv-legal h2:first-child{margin-top:0;padding-top:0;border-top:0}