/* ==========================================================================
   BWA THEME v2 — Best Wine Auctions auction platform
   CSS reskin. Load AFTER site.min.css and custom.min.css.

   Reference design: "BWA Dashboard Reskin Dark.dc.html"
   Dark page · white content surfaces · sand accents · gold hairlines

   Sections 1-14 are the designer's theme, unchanged apart from real class
   names appended to a few selector lists.
   Section 15 is the app binding layer: the designer's file was written against
   idealised class names, so everything that only exists in this Blazor app
   (.hero, .top-bar, .products-grid, .sidebar internals, .main-footer, the
   status-indicator classes) is mapped here rather than by editing above.
   ========================================================================== */

/* ---- 1. FONTS ------------------------------------------------------------ */
/* Corporate ID guide (HANDOFF §4): Playfair Display for titles, Inter for body.
   Cormorant Garamond / Jost are gone. Self-hosted under wwwroot/fonts/ so the
   page never waits on fonts.googleapis.com and no third party sees a request.

   Google ships both families as VARIABLE woff2 — one file per subset carries
   every weight — which is why each face declares a weight RANGE rather than a
   single number. Two subsets each: latin covers the site, latin-ext carries the
   accented Dutch/French glyphs. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../../fonts/AE_BestWineAuctions/playfairdisplay-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../../fonts/AE_BestWineAuctions/playfairdisplay-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/AE_BestWineAuctions/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/AE_BestWineAuctions/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 2. TOKENS ----------------------------------------------------------- */
/* The four corporate colours (HANDOFF §4) are the whole brand palette:
     #d5b98e beige copy · #d8c0a3 beige background · #000000 black · #ebe9e9 white
   Everything below is either one of those four, or one of the supporting greys
   the guide explicitly carries over (#5C4C31, #2A241C, #A79E90, #FFFFFF,
   #1A1712, #3E362C). The old Cormorant/Jost gold tones — #D9C08A, #B9A277,
   #8A6A24, #DBBFA4, #C9A87F — are gone; nothing may reintroduce them. */
:root {
  /* Page & chrome (black) */
  --bwa-page:        #000000;  /* body background                            */
  --bwa-chrome:      #000000;  /* header + footer                            */
  --bwa-on-dark:     #ebe9e9;  /* text on chrome                             */
  --bwa-on-dark-dim: #A79E90;
  --bwa-line-dark:   #5C4C31;  /* gold hairline on black — the signature line */
  --bwa-line-chrome: #2A241C;  /* divider inside header/footer               */

  /* Content surfaces (light) */
  --bwa-surface:      #FFFFFF; /* cards, filter panels, inputs               */
  --bwa-surface-hover:#FBF7F1; /* row hover / table zebra on white           */
  --bwa-line-light:   #E8DCCB; /* hairline on white                          */

  /* Beige background — solid accent fills only, never a full page ground */
  --bwa-sand:      #d8c0a3;
  --bwa-sand-deep: #d5b98e;

  /* Beige copy. -mid and -dark are no longer separate tones: on black the
     secondary gold IS the hairline, and on white the beige copy is too pale to
     read, so both resolve to the gold hairline colour. */
  --bwa-gold:       #d5b98e;  /* beige copy on black: headings, links, fills */
  --bwa-gold-mid:   #5C4C31;  /* rules and secondary gold on black           */
  --bwa-gold-dark:  #5C4C31;  /* gold on white: links, chevrons, accents     */

  /* Ink */
  --bwa-ink:    #1A1712;  /* headings, prices                               */
  --bwa-body:   #3E362C;  /* body copy on light                             */
  --bwa-muted:  #6B5E4E;
  --bwa-faint:  #8A7963;  /* micro-labels                                   */

  /* Bid states. Foregrounds are the handoff palette: #4E6B4A highest,
     #9A6516 below minimum, #8C2F39 outbid. The bg/line tints are DERIVED to
     match the pattern of the original pair — brief 3 §5b holds the
     authoritative triplets and these should be checked against it. */
  --bwa-highest-fg:  #4E6B4A;  --bwa-highest-bg:  #EDF2E8;  --bwa-highest-line:  #9FB295;
  --bwa-below-fg:    #9A6516;  --bwa-below-bg:    #F8EBD2;  --bwa-below-line:    #D2AE72;
  --bwa-outbid-fg:   #8C2F39;  --bwa-outbid-bg:   #F6E3DC;  --bwa-outbid-line:   #C08A80;

  /* Hero figure tints — the panel signals its state from the price itself. */
  --bwa-highest-hero: #C7D9B4;
  --bwa-below-hero:   #E8C583;
  --bwa-outbid-hero:  #E3A79E;

  /* "Closed" is a lifecycle state, not a bid state; brief 1 §5.7 gives it the
     same triplet as outbid. Aliased so the intent stays readable. */
  --bwa-closed-fg:   var(--bwa-outbid-fg);
  --bwa-closed-bg:   var(--bwa-outbid-bg);
  --bwa-closed-line: var(--bwa-outbid-line);

  /* Type — two faces only. Playfair for titles, prices and footer headings;
     Inter for everything else. Prices are always the serif. */
  --bwa-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bwa-ui:      'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Geometry — the brand is square. Nothing is rounded, nothing has a shadow. */
  --bwa-radius: 0;
}

/* ---- 3. GLOBAL RESET OF THE OLD LOOK ------------------------------------- */
/* The current theme is rounded + shadowed. Strip both globally, then rebuild.
   Third-party widgets are excluded: photoswipe, lightgallery, glightbox,
   splide, the phone-input plugin and the cookie banner ship their own
   geometry and look broken squared off.

   `.bwa-round` is the ONLY in-house exception: brief 5 §5 sanctions exactly two
   round shapes — the auction status pill and the circular timing icons. Opting
   out here rather than fighting this rule: seven :not([attr]) clauses give it a
   specificity of (0,7,0), so an ordinary class + !important would still lose. */
*:not([class*="pswp"]):not([class*="lg-"]):not([class*="glightbox"]):not([class*="splide"]):not([class*="iti"]):not([class*="cc-"]):not([class*="cc_"]):not([class*="bwa-round"]),
*:not([class*="pswp"]):not([class*="lg-"]):not([class*="cc-"]):not([class*="bwa-round"])::before,
*:not([class*="pswp"]):not([class*="lg-"]):not([class*="cc-"]):not([class*="bwa-round"])::after {
  border-radius: var(--bwa-radius) !important;
}
.card, .panel, .btn, .form-control, .form-select, .modal-content, .dropdown-menu,
.well, .thumbnail, .alert, .badge, .product, .lot-card { box-shadow: none !important; }

/* ---- 4. BASE ------------------------------------------------------------- */
body {
  font-family: var(--bwa-ui);
  font-weight: 300;              /* Inter Light, per the corporate ID guide */
  font-size: 16px;
  line-height: 1.65;
  color: var(--bwa-on-dark-dim);
  background: var(--bwa-page);
  -webkit-font-smoothing: antialiased;
}
.page, .min-vh-90 { background: var(--bwa-page); }

/* Corporate ID title sizes: 61 / 49 / 23px, Playfair Display Medium.
   Weight 500 (not 300): Playfair's axis starts at 400, so anything lighter was
   being synthesised by the browser and read as a smeared regular. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--bwa-display);
  font-weight: 500;
  color: var(--bwa-on-dark);
  letter-spacing: -.005em;
  line-height: 1.1;
}
h1, .h1 { font-size: 61px; text-align: center; }
h2, .h2 { font-size: 49px; }
h3, .h3 { font-size: 23px; }

/* The gold rule under the page title. No markup needed — ::after on the h1. */
h1::after, .hero-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--bwa-gold-mid);
  margin: 26px auto 0;
}

/* Micro-labels: 10px, .2em tracking, uppercase. Used for every meta label.
   NOTE .h6 is deliberately NOT in this list — Bootstrap's .h6 is used on
   content headings in this app and would be shrunk to a label. */
h5, h6, label, th, legend, caption, .label-micro, .row-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
}

a { color: var(--bwa-gold); text-decoration: none; transition: color .15s; }
a:hover, a:focus { color: var(--bwa-on-dark); text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--bwa-line-dark); }
::selection { background: var(--bwa-line-dark); color: var(--bwa-on-dark); }

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  justify-content: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  padding: 30px 0 0;
  /* site.css zeroes this, which left the trail sitting on top of the page
     heading. Theme sheet loads last, so this wins on source order. */
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--bwa-gold); }
.breadcrumb .breadcrumb-item.active { color: var(--bwa-faint); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--bwa-line-dark); }

/* ---- 5. HEADER ----------------------------------------------------------- */
.navbar, header.site-header, header.header .navbar {
  background: var(--bwa-chrome);
  border-bottom: 0;
  box-shadow: none;
  padding: 16px 40px;
}
/* Logo: the client's real seal, used as-is — never redrawn, never recoloured.
   It is a circle rather than the old wide wordmark, so it needs more height to
   carry the same optical weight in the header band. */
.navbar-brand img, .site-logo img, .navbar-brand img.logo-img {
  height: 62px;
  width: auto;
  max-width: none;   /* .img-fluid caps at 100% of a flex parent that can be 0 */
}

.navbar-nav > li > a, .navbar .nav-link, .main-menu a {
  font-family: var(--bwa-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bwa-on-dark);
  white-space: nowrap;
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
}
.navbar-nav > li > a:hover, .navbar .nav-link:hover { color: var(--bwa-gold); }
.navbar-nav > li.active > a, .navbar .nav-link.active {
  color: #FFFFFF;
  border-bottom-color: var(--bwa-gold-mid);
}
/* Login link — gold with a permanent gold underline */
.nav-login, .login-link, .navbar-icon-link {
  color: var(--bwa-gold) !important;
  border-bottom: 1px solid var(--bwa-gold-mid) !important;
}
.navbar-toggler { border-color: var(--bwa-line-dark); color: var(--bwa-gold); }
.navbar-toggler .fa { color: var(--bwa-gold); }

/* Site-wide search bar strip under the header */
.search-bar-strip, .top-bar {
  background: var(--bwa-chrome);
  border-bottom: 1px solid var(--bwa-line-dark);
  padding: 14px 40px;
}

/* ---- 6. FILTER RAIL (left sidebar) --------------------------------------- */
/* Panels are WHITE with a gold hairline border, sitting on the dark page. */
.filter-panel, .sidebar .panel, .sidebar .card, .categories, .vat-filter {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-body);
}
.filter-panel + .filter-panel { border-top: 0; }

.filter-panel .panel-heading, .vat-filter .heading {
  background: var(--bwa-surface);
  border-bottom: 1px solid var(--bwa-line-light);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  line-height: 1.7;
  padding: 20px 22px;
}

/* Checkboxes/radios stay in the DOM for Blazor binding + screen readers. */
.filter-panel input[type="checkbox"],
.filter-panel input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.filter-row, .filter-panel li, .categories li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-size: 14px;
  color: var(--bwa-body);
  border-bottom: 1px solid var(--bwa-line-light);
  cursor: pointer;
  background: transparent;
}
.filter-row:last-child, .filter-panel li:last-child { border-bottom: 0; }
.filter-row:hover, .filter-panel li:hover { background: var(--bwa-surface-hover); }
.filter-row.active, .filter-panel li.active, .categories li.open > a {
  background: var(--bwa-sand);
  color: var(--bwa-ink);
  box-shadow: inset 3px 0 0 var(--bwa-gold-dark);
}
.filter-count, .lot-count { font-size: 12px; color: var(--bwa-faint); }
.categories .chevron { color: var(--bwa-gold-dark); font-size: 15px; transition: transform .15s; }
.categories li.open .chevron { color: var(--bwa-gold-dark); transform: rotate(45deg); }

.sidebar > .section-title {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bwa-line-dark);
  margin-top: 34px;
}

/* ---- 7. FORM CONTROLS ---------------------------------------------------- */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"] {
  font-family: var(--bwa-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--bwa-ink);
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  border-radius: var(--bwa-radius);
  padding: 13px 16px;
  box-shadow: none;
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus {
  border-color: var(--bwa-gold);
  box-shadow: none;
  outline: none;
}
.form-control::placeholder { color: var(--bwa-faint); }
/* Native select arrow -> gold chevron */
select, .form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A6A24' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* ---- 8. BUTTONS ---------------------------------------------------------- */
.btn {
  font-family: var(--bwa-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-radius: var(--bwa-radius);
  padding: 15px 34px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
/* Primary = gold fill, near-black text. SEARCH / PLACE BID / BUY NOW. */
.btn-primary, .btn-search, .btn-bid,
.btn.place-bid, .btn.buy-now {
  background: var(--bwa-gold);
  border-color: var(--bwa-gold);
  color: var(--bwa-chrome);
}
.btn-primary:hover, .btn-search:hover, .btn-bid:hover,
.btn.place-bid:hover, .btn.buy-now:hover {
  background: var(--bwa-sand); border-color: var(--bwa-sand); color: var(--bwa-chrome);
}
/* Secondary = white with a gold hairline */
.btn-secondary, .btn-default, .btn-outline-primary,
.btn-outline-dark, .btn.view-details {
  background: var(--bwa-surface);
  border-color: var(--bwa-line-dark);
  color: var(--bwa-body);
}
.btn-secondary:hover, .btn-default:hover,
.btn-outline-dark:hover, .btn.view-details:hover {
  background: var(--bwa-sand); color: var(--bwa-ink); border-color: var(--bwa-line-dark);
}
.btn:disabled, .btn.disabled { background: var(--bwa-line-chrome); border-color: var(--bwa-line-dark); color: var(--bwa-line-dark); }
.btn:focus { box-shadow: none; outline: 1px solid var(--bwa-gold); }

/* Icon buttons in the sort/view toolbar */
.toolbar .btn-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bwa-sand);
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-gold-dark);
  padding: 0;
}
.toolbar .btn-icon.is-primary { background: var(--bwa-gold); color: var(--bwa-chrome); border-color: var(--bwa-gold); }

/* ---- 9. LOT-RANGE PAGINATION (1-121, 122-241, …) -------------------------- */
/* One flush block of pills separated by 1px gold gaps — no gaps, no radius. */
.lot-ranges, .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--bwa-line-dark);
  border: 1px solid var(--bwa-line-dark);
  padding: 0;
  margin: 0;
}
.lot-ranges a, .pagination .page-link {
  flex: 1 1 auto;
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
  background: var(--bwa-sand);
  color: var(--bwa-body);
  border: 0;
  cursor: pointer;
}
.lot-ranges a:hover, .pagination .page-link:hover { background: var(--bwa-sand); color: var(--bwa-ink); }
.lot-ranges a.active,
.pagination .page-item.active .page-link { background: var(--bwa-gold); color: var(--bwa-chrome); }
.pagination .page-item { display: flex; flex: 1 1 auto; }
.pagination .page-item.disabled .page-link { background: var(--bwa-line-light); color: var(--bwa-on-dark-dim); }

/* ---- 10. LOT GRID & LOT CARD --------------------------------------------- */
/* The grid is a single ruled block: 1px gold gaps, one outer gold border. */
/* Cards are spaced, not flush. The reference design ruled them together with
   1px gold gaps, but the live site separates them with whitespace and that is
   what the client wants kept — so each card carries its own hairline instead. */
.lot-grid, .row.lots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* auto, not 1fr: the cards are subgrids (§26) and size their own row tracks.
     row-gap must stay 0 — a row gap on this grid falls *inside* every card and
     splits it into three floating pieces. Row spacing is the card's margin. */
  grid-auto-rows: auto;
  column-gap: 24px;
  row-gap: 0;
  background: transparent;
  border: 0;
  margin: 0;
}
/* Bootstrap columns inside the grid must not add gutters. */
.lot-grid > [class*="col-"], .row.lots > [class^="col-"] {
  padding: 0;
  width: 100%;
  max-width: none;
  flex: none;
}

.lot-card, .product-item, .card.lot {
  background: var(--bwa-surface);
  border: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  cursor: pointer;
}
.lot-card:hover { background: var(--bwa-surface-hover); }

/* Title — shown in FULL, never clamped (lot-card brief §3/§8). Cards stay
   aligned across a row via the subgrid in §26, not via a fixed height. */
.lot-card .lot-title, .product-item .title {
  font-family: var(--bwa-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--bwa-ink);
  text-transform: none;
  padding: 18px 20px 16px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bwa-line-light);
  /* A long producer name must wrap rather than widen the card past its column. */
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.lot-card .lot-title a { color: var(--bwa-ink); }
.lot-card .lot-title a:hover { color: var(--bwa-gold-dark); }

/* Image band — fixed height, white, contained (never crop a bottle) */
.lot-card .lot-image, .product-item img {
  height: 300px;
  width: 100%;
  flex-shrink: 0;
  background: #FFFFFF;
  object-fit: contain;
  border-bottom: 1px solid var(--bwa-line-light);
  display: block;
}

/* Price block — pinned to the bottom of the card */
.lot-card .lot-footer, .product-item .info {
  padding: 16px 20px 20px;
  margin-top: auto;
  border-top: 0;
}

.lot-card .row-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bwa-faint); }
.lot-card .price, .lot-card .current-bid {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  color: var(--bwa-ink);
}
.lot-card .bid-count { font-size: 14px; color: var(--bwa-body); }
.lot-card .closing-note { font-size: 12px; letter-spacing: .1em; color: var(--bwa-muted); margin-top: 13px; }

/* Watchlist heart */
.lot-card .favourite, .lot-card .favourite svg, .lot-card .favourite i { color: var(--bwa-gold-dark); }
.lot-card .favourite.is-active { color: var(--bwa-closed-fg); }

/* ---- 11. STATUS PILLS ---------------------------------------------------- */
.badge, .label, .lot-status {
  display: inline-block;
  border-radius: var(--bwa-radius);
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--bwa-line-light);
  background: var(--bwa-surface-hover);
  color: var(--bwa-body);
}
/* The bid state lives on the card (@lot.background_indicator), not on the pill,
   so each state is matched card-scoped as well as directly on the pill.

   Order matters: closed is listed first so an active bid state below can win
   on a card that carries both. */

/* Closed — lifecycle, shares the outbid triplet per brief 1 §5.7. */
.lot-status.closed, .badge-danger {
  background: var(--bwa-outbid-bg); border-color: var(--bwa-outbid-line); color: var(--bwa-outbid-fg);
}
/* Outbid */
.lot-status.losing,
.lot-card.losing .lot-status,
.product.losing .lot-status {
  background: var(--bwa-outbid-bg); border-color: var(--bwa-outbid-line); color: var(--bwa-outbid-fg);
}
/* Below minimum — its own state now. It was previously painted as outbid, so a
   reserve-not-met lot was indistinguishable from a losing one. */
.lot-status.winner_below_minimum, .badge-warning,
.lot-card.winner_below_minimum .lot-status,
.product.winner_below_minimum .lot-status {
  background: var(--bwa-below-bg); border-color: var(--bwa-below-line); color: var(--bwa-below-fg);
}
/* Highest bidder / open */
.lot-status.open, .badge-success,
.lot-status.highest_bidder, .lot-status.highest_bidder_autobid,
.lot-card.highest_bidder .lot-status,
.lot-card.highest_bidder_autobid .lot-status,
.product.highest_bidder .lot-status,
.product.highest_bidder_autobid .lot-status {
  background: var(--bwa-highest-bg); border-color: var(--bwa-highest-line); color: var(--bwa-highest-fg);
}
/* The status colour lives on the pill, not on the card body. */
.lot-card.losing, .lot-card.highest_bidder,
.lot-card.highest_bidder_autobid, .lot-card.winner_below_minimum { background: var(--bwa-surface); }

/* ---- 12. MODALS (bid preview, terms, login prompt) ----------------------- */
.modal-content { background: var(--bwa-surface); border: 1px solid var(--bwa-line-dark); }
.modal-header { background: var(--bwa-chrome); border-bottom: 0; padding: 24px 30px; }
.modal-title { font-family: var(--bwa-display); font-weight: 500; font-size: 27px; color: var(--bwa-ink); }
.modal-header .modal-title { color: var(--bwa-gold); }
.modal-header .btn-close, .modal-header .close { color: var(--bwa-gold); opacity: 1; text-shadow: none; }
.modal-body { padding: 30px; color: var(--bwa-body); }
.modal-body .table td { border-color: var(--bwa-line-light); }
.modal-footer { border-top: 1px solid var(--bwa-line-light); padding: 20px 30px; }
.modal-backdrop.show { background: var(--bwa-chrome); opacity: .6; }

/* ---- 13. TABLES (bid history, results) ----------------------------------- */
.table { background: var(--bwa-surface); border: 1px solid var(--bwa-line-dark); color: var(--bwa-body); }
.table th {
  background: var(--bwa-surface-hover);
  border-bottom: 1px solid var(--bwa-line-light);
  font-size: 10px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bwa-faint);
  padding: 16px 24px;
}
.table td { border-top: 0; border-bottom: 1px solid var(--bwa-line-light); padding: 20px 24px; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }
.table-hover > tbody > tr:hover > td { background: var(--bwa-surface-hover); }

/* ---- 14. FOOTER ---------------------------------------------------------- */
footer, .site-footer, footer.main-footer {
  background: var(--bwa-chrome);
  color: var(--bwa-on-dark);
  padding: 58px 40px 34px;
  border-top: 1px solid var(--bwa-line-dark); /* custom.css draws a #f4f4f4 rule here */
}
footer h5, footer h6, .site-footer .column-title, footer .FooterFontColor {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bwa-gold);
}
/* Short gold rule under each footer heading — no markup needed */
footer h5::after, footer h6::after,
.site-footer .column-title::after, footer .FooterFontColor::after {
  content: "";
  display: block;
  width: 38px; height: 1px;
  background: var(--bwa-gold-mid);
  margin: 14px 0 20px;
}
footer a, .site-footer a { font-size: 14px; font-weight: 300; color: var(--bwa-on-dark); }
footer a:hover, .site-footer a:hover { color: var(--bwa-gold); }
.footer-tagline { font-style: italic; font-size: 15px; color: var(--bwa-gold); }
.footer-bottom {
  border-top: 1px solid var(--bwa-line-dark);
  margin-top: 44px;
  padding-top: 34px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--bwa-on-dark);
}
/* The seal above the footer's first column, matching the header mark. */
.bwa-footer-seal { display: block; height: 96px; width: auto; margin: 0 0 22px; }

/* Carrier / partner logos strip — needs light-on-dark source files. */
.footer-partners { display: flex; justify-content: center; align-items: center; gap: 96px; padding-bottom: 52px; }
.footer-partners img { height: 34px; width: auto; }

/* ==========================================================================
   15. BWA APP BINDINGS
   Real class names from this codebase, mapped onto the design above.
   ========================================================================== */

/* --- 15.1 Page shell ------------------------------------------------------ */
.hero, section.hero { background: var(--bwa-page); border-top: 0 !important; }
.hero-content { padding-bottom: 46px; }
.hero-heading { color: var(--bwa-on-dark); }

/* The general search strip above the header. */
.top-bar .form-control.generalSearchBar { border-right: 0; }
.top-bar .input-group-text.button-search-general {
  background: var(--bwa-gold);
  color: var(--bwa-chrome);
  border: 1px solid var(--bwa-gold);
  cursor: pointer;
}
.top-bar .searchIcon { color: var(--bwa-chrome); }

/* --- 15.2 Toolbar above the grid ----------------------------------------- */
.product-grid-header {
  display: block;
  background: transparent;
  border: 0;
  padding: 0 0 18px;
  margin-bottom: 10px;
}
.product-grid-header .btn { padding: 13px 28px; }

/* Sort control. custom.css builds it from a --color-tertiary (magenta) disc
   plus a 56px ::before ring with a 30px radius; the global radius reset turns
   that ring into a large magenta square. Drop the ring and make the control
   the 40px sand square the brief asks for in §5.5. */
.sort-button {
  width: 40px; height: 40px;
  background-color: var(--bwa-sand);
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-gold-dark);
  overflow: visible;
}
.sort-button::before { display: none !important; }
.sort-button span, .sort-button span::before, .sort-button span::after { background: var(--bwa-gold-dark); }

/* --- 15.3 Filter rail ----------------------------------------------------- */
/* The rail is a stack of white panels on the dark page. */
.sidebar .block-toggler {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  border-bottom: 1px solid var(--bwa-line-light);
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  padding: 20px 22px !important;
  margin-bottom: 0 !important;
}
.sidebar .nav.nav-pills {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  border-top: 0;
  margin-bottom: 0;
}
.sidebar .nav.nav-pills .nav.nav-pills { border: 0; }
/* Filter rows */
.sidebar .nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bwa-body);
  border-bottom: 1px solid var(--bwa-line-light);
  border-radius: 0;
  cursor: pointer;
  background: transparent;
}
.sidebar .nav-link:hover { background: var(--bwa-surface-hover); color: var(--bwa-ink); }

/* Parent category rows are accordion headers, and the markup hardcodes .active
   on every single one of them — so .active cannot mean "selected" here, or the
   whole rail fills with sand. They stay plain rows. */
.sidebar .sidebar-menu-item > .nav-link,
.sidebar .sidebar-menu-item.active > .nav-link {
  background: transparent;
  box-shadow: none;
  color: var(--bwa-ink);
  font-weight: 400;
}
.sidebar .sidebar-menu-item > .nav-link:hover { background: var(--bwa-surface-hover); }

/* §5.3 wants the rail's panels stacked flush. Each parent category is its own
   .expand-lg > .nav-pills block and the markup separates them with mb-2 / mb-3
   / mt-4 utilities, so the gaps read as thick bands between the rows. */
.sidebar .expand-lg,
.sidebar .expand-lg > .nav.nav-pills,
.sidebar .sidebar-menu-item,
.sidebar .nav.nav-pills .collapse { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Real selection. The VAT filter marks its chosen row with fw-bold, which is
   the only genuine selection signal this markup carries. */
.sidebar .nav-link.fw-bold {
  background: var(--bwa-sand);
  color: var(--bwa-ink);
  box-shadow: inset 3px 0 0 var(--bwa-gold-dark);
}
/* Per-category lot count — the brief's "lot count" slot already exists here. */
.sidebar .sidebar-badge {
  font-size: 12px !important;
  font-weight: 400;
  color: var(--bwa-faint) !important;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  padding: 0;
}
.sidebar .nav-link.fw-bold .sidebar-badge { color: var(--bwa-ink) !important; }

/* --- 15.6 Homepage auction card ------------------------------------------ */
/* The auction title uses .text-black-100, a grey that disappears against the
   near-black card. Scoped to the title block only: the same class also sits on
   the anchor wrapping the images and the start/end date panel, and that panel
   has a light background — turning it white made the dates unreadable. */
.bg-title .text-theme,
.bg-title .text-theme .text-black-100 { color: #FFFFFF !important; }
.bg-title .h6 { color: var(--bwa-ink); }

/* The start/end date panel is a light surface — keep its text ink whatever the
   wrapping anchor inherits. */
.bg-title .bg-gray-100,
.bg-title .bg-gray-100 span,
.bg-title .bg-gray-100 div { color: var(--bwa-ink) !important; }

/* The "Auction starts" / "Auction ends" labels flanking the dot bar. */
.dot-bar-row > div { color: #FFFFFF; }
/* The end label sits in a col-lg-2 and is left-aligned inside it, so it stops
   short of the container edge. Right-align it to line up with the images. */
.dot-bar-row > div:last-child { text-align: right; }

/* Auction-card images: the whole picture, with no white around it.
   These are 1200x800 (3:2) studio shots. `contain` guarantees nothing is ever
   cropped, so the only white left to remove is the letterbox the band itself
   creates — and that is removed by shaping the band to the photograph rather
   than by resizing the photograph.

   At a fixed 260px the band was taller than a 3:2 shot needs at this column
   width, so every image sat in ~24px of white top and bottom; a square band
   would have made that ~53px. At 3/2 the picture meets all four edges and the
   white disappears entirely.

   The rendered picture is the same size either way — with `contain` its size is
   set by the column width, so it can only grow if the cards get wider (three
   across instead of four). This change removes the waste around it. */
.bg-title .product-image {
  height: auto;
  aspect-ratio: 3 / 2;
  /* Transparent, not white: any letterbox left over by `contain` shows the
     section's own ground — including the grapes background image — instead of
     reading as a slab around the photo. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bg-title .product-image .img-auction,
.img-auction {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Transparent, so the band's black shows through rather than the img
     element painting white over it. */
  background: transparent;
}

/* The auction-card image sits in a .product wrapper, which §18 gives a white
   ground and a gold hairline with !important so it can beat Bootstrap's
   .border on the lot cards. Neither belongs here — these previews are a strip
   of pictures on the dark page, not framed cards. */
.bg-title .product {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* The caption under each preview was inked for the old white ground. */
.bg-title .product .h6,
.bg-title .product .h6 a { color: #FFFFFF; }

/* --- 15.4 Lot grid -------------------------------------------------------- */
/* .products-grid is the whole right-hand column, not the card grid itself;
   the grid is the .row.lot-grid inside it. */
.products-grid { min-width: 0; }
.lot-grid { --bs-gutter-x: 0; --bs-gutter-y: 0; }

/* Spinner / "nothing to show" / skeletons are direct children of the grid.
   Without this they sit as one narrow cell and the gold grid background reads
   as an olive slab behind them. */
.lot-grid > *:not([class*="col-"]) {
  grid-column: 1 / -1;
  background: var(--bwa-page);
  color: var(--bwa-on-dark-dim);
  text-align: center;
  padding: 40px 20px;
  margin: 0;
}
/* An empty grid should not draw its gold rule at all. */
.lot-grid:not(:has(.lot-card)) { background: transparent; border: 0; }

@media (max-width: 1199.98px) { .lot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .lot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Four across on large screens WITHOUT narrowing the cards.
   Bootstrap caps .container at 1320px, so the col-xl-9 lot column is ~966px no
   matter how wide the monitor is — a fourth column there would squeeze every
   card from ~306px to ~226px. So the container is widened at the same
   breakpoint, which keeps the cards at their present ~306px and simply uses
   the space a large screen already has. Scoped to .dashboard-container so the
   rest of the site keeps Bootstrap's measure. */
@media (min-width: 1700px) {
  .dashboard-container { max-width: 1760px; }
  .lot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The card surface inside the Bootstrap column. */
/* The column is a flex box so the card fills it. The card's own mb-3 is zeroed
   below, so the vertical gap has to live on the column — inside .lot-grid the
   grid gap already provides it, everywhere else (track-lots, profile lists)
   the rows would otherwise butt straight into each other. */
.unprocessed-lotcard { display: flex; margin-bottom: 24px; }
/* Row spacing inside .lot-grid also comes from this margin now — the grid's
   row-gap has to stay 0 or it would break the cards apart (see §10). */
.unprocessed-lotcard > .product {
  margin: 0 !important;
  width: 100%;
}
/* .grow animates a hover lift in the old theme — the new cards do not move. */
.unprocessed-lotcard.grow:hover { transform: none; }

/* Image band. custom.css pins .img-lot to height:100% !important inside a
   460px .img-lot-container, so the band height has to be driven by the
   container rather than by the img — the design calls for 300px. */
.lot-card .img-lot-container {
  height: 300px;
  background: var(--bwa-surface);
  border-bottom: 1px solid var(--bwa-line-light);
  overflow: hidden;
  flex-shrink: 0;
}
.lot-card .img-lot-container > a { display: block; width: 100%; height: 100%; }
.lot-card .lot-image { border-bottom: 0; }
.lot-card .product-hover-overlay-link { background: transparent; }

@media (max-width: 767.98px) { .lot-card .img-lot-container { height: 260px; } }

/* Bid buttons sit flush at the foot of the card. */
.lot-card .btn { width: 100%; padding: 13px 20px; }
.lot-card #btn-bid-container { margin-top: 12px; }

/* --- 15.5 Footer ---------------------------------------------------------- */
/* BWA_FooterMenu ships a .bg-white block; the reskin footer is near-black. */
footer.main-footer .bg-white,
.bwa-footer-menu { background: var(--bwa-chrome) !important; color: var(--bwa-on-dark); }
footer.main-footer .text-dark { color: var(--bwa-on-dark) !important; }
footer.main-footer .bg-theme-footer { background: var(--bwa-chrome); border-top: 1px solid var(--bwa-line-dark); }
footer.main-footer .bg-theme-footer .text-white { color: var(--bwa-on-dark) !important; }
footer.main-footer .list-unstyled { display: flex; flex-direction: column; gap: 16px; }
footer.main-footer .list-unstyled a { font-size: 14px; }

/* Partner strip above the footer — supply light-on-dark logos, see §4 of the
   instructions. The current combined PNG is dark-on-white and will read as a
   white slab here. */
.bg-theme { background: var(--bwa-chrome) !important; }
.bg-theme .service-column { display: flex; justify-content: center; align-items: center; padding: 34px 0; }

#scrollTop { background: var(--bwa-gold); color: var(--bwa-chrome); border: 0; }

/* ==========================================================================
   16. PURPLE -> GOLD
   The old BWA accent is a plum (#713e5a, plus rgb(163,24,91) on .color-purple
   and --bs-purple). Every selector below was found using one of them in
   site.css / custom.css; the reskin has no purple at all.
   ========================================================================== */
:root { --bs-purple: var(--bwa-gold-dark); }

/* Text accents */
.color-purple { color: var(--bwa-gold-dark) !important; }
.text-theme   { color: var(--bwa-gold-dark) !important; }
/* On the dark chrome the light gold reads better than the dark one. */
.navbar .color-purple, .navbar .text-theme,
footer .color-purple, footer .text-theme { color: var(--bwa-gold) !important; }

/* Buttons that were plum-filled */
.btn-custom, .subscription-btn-primary {
  background-color: var(--bwa-gold);
  border-color: var(--bwa-gold);
  color: var(--bwa-chrome);
}
.btn-custom:hover, .subscription-btn-primary:hover {
  background-color: var(--bwa-sand);
  border-color: var(--bwa-sand);
  color: var(--bwa-chrome);
}

/* The 4px plum rule under every lot image — §6 of the brief says remove it,
   the status pill carries that colour now. The :hover variant swapped it for a
   muddy #9c7519 gold; dropped too, otherwise the card shifts 4px on hover. */
.product-image, .product-image:hover { border-bottom: 0; }

/* Scroll-to-top control and the plum scrollbar thumb */
#scrollTop, #scrollTop:hover, #scrollTop:focus {
  background: var(--bwa-gold);
  border: 1px solid var(--bwa-gold);
  color: var(--bwa-chrome);
}
#codeexplanation .modal-body::-webkit-scrollbar-thumb { background: var(--bwa-gold-mid); }
.bg-purple { background-color: var(--bwa-gold-dark) !important; }

/* The sort-direction toggle's knob is a plum disc drawn in a ::before. */
.sort-button:before { background-color: var(--bwa-gold); border-color: var(--bwa-gold-mid); }

/* custom.css paints .FooterFontColor plum at 23px with !important on BOTH
   declarations, so it outranks §14 no matter how specific that selector is.
   Restated with !important — this is a custom.css override, not the Blazor
   CSS-isolation case the handoff says to solve in the .razor.css file. */
footer .FooterFontColor, .bwa-footer-menu .FooterFontColor {
  color: var(--bwa-gold) !important;
  font-size: 21px !important;
}

/* ==========================================================================
   18. LOT CARDS ON EVERY PAGE
   The dashboard card carries the classes added in its markup; the category
   page, track-lots and the other lot lists do not. They all share the same
   structure though — .product wrapping .product-image.img-lot-container — so
   the card is styled from that instead, and every page matches without
   touching each one's markup.
   ========================================================================== */
/* Bootstrap's .border and .shadow-sm on these cards are !important, so the
   card's own frame has to be too. */
.product {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark) !important;
  box-shadow: none;
  display: flex;
  height: 100%;
  min-width: 0;
}
/* Cards in the dashboard grid are spaced apart, so each keeps its own frame. */
/* The carousel on lot details reuses .product as a plain image wrapper. */
.lot-media .product { background: transparent; display: block; height: auto; border: 0 !important; }

/* Title zone. The inline height:75px in the markup has to be overridden for
   the 4-line clamp that keeps neighbouring cards the same height. */
.product > .h6,
.product > .lot-title {
  font-family: var(--bwa-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--bwa-ink);
  text-transform: none;
  padding: 18px 20px 16px !important;
  height: 104px !important;
  margin: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bwa-line-light);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product > .h6 a, .product > .lot-title a { color: var(--bwa-ink); }
.product > .h6 a:hover, .product > .lot-title a:hover { color: var(--bwa-gold-dark); }

/* Image band — 300px, white, contained. */
.product .img-lot-container {
  height: 300px;
  background: var(--bwa-surface);
  border-bottom: 1px solid var(--bwa-line-light);
  overflow: hidden;
  flex-shrink: 0;
}
.product .img-lot-container > a { display: block; width: 100%; height: 100%; }
.product .img-lot-container img { width: 100%; height: 100%; object-fit: contain; }

/* Footer block pinned to the bottom so rows line up across a row of cards. */
.product > .p-2,
.product > .lot-footer {
  padding: 16px 20px 20px !important;
  margin-top: auto;
  border-top: 0;
}

/* Meta rows: micro-label left, serif value right. */
.product ul.list-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 400;
}
.product ul.list-inline > li:first-child {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
}
.product ul.list-inline > li:last-child {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 21px;
  color: var(--bwa-ink);
  float: none !important;
}
/* The first row is the current bid — the hero number on the card. */
.product ul.list-inline:first-of-type > li:last-child { font-size: 27px; line-height: 1; }
.product ul.list-inline .small,
.product ul.list-inline .text-muted { font-family: var(--bwa-ui); font-size: 12px; color: var(--bwa-muted); }

.product .btn { width: 100%; padding: 13px 20px; }

/* ==========================================================================
   21. LOT DETAIL BID PANEL (brief 3)
   Replaces the old "LOT DATA" block: no header bar, no progress bars, no "?"
   chips. The current bid is the hero figure at the top of the black band.
   ========================================================================== */
.bwa-bidpanel {
  max-width: 440px;
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  margin-bottom: 40px;
}

/* --- Hero band ----------------------------------------------------------- */
/* Tighter than brief 3 §5 (26px 24px 30px): the band was carrying too much
   dead black space above and below the figure. The top padding is halved
   again against the label, which sat marooned in black. */
.bwa-hero {
  --bwa-hero-size: 56px;     /* the countdown is derived from this, see below */
  background: var(--bwa-chrome);
  padding: 10px 24px 22px;
  text-align: center;
}
.bwa-hero-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;            /* normal leading added ~5px of black above and below */
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bwa-faint);
}
.bwa-hero-value {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: var(--bwa-hero-size);
  line-height: 1;            /* single-line figure; Playfair sits lower than
                                Cormorant did, so .92 clipped the descenders */
  color: var(--bwa-gold);
  margin-top: 2px;
}
.bwa-hero-divider { height: 1px; background: var(--bwa-line-chrome); margin: 16px 0 14px; }
.bwa-hero-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Attributes on the SVG say 38px; the viewBox scales, so the real size is set
   here. Sized against the countdown rather than the bid figure so the pair
   reads as one unit. */
.bwa-clock { width: 42px; height: 42px; flex-shrink: 0; }

/* White, and locked to 60% of the current-bid figure above — derived from
   --bwa-hero-size so the two can never drift apart if that changes.
   NOTE the selector: the panel lives inside .product-details, whose generic
   `.timer` rule (§25) is two classes and wins over a lone .bwa-hero-countdown.
   It was painting this element 21px in --bwa-ink, i.e. dark on near-black. */
.bwa-hero .bwa-hero-countdown,
.product-details #bgindicator .bwa-hero-countdown {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: calc(var(--bwa-hero-size) * .6);
  line-height: 1;
  /* !important and an ID in the selector deliberately. Three separate rules
     have painted this element dark on the near-black band: the generic
     .product-details .timer above, the #bgindicator colour at §24, and the
     bgcolor-* classes bidding.js bolts on at runtime. This ends it. */
  color: #FFFFFF !important;
}

/* The hero figure carries the bid state, so it reads even scrolled to the top. */
.bwa-bidpanel.is-highest       .bwa-hero-value { color: var(--bwa-highest-hero); }
.bwa-bidpanel.is-below-minimum .bwa-hero-value { color: var(--bwa-below-hero); }
.bwa-bidpanel.is-outbid        .bwa-hero-value { color: var(--bwa-outbid-hero); }

/* --- State strip --------------------------------------------------------- */
.bwa-bidstate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bwa-line-light);
}
.bwa-bidstate-dot { width: 9px; height: 9px; flex-shrink: 0; }
.bwa-bidstate-title {
  font-family: var(--bwa-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.is-highest .bwa-bidstate {
  background: var(--bwa-highest-bg); box-shadow: inset 4px 0 0 var(--bwa-highest-line);
}
.is-highest .bwa-bidstate-dot   { background: var(--bwa-highest-fg); }
.is-highest .bwa-bidstate-title { color: var(--bwa-highest-fg); }

.is-below-minimum .bwa-bidstate {
  background: var(--bwa-below-bg); box-shadow: inset 4px 0 0 var(--bwa-below-line);
}
.is-below-minimum .bwa-bidstate-dot   { background: var(--bwa-below-fg); }
.is-below-minimum .bwa-bidstate-title { color: var(--bwa-below-fg); }

.is-outbid .bwa-bidstate {
  background: var(--bwa-outbid-bg); box-shadow: inset 4px 0 0 var(--bwa-outbid-line);
}
.is-outbid .bwa-bidstate-dot   { background: var(--bwa-outbid-fg); }
.is-outbid .bwa-bidstate-title { color: var(--bwa-outbid-fg); }

/* --- Rows ---------------------------------------------------------------- */
.bwa-total-bids,
.bwa-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--bwa-line-light);
}
.bwa-total-bids { background: var(--bwa-surface-hover); }
.bwa-row-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
}
.bwa-total-bids-value {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--bwa-ink);
}
.bwa-row-value {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  color: var(--bwa-ink);
  text-align: right;
}
/* Next increment bid is the actionable number. */
.bwa-row-value.is-gold { color: var(--bwa-gold-dark); }
.bwa-rows .bwa-row:last-child { border-bottom: 0; }

/* --- Bid form ------------------------------------------------------------ */
.bwa-bidform { padding: 20px 24px 24px; border-top: 1px solid var(--bwa-line-light); }
.bwa-bidform-note { font-size: 12px; color: var(--bwa-muted); margin-bottom: 16px; }
.bwa-bid-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  margin-bottom: 7px;
}
.bwa-bid-line { display: flex; gap: 10px; margin-bottom: 16px; }
.bwa-bid-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  border-radius: 0;
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--bwa-ink);
}
.bwa-bid-input:focus { border-color: var(--bwa-gold); outline: none; box-shadow: none; }
/* Both buttons gold and identically sized, so the two rows line up exactly. */
.bwa-bid-btn {
  height: 46px;
  width: 148px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bwa-gold);
  border: 1px solid var(--bwa-gold);
  border-radius: 0;
  color: var(--bwa-chrome);
  font-family: var(--bwa-ui);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s;
}
.bwa-bid-btn:hover { background: var(--bwa-sand); border-color: var(--bwa-sand); }

.bwa-fav-btn {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  border-radius: 0;
  font-family: var(--bwa-ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bwa-body);
  transition: border-color .15s;
}
.bwa-fav-btn:hover { border-color: var(--bwa-gold); }
.bwa-fav-btn .fa-heart { color: var(--bwa-outbid-fg); }

/* --- Time rows + currencies --------------------------------------------- */
.bwa-time-rows .bwa-row { border-bottom: 0; border-top: 1px solid var(--bwa-line-light); }

.bwa-currencies { background: var(--bwa-surface-hover); border-top: 1px solid var(--bwa-line-dark); padding: 18px 24px 20px; }
.bwa-currencies-heading {
  font-family: var(--bwa-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  margin-bottom: 12px;
}
.bwa-currency-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 9px; }
.bwa-currency { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bwa-currency-code {
  font-family: var(--bwa-ui);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--bwa-faint);
}
.bwa-currency-amount { font-family: var(--bwa-display); font-weight: 500; font-size: 16px; color: var(--bwa-body); }

/* ==========================================================================
   20. LIVE AUCTION SLIDER
   Each slide nests .product twice as a plain wrapper
   (.product-slider-item > .col-12 > .product > .unprocessed-lotcard > .product)
   and carries no title or footer, so the §18 card rules have to be scoped back
   out here — otherwise every slide draws two gold borders and inherits the
   24px card gap inside itself.
   ========================================================================== */
.product-slider-item .product { display: block; height: auto; }
.product-slider-item .product .product { border: 0 !important; }
.product-slider-item .unprocessed-lotcard { display: block; margin-bottom: 0; }

.product-slider-item .product-image {
  height: 260px;
  background: var(--bwa-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-slider-item .product-image img { width: 100%; height: 100%; object-fit: contain; }

/* Lot-number ribbon — .ribbon-info is Bootstrap blue, which the reskin has
   nowhere else. */
.product-slider-item .ribbon.ribbon-info,
.ribbon.ribbon-info {
  background: var(--bwa-gold) !important;
  border-color: var(--bwa-gold) !important;
  color: var(--bwa-chrome) !important;
  font-family: var(--bwa-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ==========================================================================
   19. DASHBOARD TOOLBAR (filter row + sort row)
   Every control is exactly 46px with border-box sizing — that, rather than
   vertical padding, is what keeps the row aligned.
   ========================================================================== */
.product-grid-header .bwa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
}
.product-grid-header .bwa-toolbar > .bwa-search,
.product-grid-header .bwa-toolbar > .bwa-select,
.product-grid-header .bwa-toolbar > .bwa-toolbar-submit,
.bwa-toolbar-row2 .bwa-dir-btn,
.bwa-toolbar-row2 .bwa-mode-toggle,
.bwa-toolbar-row2 .dropdown-filter,
.bwa-toolbar-row2 .bwa-toolbar-excel {
  height: 46px;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
}

/* --- Row 1 --------------------------------------------------------------- */
.bwa-search {
  flex: 2 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
}
.bwa-search-icon { flex-shrink: 0; }
/* Two classes deep on purpose: §7 styles input[type="search"] with its own
   border and padding, and an attribute selector would otherwise outrank a
   single class here — which draws a second box inside the search field. */
.bwa-search .bwa-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: var(--bwa-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--bwa-ink);
}
.bwa-search .bwa-search-input::placeholder { color: var(--bwa-faint); }
.bwa-search .bwa-search-input:focus { border: 0; outline: none; box-shadow: none; }
.bwa-search .bwa-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bwa-search:focus-within { border-color: var(--bwa-gold); }

.product-grid-header .bwa-toolbar > .bwa-select {
  flex: 1 1 150px;
  min-width: 0;
  padding: 0 40px 0 16px;
  background-color: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  font-family: var(--bwa-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--bwa-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.product-grid-header .bwa-toolbar > .bwa-select:hover { border-color: var(--bwa-gold); }

.product-grid-header .bwa-toolbar > .bwa-toolbar-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 38px;
  background: var(--bwa-gold);
  border: 1px solid var(--bwa-gold);
  color: var(--bwa-chrome);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.product-grid-header .bwa-toolbar > .bwa-toolbar-submit:hover {
  background: var(--bwa-sand); border-color: var(--bwa-sand); color: var(--bwa-chrome);
}

/* --- Row 2 --------------------------------------------------------------- */
.bwa-toolbar-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 18px;
}
.bwa-toolbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bwa-toolbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; }

.bwa-sort-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  white-space: nowrap;
}

/* The sort dropdown is rendered by OptionsSelector as .dropdown-filter. */
.bwa-toolbar-row2 .dropdown-filter {
  padding: 0 40px 0 16px;
  background-color: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  font-family: var(--bwa-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--bwa-body) !important;
  cursor: pointer;
}
.bwa-toolbar-row2 .dropdown-filter:hover { border-color: var(--bwa-gold); }

.bwa-toolbar-row2 .bwa-dir-btn {
  width: 46px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bwa-gold);
  border: 1px solid var(--bwa-gold);
  transition: background .15s, border-color .15s, transform .15s;
}
.bwa-toolbar-row2 .bwa-dir-btn:hover { background: var(--bwa-sand); border-color: var(--bwa-sand); }
.bwa-toolbar-row2 .bwa-dir-btn.is-desc svg { transform: rotate(180deg); }

.bwa-count { font-size: 13px; color: var(--bwa-on-dark-dim); white-space: nowrap; }

.bwa-toolbar-row2 .bwa-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--bwa-gold);
  border: 1px solid var(--bwa-gold);
  color: var(--bwa-chrome);
  font-family: var(--bwa-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.bwa-toolbar-row2 .bwa-mode-toggle:hover { background: var(--bwa-sand); border-color: var(--bwa-sand); }

.bwa-toolbar-row2 .bwa-toolbar-excel {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: .18em;
}

/* ==========================================================================
   17. LOT DETAILS
   ========================================================================== */

/* §4 colours headings for the dark page. Anywhere they sit on a white surface
   that would be near-white on white — re-ink them. */
.block h1, .block h2, .block h3, .block h4,
.block .h1, .block .h2, .block .h3, .block .h4,
.modal h1, .modal h2, .modal h3, .modal h4,
.modal .h1, .modal .h2, .modal .h3, .modal .h4,
.lot-card h1, .lot-card h2, .lot-card h3, .lot-card h4,
.lot-card .h1, .lot-card .h2, .lot-card .h3, .lot-card .h4,
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4,
.table h1, .table h2, .table h3, .table h4 { color: var(--bwa-ink); }

.product-details, .unprocessed-lotpanel { background: var(--bwa-page); }

/* --- The lot sheet ---------------------------------------------------------
   The whole lot body sits on one white sheet rather than directly on the dark
   page. It wraps two sibling <section>s, so the background lives on the
   wrapper and the sections go transparent. */
.lot-detail-sheet {
  max-width: 1320px;
  margin: 0 auto 60px;
  padding: 34px 0;
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-body);
}
.lot-detail-sheet section,
.lot-detail-sheet .product-details,
.lot-detail-sheet .unprocessed-lotpanel { background: transparent; }
.lot-detail-sheet section.border-bottom { border-bottom: 0 !important; }

/* Inside the sheet everything is on white, so the dark-page inks invert back.
   Without this the description, the code-explanation link and every heading
   would be light-on-white. */
.lot-detail-sheet .text-body,
.lot-detail-sheet .text-muted,
.lot-detail-sheet .text-sm,
.lot-detail-sheet.product-details .text-sm { color: var(--bwa-muted) !important; }
.lot-detail-sheet h1, .lot-detail-sheet h2, .lot-detail-sheet h3,
.lot-detail-sheet h4, .lot-detail-sheet h5,
.lot-detail-sheet .h1, .lot-detail-sheet .h2, .lot-detail-sheet .h3,
.lot-detail-sheet .h4, .lot-detail-sheet .h5 { color: var(--bwa-ink); }
.lot-detail-sheet a { color: var(--bwa-gold-dark); }
.lot-detail-sheet a:hover { color: var(--bwa-ink); }

/* Panels are white-on-white now — the strong gold hairline is too heavy, the
   light one still separates them. */
.lot-detail-sheet .lot-media,
.lot-detail-sheet .product-details .block { border-color: var(--bwa-line-light); }

/* Description + code explanation + lot information, sitting under the photo in
   the left column so a short photo does not leave a white gap. */
.lot-secondary { margin-top: 30px; }
.lot-secondary .bg-light {
  background: var(--bwa-surface) !important;
  border: 1px solid var(--bwa-line-light);
  padding-bottom: 0 !important;
}
.lot-secondary .detail-option-heading { margin-bottom: 0 !important; }
.lot-secondary .detail-option-heading:last-child { border-bottom: 0; }

/* The lot image gets its own white panel with a gold hairline, so it reads as
   a content surface like the LOT DATA block and the lot cards, rather than a
   loose photo floating on the dark page. The carousel markup is generated
   (.lightbox-gallery > .col-* > .product > .item > a > img) so its Bootstrap
   gutters are zeroed here instead of in the generator. */
.lot-media {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  padding: 28px;
}
.lot-media .lightbox-gallery { margin: 0; }
.lot-media .lightbox-gallery > [class*="col-"] { padding: 0; }
.lot-media .product { background: transparent; border: 0; box-shadow: none; }
.lot-media img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* The lot title carries "Lot number N : <long title>" — 56px is for the
   dashboard's auction name, not for this. */
.hero-heading.h4 { font-size: 34px; }

/* Bidding panel — white block, gold hairline, square. */
.product-details #bgindicator,
.product-details .block {
  background: var(--bwa-surface) !important;
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-body);
  padding: 0 0 24px;
}
/* "LOT DATA" / "LOT INFORMATION" bands — black with a gold serif title, per
   brief §5.8. Not scoped to .product-details: the lot-information block sits
   outside that section and has to match. */
.block-toggler.bg-theme {
  background: var(--bwa-chrome) !important;
  color: var(--bwa-gold) !important;
  font-family: var(--bwa-display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .1em;
  padding: 18px 22px !important;
  margin: 0 0 18px !important;
}

/* Data rows: micro-label left, serif value right, hairline between. */
.detail-option-heading {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-faint);
  border-bottom: 1px solid var(--bwa-line-light);
  padding: 12px 22px !important;
  align-items: center;
}
.detail-option-heading > span:last-child {
  font-family: var(--bwa-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bwa-ink);
}
/* Current bid is the hero number on this page. */
.detail-option-heading > #currentBid { font-size: 27px; }
/* Timers on the light part of the lot page. The :not() is load-bearing: the bid
   panel's countdown is also a .timer and also inside .product-details, and this
   rule is later in the file, so without the exclusion it repaints it dark-on-black. */
.product-details .timer:not(.bwa-hero-countdown) {
  font-family: var(--bwa-display); font-weight: 500; font-size: 21px; color: var(--bwa-ink);
}

/* Progress bars — gold fill on a sand track, no stripes. Tall enough to keep
   the percentage legible: it is the only place the VAT and buyer's-premium
   rates are shown. */
.product-details .progress {
  background: var(--bwa-sand);
  height: 18px;
  font-family: var(--bwa-ui);
  font-size: 10px;
  letter-spacing: .16em;
}
.product-details .progress-bar,
.progress-bar.bg-theme {
  background-color: var(--bwa-gold) !important;
  background-image: none !important;
  color: var(--bwa-chrome);
  justify-content: flex-end;
  padding-right: 8px;
}

/* The "?" tooltip badge. */
.tooltipstyle.bg-theme {
  background: var(--bwa-gold) !important;
  color: var(--bwa-chrome) !important;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  margin-left: 8px;
}

.product-details .bg-gray-100 { background: var(--bwa-surface) !important; }

/* Bootstrap's body/muted greys are near-black — on the dark page they read as
   invisible (the lot description was the worst case). Light them up by
   default, then put them back to ink inside every light surface. */
.text-body, .text-muted { color: var(--bwa-on-dark-dim) !important; }
.lot-card .text-body,   .block .text-body,   .modal .text-body,
.sidebar .text-body,    .table .text-body,   .filter-panel .text-body,
.lot-card .text-muted,  .block .text-muted,  .modal .text-muted,
.sidebar .text-muted,   .table .text-muted,  .filter-panel .text-muted {
  color: var(--bwa-muted) !important;
}
.product-details .text-sm { color: var(--bwa-on-dark-dim); }
.block .text-sm, .lot-card .text-sm { color: var(--bwa-muted); }


/* ==========================================================================
   26. DASHBOARD LOT CARD (lot-card brief)
   Subgrid alignment with full titles, a bid-state indicator, a plain-text
   countdown and a gold bid button. Scoped to .lot-grid so the track-lots and
   profile lists keep the simpler flex card from §15.4.
   ========================================================================== */

/* --- 26.1 Subgrid: equal heights without truncating titles ---------------- */
/* Each card contributes to three shared row tracks — title | image | footer —
   so the title band takes the height of the tallest title IN THAT ROW and
   every image and price block across the row starts on the same line.
   Two nesting levels because the Bootstrap column sits between grid and card. */
.lot-grid > [class*="col-"] {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}
.lot-grid > [class*="col-"] > .lot-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  height: auto;
  min-width: 0;
}
/* NOT optional: grid items default to min-width:auto, so one long unbroken
   word makes the card wider than its column and the price and heart spill out. */
.lot-grid > [class*="col-"] > .lot-card > * { min-width: 0; }

/* Browsers without subgrid: fall back to the flex card and hold the title band
   open so rows still line up approximately. Titles stay full — no clamp. */
@supports not (grid-template-rows: subgrid) {
  .lot-grid > [class*="col-"] { display: flex; }
  .lot-grid > [class*="col-"] > .lot-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .lot-grid > [class*="col-"] > .lot-card > .lot-title { min-height: 88px; }
}

/* --- 26.2 Bid-state indicator -------------------------------------------- */
/* custom.css floods the whole card with translucent green (#05ca729c) or red
   (#ff120045) for these classes. The card stays white; the state is carried by
   a 4px left bar and a pill. The bar is white on a lot you have not bid on, so
   no card is 4px narrower than its neighbours. */
.lot-card.bgcolor-winning,
.lot-card.bgcolor-winning-autobid,
.lot-card.bgcolor-winnerbelowminimum,
.lot-card.bgcolor-losing {
  background: var(--bwa-surface) !important;
}
.lot-card {
  border-left: 4px solid #FFFFFF;
  box-sizing: border-box;
}
.lot-card.bgcolor-winning,
.lot-card.bgcolor-winning-autobid { border-left-color: var(--bwa-highest-fg); }
.lot-card.bgcolor-winnerbelowminimum { border-left-color: var(--bwa-below-fg); }
.lot-card.bgcolor-losing { border-left-color: var(--bwa-outbid-fg); }

/* Pill. Absorbs the shortfall when the meta row is tight — a clipped state
   label is recoverable, a clipped countdown is not (brief §5). */
.lot-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-family: var(--bwa-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--bwa-line-light);
  border-radius: 0;
  background: var(--bwa-surface-hover);
  color: var(--bwa-body);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot-state-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: currentColor;
}
.lot-state-pill.bgcolor-winning,
.lot-state-pill.bgcolor-winning-autobid {
  background: var(--bwa-highest-bg); border-color: var(--bwa-highest-line); color: var(--bwa-highest-fg);
}
.lot-state-pill.bgcolor-winnerbelowminimum {
  background: var(--bwa-below-bg); border-color: var(--bwa-below-line); color: var(--bwa-below-fg);
}
.lot-state-pill.bgcolor-losing {
  background: var(--bwa-outbid-bg); border-color: var(--bwa-outbid-line); color: var(--bwa-outbid-fg);
}

/* --- 26.3 Meta row: state · countdown · watchlist ------------------------- */
.lot-card .lot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}
/* The countdown was a green-filled pill. Green now means "you are the highest
   bidder" and nothing else, so it is plain text. Never allowed to wrap. */
.lot-card .lot-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 74px;
  white-space: nowrap;
  font-family: var(--bwa-ui);
  font-size: 11px;
  color: var(--bwa-muted);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: normal;
  text-transform: none;
}
.lot-card .lot-countdown .timer { font-family: var(--bwa-ui); font-size: 11px; color: var(--bwa-muted); }
.lot-card .lot-countdown.is-closed { color: var(--bwa-outbid-fg); }
.lot-card .lot-clock { width: 12px; height: 12px; flex-shrink: 0; }
/* Pushes the heart to the right edge whether or not a pill is present. */
.lot-card .lot-meta .favourite { margin-left: auto; flex-shrink: 0; }

/* --- 26.4 Image band ------------------------------------------------------ */
/* contain, not cover: the client's photography is not re-cut on white and a
   cropped bottle label is worse than a white margin (brief §6). */
/* Band shaped to the photography instead of a fixed pixel height.
   Measured across the catalogue: lot photos are either 800x1200 (2:3 portrait)
   or 1200x800 (3:2 landscape). The CDN never crops or pads — it only fits the
   source inside the requested box — so whatever shape was uploaded arrives
   intact and the band has to deal with both.

   No single height fits both orientations. The fixed 340px band left portrait
   shots 37px of white down EACH SIDE, because at 302px wide a 2:3 photo needs
   453px of height and `contain` was therefore fitting it by height instead.
   Keying the band to 2/3 makes it exactly as tall as a portrait photo is at
   whatever width the card happens to be, so those now fill it edge to edge
   with no white at all. Landscape shots sit centred with white above and
   below — the trade already accepted for wide pictures.

   aspect-ratio rather than px: stays correct at every column count and
   breakpoint, including the 4-up layout, with no media queries. */
.lot-card .img-lot-container {
  height: auto;
  aspect-ratio: 2 / 3;
  /* Inset so the photo never runs off the edges of the band. At exactly 2/3 a
     portrait shot filled it corner to corner with no margin at all, which reads
     as cropped even though nothing is cut — there is simply no white left to
     show where the frame ends. The padding also gives landscape shots a
     consistent surround. */
  padding: 12px;
  box-sizing: border-box;
}
/* Guarantees the whole frame is visible whatever else is loaded. `contain` can
   never crop; this exists so no later rule, in any stylesheet, can swap it for
   `cover` or drop it and let the image stretch or overflow. */
.lot-card .img-lot-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* --- 26.5 Footer and bid button ------------------------------------------ */
/* The footer is the third subgrid track, so the button is pinned with flex
   inside it rather than with margin-top:auto on the card. */
.lot-card .lot-footer {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lot-card #btn-bid-container { margin-top: auto; }

/* Gold, 44px, one line. .btn-dark is Bootstrap's near-black and outranks a
   plain .btn rule, hence the explicit override. */
.lot-card #btn-bid-container .btn,
.lot-card #btn-bid-container .btn-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--bwa-gold) !important;
  color: var(--bwa-chrome) !important;
}
.lot-card #btn-bid-container .btn:hover,
.lot-card #btn-bid-container .btn-dark:hover { background: var(--bwa-sand) !important; }
.lot-card .btn-bid-label {
  font-family: var(--bwa-ui);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lot-card .btn-bid-amount {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: normal;
}

/* --- 26.6 Full titles on the dashboard ----------------------------------- */
/* §18 clamps every .product title to a fixed 104px so flex cards on the
   category and track-lots pages stay aligned. The dashboard aligns with the
   subgrid instead, so inside .lot-grid the title shows in full. The
   !important is answering §18's own !important, not raising the stakes. */
.lot-card > .lot-title,
.lot-grid .product > .lot-title {
  display: block;
  height: auto !important;
  min-height: 0;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 17px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@supports not (grid-template-rows: subgrid) {
  .lot-card > .lot-title,
  .lot-grid .product > .lot-title { min-height: 88px; }
}

/* --- 26.7 Compact footer -------------------------------------------------- */
/* Pays for the taller image band above. Four things were stacking dead space
   under the last row: 20px footer padding, the markup's inline
   style="min-height:30px" on #btn-bid-container, its .pb-2, and the default
   1rem margin on the "closed for bidding" paragraph. The inline min-height and
   Bootstrap's .pb-2 both need !important to unseat — the ID in the selector is
   what wins the tie. */
.lot-card .lot-footer { padding: 14px 20px 14px; }
.lot-grid .lot-card .lot-meta { margin-bottom: 10px; }
.lot-card .lot-footer ul { margin-bottom: 3px !important; }
.lot-card #btn-bid-container {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 10px;
}
/* The closed / not-yet-open notice, in place of a button. */
.lot-card #btn-bid-container p {
  margin: 0;
  font-size: 12px;
  color: var(--bwa-muted);
}

/* ==========================================================================
   27. BUTTONS — SITE-WIDE GOLD
   §8 only covered .btn-primary / .btn-search / .place-bid / .buy-now, but the
   codebase reaches for .btn-dark 27 times (profile, invoices, auction results,
   search, CMS pages) and that is Bootstrap's near-black. .btn-custom is the old
   plum #713e5a that the purple sweep missed. Both are converted here.

   Bootstrap 5 drives .btn from --bs-btn-* custom properties, so the variables
   are set as well as the plain properties — setting only one of the two leaves
   whichever mechanism this build actually uses still painting black.
   ========================================================================== */
.btn-dark,
.btn-custom,
.btn-buy,
.btn-primary,
.btn-search,
.btn-bid,
.btn.place-bid,
.btn.buy-now {
  --bs-btn-bg: var(--bwa-gold);
  --bs-btn-border-color: var(--bwa-gold);
  --bs-btn-color: var(--bwa-chrome);
  --bs-btn-hover-bg: var(--bwa-sand);
  --bs-btn-hover-border-color: var(--bwa-sand);
  --bs-btn-hover-color: var(--bwa-chrome);
  --bs-btn-active-bg: var(--bwa-sand);
  --bs-btn-active-border-color: var(--bwa-sand);
  --bs-btn-active-color: var(--bwa-chrome);
  background: var(--bwa-gold);
  border-color: var(--bwa-gold);
  color: var(--bwa-chrome);
}
.btn-dark:hover,
.btn-custom:hover,
.btn-buy:hover,
.btn-primary:hover,
.btn-search:hover,
.btn-bid:hover,
.btn.place-bid:hover,
.btn.buy-now:hover {
  background: var(--bwa-sand);
  border-color: var(--bwa-sand);
  color: var(--bwa-chrome);
}

/* Outline variants stay white with a gold hairline — they are the secondary
   action next to a gold primary, and two golds side by side read as one. */
.btn-dark-outline,
.btn-outline-custom,
.btn-outline-secondary {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-dark);
  color: var(--bwa-body);
}
.btn-dark-outline:hover,
.btn-outline-custom:hover,
.btn-outline-secondary:hover {
  background: var(--bwa-sand);
  border-color: var(--bwa-line-dark);
  color: var(--bwa-ink);
}

/* Deliberately NOT gold: .btn-outline-danger (clear filters), .btn-close and
   .btn-link. Those carry meaning that gold would erase. */

/* --- 26.8 Grid density variants ------------------------------------------ */
/* .lot-grid defaults to 3-up because the dashboard grid sits in a col-xl-9
   next to the filter rail. The category page has no sidebar, so 4-up there
   lands on the SAME ~306px card width rather than stretching to ~424px.
   Same card, same width, different column count for a different container. */
.lot-grid.lot-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1399.98px) { .lot-grid.lot-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .lot-grid.lot-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .lot-grid.lot-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* The category and favourites cards ship Bootstrap's .shadow-sm and .border,
   both !important. The reskin card has neither — it is separated by whitespace,
   not by a box. */
.lot-card.shadow-sm { box-shadow: none !important; }
.lot-card.border { border: 0 !important; border-left: 4px solid #FFFFFF !important; }
.lot-card.border.bgcolor-winning,
.lot-card.border.bgcolor-winning-autobid { border-left-color: var(--bwa-highest-fg) !important; }
.lot-card.border.bgcolor-winnerbelowminimum { border-left-color: var(--bwa-below-fg) !important; }
.lot-card.border.bgcolor-losing { border-left-color: var(--bwa-outbid-fg) !important; }

/* Category lot images carry an inline min-height that fights the 2/3 band. */
.lot-card .img-lot-container img[style*="min-height"] { min-height: 0 !important; }

/* ==========================================================================
   29. CATEGORY OVERVIEW CARDS
   White cards on the dark page. §4 colours headings and muted text for the
   DARK ground, and §17 re-inks them again inside .block/.modal/.lot-card/
   .sidebar/.table - but .card was never in that list, and the list stopped at
   h4 while these titles are .h5. Both gaps show up here as near-white text on
   a white card.
   ========================================================================== */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
  color: var(--bwa-ink);
}
/* Same gap one size down, for every surface §17 already covers. */
.block h5, .block .h5, .block h6, .block .h6,
.modal h5, .modal .h5, .modal h6, .modal .h6,
.lot-card h5, .lot-card .h5, .lot-card h6, .lot-card .h6,
.sidebar h5, .sidebar .h5, .table h5, .table .h5 {
  color: var(--bwa-ink);
}
/* Description and the "View lots" link sit on the same white ground. */
.card .text-muted, .card .text-body, .card .small, .card small {
  color: var(--bwa-muted) !important;
}

/* The lot count is .badge.bg-dark: Bootstrap forces a near-black background
   with !important, while §11 keeps the badge's text at --bwa-body ink. Dark on
   dark. White text, and a gold hairline so the chip reads as part of the set. */
.badge.bg-dark {
  color: #FFFFFF !important;
  border-color: var(--bwa-gold-dark);
}

/* The card itself: square, hairline, no Bootstrap shadow - matching the lot cards. */
.cat-card {
  background: var(--bwa-surface);
  border: 1px solid var(--bwa-line-light) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   30. HOMEPAGE — ACTIVE / UPCOMING AUCTIONS
   BLAZOR-HOMEPAGE-INSTRUCTIONS.md. One block per auction: header (title +
   status pill + day count), a row of hot-lot cards laid out image-left /
   info-right, and the timing band underneath.

   Markup: BWA_HomeAuctionSection.razor. This is the only homepage-specific
   block; the "interesting lots" carousel below it is still §20/§18.
   ========================================================================== */
.bwa-home-auction { padding-top: 66px; }
.bwa-home-auction:last-of-type { padding-bottom: 24px; }

/* --- 30.1 Auction header -------------------------------------------------- */
.bwa-ha-head { margin-bottom: 26px; }
.bwa-ha-title {
  font-size: 49px;
  margin: 0 0 14px;
  text-align: left;          /* §4 centres h1; these are h2 and sit left */
}
.bwa-ha-title a { color: var(--bwa-on-dark); }
.bwa-ha-title a:hover { color: var(--bwa-gold); }

.bwa-ha-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* One of exactly two rounded shapes in the whole theme — see §3 and .bwa-round. */
.bwa-ha-pill {
  display: inline-block;
  padding: 5px 16px;
  border: 1px solid var(--bwa-line-dark);
  border-radius: 999px;
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-gold);
}
.bwa-ha-count { font-family: var(--bwa-ui); font-size: 14px; color: var(--bwa-on-dark-dim); }
.bwa-ha-count-n {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--bwa-gold);
}

/* --- 30.2 Hot-lot row ----------------------------------------------------- */
/* The 1px gaps are the grid's own background showing through — the same
   hairline technique the dashboard lot grid uses, so no card owns a border. */
.bwa-ha-lots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--bwa-line-chrome);
  border: 1px solid var(--bwa-line-chrome);
}
.bwa-ha-card {
  display: flex;
  min-width: 0;
  background: var(--bwa-page);
  text-decoration: none;
}
.bwa-ha-card:hover { text-decoration: none; }

/* Image panel: 42% of the card, portrait so a bottle shot survives the crop.
   `cover` is the brief's call; until the client re-cuts the catalogue on white
   (handoff open question 3) a landscape studio shot gets centre-cropped here. */
.bwa-ha-card-img {
  flex: 0 0 42%;
  max-width: 42%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bwa-surface);
}
.bwa-ha-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bwa-ha-card-body {
  flex: 1 1 auto;
  min-width: 0;              /* long titles wrap instead of stretching the cell */
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.bwa-ha-lot-name {
  font-family: var(--bwa-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--bwa-on-dark);
  overflow-wrap: anywhere;   /* never clamped — brief 5 §2 */
}
.bwa-ha-card:hover .bwa-ha-lot-name { color: var(--bwa-gold); }
.bwa-ha-lot-sub {
  font-family: var(--bwa-ui);
  font-size: 12px;
  color: var(--bwa-on-dark-dim);
  margin-top: 5px;
  overflow-wrap: anywhere;
}
/* Pushes everything below it to the bottom of the card, so the bid figure sits
   on one line across all four cards however long the titles are. */
.bwa-ha-card-fill { flex: 1 1 auto; min-height: 16px; }
.bwa-ha-card-rule { width: 28px; height: 1px; background: var(--bwa-line-dark); margin-bottom: 11px; }
.bwa-ha-lot-no, .bwa-ha-bid-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-on-dark-dim);
}
.bwa-ha-bid-label { margin-top: 9px; }
.bwa-ha-bid {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--bwa-gold);
}
.bwa-ha-bid-cur { margin-right: .18em; }

/* --- 30.3 Timing band ----------------------------------------------------- */
.bwa-ha-timing {
  display: flex;
  border: 1px solid var(--bwa-line-dark);
  margin-top: 30px;
}
.bwa-ha-timing-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
}
.bwa-ha-timing-cell + .bwa-ha-timing-cell { border-left: 1px solid var(--bwa-line-dark); }
.bwa-ha-timing-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--bwa-gold);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bwa-gold);
  font-size: 18px;
}
.bwa-ha-timing-text { display: flex; flex-direction: column; min-width: 0; }
.bwa-ha-timing-label {
  font-family: var(--bwa-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bwa-on-dark-dim);
}
.bwa-ha-timing-date {
  font-family: var(--bwa-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.3;
  color: var(--bwa-on-dark);
}
.bwa-ha-timing-progress {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 11px;
}
.bwa-ha-bar { display: block; height: 3px; background: var(--bwa-line-chrome); }
.bwa-ha-bar-fill { display: block; height: 3px; background: var(--bwa-gold); }
.bwa-ha-bar-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--bwa-ui);
  font-size: 11px;
  color: var(--bwa-on-dark-dim);
}

/* --- 30.4 Narrow widths --------------------------------------------------- */
@media (max-width: 1199.98px) {
  .bwa-ha-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .bwa-ha-timing { flex-direction: column; }
  .bwa-ha-timing-cell + .bwa-ha-timing-cell {
    border-left: 0;
    border-top: 1px solid var(--bwa-line-dark);
  }
}
@media (max-width: 767.98px) {
  .bwa-ha-lots { grid-template-columns: minmax(0, 1fr); }
  .bwa-ha-title { font-size: 34px; }
  .bwa-home-auction { padding-top: 44px; }
}