/**
 * EPCM Child Theme — components
 *
 * One section per built component. Uses only tokens from design.css.
 */

/* Astra's "underline content links" option underlines anchors site-wide and
   its exclusion list does not know about these classes — opt the chrome out. */

.site-header a,
.site-footer a,
.btn {
  text-decoration: none;
}

#ast-scroll-top {
  display: none !important;
}

.btn:visited {
  color: var(--epcm-white);
}

.epcm-bookmark:focus {
  background: inherit !important;
}

.epcm-bookmark:not(.is-active):focus {
  color: var(--_gray) !important;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--epcm-navy);
}

/* The WP admin bar is fixed at the top for logged-in users; offset the sticky
   header by its height so the two do not overlap on scroll. */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.header-row-1 {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 84px;
  padding-inline: var(--space-xl);
  max-width: var(--container-wide);
  margin-inline: auto;
  justify-content: space-between;
}

.header-logo img {
  height: 26px;
  width: auto;
}

.header-logo__text {
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--epcm-white);
}

.header-search {
  flex: 1;
  max-width: 720px;
  position: relative;
}

.header-search input {
  width: 100%;
  height: 46px;
  padding: 0 48px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--epcm-white);
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  outline: none;
  transition: border-color var(--ease-default);
}

.header-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.header-search input:focus {
  border-color: var(--epcm-teal);
}

.header-search button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  background: none;
  border: none;
  padding: 0;
  color: var(--epcm-white);
  cursor: pointer;
}

.header-auth {
  display: flex;
  gap: var(--space-sm);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    filter var(--ease-default),
    background var(--ease-default);
}

.btn--gradient {
  background: var(--epcm-gradient-cta);
  color: var(--epcm-white);
}

.btn--blue {
  background: var(--epcm-blue);
  color: var(--epcm-white);
}

.btn--green {
  background: var(--epcm-green);
  color: var(--epcm-white);
}

.btn:hover,
.btn:focus {
  filter: brightness(1.08);
  color: var(--epcm-white);
}

/* Primary navigation — light bar below the header */

.header-row-2 {
  background: var(--epcm-white);
}

.main-nav {
  display: flex;
  align-items: center;
  height: 58px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--epcm-navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--ease-default);
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--epcm-blue-light);
}

.main-nav .current-menu-item>a,
.main-nav .current_page_item>a,
.main-nav .current-menu-ancestor>a {
  /* font-weight: 700; */
  color: var(--epcm-navy);
}

/* Footer */

.site-footer {
  background: var(--epcm-navy);
  color: var(--epcm-white);
}

.footer-main {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
}

.footer-brand-row {
  margin-bottom: 60px;
}

.footer-brand-row img {
  height: 36px;
  width: auto;
}

.footer-logo__text {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--epcm-white);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(500px, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* The <nav> around the footer link lists (footer.php) is there for screen
   readers only. display: contents lets its lists stay items of the
   .footer-columns grid above, so every breakpoint lays them out as before. */
.footer-nav {
  display: contents;
}

.footer-col {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer-col li+li {
  margin-top: var(--space-lg);
}

.footer-col a {
  font-size: var(--fs-body);
  color: var(--epcm-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--ease-default);
}

.footer-col a:hover,
.footer-col a:focus {
  color: var(--epcm-teal);
}

/* Newsletter — divided from the link columns by a vertical rule */

.footer-newsletter {
  padding-left: var(--space-lg);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-newsletter__title {
  font-size: var(--fs-h6);
  font-weight: 700;
  color: var(--epcm-white);
  margin: 0 0 var(--space-sm);
}

.footer-newsletter p {
  font-size: var(--fs-body);
  color: var(--epcm-white);
  margin: 0 0 var(--space-xs);
}

.newsletter-form {
  display: flex;
  margin-top: var(--space-md);
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: 0;
  background: var(--epcm-white);
  color: var(--epcm-navy);
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
}

.newsletter-form input::placeholder {
  color: var(--epcm-gray);
}

.newsletter-form input:focus {
  outline: 2px solid var(--epcm-green);
  outline-offset: -2px;
}

.newsletter-form button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 26px;
  border: none;
  border-radius: 0;
  background: var(--epcm-green);
  color: var(--epcm-white);
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition: filter var(--ease-default);
}

.newsletter-form button:hover,
.newsletter-form button:focus {
  filter: brightness(1.08);
}

/* Footer bottom bar — light band under the navy footer */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  background: var(--epcm-white);
  padding: var(--space-sm) var(--space-xl);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-socials a {
  display: flex;
  color: var(--epcm-navy);
  transition: color var(--ease-default);
}

.footer-socials a:hover,
.footer-socials a:focus {
  color: var(--epcm-blue-light);
}

.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--epcm-gray-light);
  border-radius: var(--radius-sm);
  color: var(--epcm-navy);
  transition:
    background var(--ease-default),
    border-color var(--ease-default);
}

.back-to-top:hover,
.back-to-top:focus {
  background: var(--epcm-off-white);
  border-color: var(--epcm-gray);
  color: var(--epcm-navy);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Responsive */

@media (max-width: 1200px) {

  .header-row-1,
  .main-nav,
  .footer-main,
  .footer-bottom {
    padding-inline: var(--gutter);
  }

  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-newsletter {
    grid-column: 1 / -1;
    margin-top: var(--space-lg);
    padding-left: 0;
    /* padding-top: 70px; */
    border-left: none;
    /* border-top: 1px solid #fff; */
  }
}

@media (max-width: 768px) {
  .header-row-1 {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--gutter);
    margin-inline: unset !important;
  }

  .header-search {
    /* order: 3; */
    flex-basis: 100%;
    max-width: 100%;
  }

  .main-nav {
    height: auto;
    padding: var(--space-sm) var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav__list {
    gap: var(--space-md);
  }

  .main-nav a {
    font-size: var(--fs-caption);
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }

  .footer-col {
    text-align: left;
  }

  .footer-col li+li {
    margin-top: var(--space-sm);
  }

}

/* Bidder registration form — templates/register.php.
   Submitted via the Kanzu EPCM Auctions plugin (assets/js/script.js). */
.register_form {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--gutter);
}

.register_form h1 {
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  color: var(--epcm-navy);
  margin-bottom: var(--space-xs);
}

.register_form__intro {
  color: var(--epcm-gray);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--space-lg);
}

.register_form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.register_form label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--epcm-navy);
  margin-bottom: var(--space-xs);
}

.register_form input,
.register_form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--epcm-gray-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  font-size: var(--fs-body-sm);
  color: var(--epcm-navy);
  background: var(--epcm-white);
  transition: border-color var(--ease-default);
}

.register_form textarea {
  resize: vertical;
}

.register_form input:focus,
.register_form textarea:focus {
  /* outline: none; Replaced by the site-wide focus ring (design.css): the faint
     green glow below was too pale for keyboard users to find. */
  outline: var(--epcm-focus-ring);
  outline-offset: 2px;
  border-color: var(--epcm-green);
  box-shadow: 0 0 0 3px rgba(117, 175, 0, 0.15);
}

.register_form small {
  display: block;
  margin-top: 6px;
  color: var(--epcm-gray);
  font-size: var(--fs-micro);
}

/* Robot check — the wrapper is printed by the plugin (epcm_recaptcha()). */
.register_form .epcm-recaptcha {
  margin: 0 0 var(--space-md);
}

.register_form .g-recaptcha {
  display: inline-block;
  max-width: 100%;
}

@media (max-width: 360px) {
  .register_form .g-recaptcha {
    transform: scale(0.87);
    transform-origin: 0 0;
  }
}

.register_form button[type="submit"] {
  width: 100%;
}

/* While a form is sending. script.js now sets aria-disabled rather than
   disabled, so the button keeps keyboard focus (see changelog). */
.register_form button[disabled],
.register_form button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* Validation feedback — populated by script.js. */
.epcm-field--invalid {
  border-color: #d63638 !important;
}

.epcm-field-error {
  display: block;
  margin-top: 6px;
  color: #d63638;
  /* Red and bold, so a field's own error reads as the thing to fix. */
  font-weight: 700;
  font-size: var(--fs-body-sm);
}

.epcm-field-error:empty {
  display: none;
}

.epcm-form-message {
  margin-bottom: var(--space-md);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}

.epcm-form-message:empty {
  display: none;
}

.epcm-form-message--success {
  background: rgba(117, 175, 0, 0.12);
  border-left: 3px solid var(--epcm-green);
  color: #3f5e00;
}

.epcm-form-message--error {
  background: rgba(214, 54, 56, 0.1);
  border-left: 3px solid #d63638;
  color: #8a1f20;
}

@media (max-width: 768px) {
  .register_form {
    padding: var(--space-lg) var(--gutter);
  }
}

/* .epcm-card and .epcm-bookmark are listed too, so cards and bookmark buttons
   carry their own colours and look right on any page, in any wrapper.
   .epcm-listing (Auction Calendar) is listed so its pager and empty state get
   the same radius and gap as the other listings. */
.epcm-carousel,
.epcm-event,
.epcm-items,
.epcm-archive,
.epcm-listing,
.epcm-bookmarks,
.epcm-card,
.epcm-bookmark {
  --_navy: var(--epcm-navy, #121b3c);
  --_gray: var(--epcm-gray, #777777);
  --_line: var(--epcm-gray-light, #d0d0d1);
  --_blue: var(--epcm-blue-light, #0097e9);
  --_white: var(--epcm-white, #ffffff);
  --_font: var(--font-primary, "Poppins", sans-serif);
  --_gap: var(--card-gap, 25px);
  --_radius: var(--radius-sm, 4px);
  --_shadow: var(--shadow-hover, 0 6px 24px rgba(18, 27, 60, 0.14));
  --_ease: var(--ease-default, 180ms ease-out);
  font-family: var(--_font);
  color: var(--_navy);
}

/* ---- Carousel section ------------------------------------------------- */

.epcm-carousel {
  padding-block: var(--space-lg, 40px);
}

.epcm-carousel__header,
.epcm-items__header,
.epcm-archive__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-md, 24px);
}

.epcm-carousel__title,
.epcm-items__title,
.epcm-archive__title {
  margin: 0;
  font-size: var(--fs-h2, 32px);
  font-weight: 500;
  line-height: var(--lh-tight, 1.2);
  color: var(--_navy);
}

.epcm-carousel__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body, 17px);
}

.epcm-carousel__arrow {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 22px;
  line-height: 1;
  color: var(--_navy);
  cursor: pointer;
  transition:
    color var(--_ease),
    opacity var(--_ease);
}

.epcm-carousel__arrow:hover,
.epcm-carousel__arrow:focus-visible {
  /* color: var(--_blue); */
  color: #fff;
}

/* At the first or last page. carousel.js now sets aria-disabled rather than
   disabled, so an arrow keeps keyboard focus when it reaches the end. */
.epcm-carousel__arrow[disabled],
.epcm-carousel__arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}

.epcm-carousel__view-all {
  color: var(--_navy);
  text-decoration: none;
  font-weight: 400;
}

.epcm-carousel__view-all:hover {
  color: var(--_blue);
}

.epcm-carousel__track {
  --_per-view: 4;
  /* Rows of cards per page. 1 everywhere except the Featured Equipment
     carousel below, which asks for 2. */
  --_rows: 1;
  /* matches the calendar grid's card width */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--_rows), auto);
  grid-auto-columns: calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view));
  gap: var(--_gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px;
  outline: none;
}

.epcm-carousel__track::-webkit-scrollbar {
  display: none;
}

.epcm-carousel__track:focus-visible {
  box-shadow: 0 0 0 2px var(--_blue);
  border-radius: var(--_radius);
}

.epcm-carousel__item {
  scroll-snap-align: start;
  min-width: 0;
}

.epcm-carousel__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: var(--space-md, 24px);
  font-size: var(--fs-body, 17px);
}

.epcm-carousel__dots {
  display: flex;
  gap: 8px;
}

.epcm-carousel__dots:empty {
  display: none;
}

.epcm-carousel__dot {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--_line);
  cursor: pointer;
  transition:
    background var(--_ease),
    transform var(--_ease);
}

.epcm-carousel__dot.is-active {
  background: var(--_navy);
  transform: scale(1.15);
}

/* .epcm-items__empty and .epcm-archive__empty: replaced by .epcm-empty (template-parts/empty-state.php).
.epcm-carousel__empty,
.epcm-items__empty,
.epcm-archive__empty {
  color: var(--_gray);
}
*/
.epcm-carousel__empty {
  color: var(--_gray);
}

@media (max-width: 1200px) {
  .epcm-carousel__track {
    --_per-view: 4;
  }
}

@media (max-width: 992px) {
  .epcm-carousel__track {
    --_per-view: 3;
  }
}

@media (max-width: 720px) {
  .epcm-carousel__track {
    --_per-view: 2;
  }

  .epcm-carousel__nav .epcm-carousel__view-all {
    display: none;
  }
}

@media (max-width: 480px) {
  .epcm-carousel__track {
    --_per-view: 1.15;
  }
}

/* ---- Two-row carousel (Featured Equipment) ---------------------------- */

/* template-parts/home-featured-equipment.php passes this modifier. Each page
   is --_per-view cards wide and --_rows cards tall, so the design's 1920px
   screen shows 5 x 2 = 10 items at once and a phone shows 1 x 2 = 2. The
   arrows and dots then page through the rest.
 step-down ladder: the single-row carousels above start at 4 per
   view, this one starts at 5, so each card stays around 300-350px wide. */
.epcm-carousel--two-row .epcm-carousel__track {
  --_per-view: 5;
  --_rows: 2;
}

@media (max-width: 1400px) {
  .epcm-carousel--two-row .epcm-carousel__track {
    --_per-view: 4;
  }
}

@media (max-width: 1100px) {
  .epcm-carousel--two-row .epcm-carousel__track {
    --_per-view: 3;
  }
}

@media (max-width: 900px) {
  .epcm-carousel--two-row .epcm-carousel__track {
    --_per-view: 2;
  }
}

/* Phones: one card per page, two rows deep — the two items the design shows.
   Paging still works; there are just 2 cards a page instead of 10. */
@media (max-width: 700px) {
  .epcm-carousel--two-row .epcm-carousel__track {
    --_per-view: 1;
  }

  /* The design puts "<- View all ->" under the cards on a phone instead of
     the arrows sitting beside the heading. display: contents lets the title
     and the nav be ordered as if they were children of the section, so the
     markup stays the same for every carousel. */
  .epcm-carousel--two-row {
    display: flex;
    flex-direction: column;
  }

  .epcm-carousel--two-row .epcm-carousel__header {
    display: contents;
  }

  .epcm-carousel--two-row .epcm-carousel__title {
    order: 1;
    margin-bottom: var(--space-md, 24px);
    text-align: center !important;
    font-size: 29px;
  }

  .epcm-carousel--two-row .epcm-carousel__track {
    order: 2;
  }

  .epcm-carousel--two-row .epcm-carousel__nav {
    order: 3;
    justify-content: center;
    margin-top: var(--space-md, 24px);
  }

  /* Undoes the single-row rule above, which hides this link on a phone. */
  .epcm-carousel--two-row .epcm-carousel__nav .epcm-carousel__view-all {
    display: inline;
  }

  /* One dot per page would be a long row of them at 2 items a page. The
     arrows moved above by .epcm-carousel__nav are how you page on a phone. */
  .epcm-carousel--two-row .epcm-carousel__footer {
    display: none;
  }
}

/* ---- Card (shared by events and equipment) ---------------------------- */

.epcm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--_white);
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  overflow: hidden;
  transition:
    box-shadow var(--_ease),
    transform var(--_ease);
}

.epcm-card:hover {
  box-shadow: var(--_shadow);
  transform: translateY(-2px);
}

/* ---- Whole-card link --------------------------------------------------- */

.epcm-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.epcm-card:hover .epcm-card__title a {
  color: var(--_blue);
}

.epcm-card:has(:focus-visible) {
  box-shadow: var(--_shadow);
  outline: var(--epcm-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .epcm-card:hover {
    transform: none;
  }
}

.epcm-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--_navy);
  color: var(--_white);
  font-size: var(--fs-body-sm, 15px);
  line-height: 1.3;
}

.epcm-card__dates {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.epcm-card__flag {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--_white);
}

.epcm-card__title {
  margin: 0;
  padding: 12px 14px;
  font-size: var(--fs-body, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--_navy);
}

/* The clamp sits on the anchor, not the heading: as the heading's only
   child it is the box that actually holds the line boxes, so clamping it
   is what stops a long title spilling over the image. min-height reserves
   two lines either way, which keeps the images aligned across a row. */
.epcm-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
  color: inherit;
  text-decoration: none;
}

.epcm-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* max-width: 100%; */
  background: var(--epcm-off-white, #f9f9f9);
}

.epcm-card__media>a {
  display: block;
  width: 100%;
  height: 100%;
}

.epcm-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.epcm-card__image--placeholder {
  background: linear-gradient(135deg, #e6e8ee, #f9f9f9);
}

.epcm-card__body {
  padding: 14px 14px 18px;
  font-size: var(--fs-body-sm, 15px);
  line-height: 1.6;
  color: var(--_gray);
}

.epcm-card__body p {
  margin: 0;
}

.epcm-card__lead {
  font-weight: 700;
  color: var(--_navy);
  margin-bottom: 6px !important;
}

.epcm-card__bid {
  margin-top: 8px !important;
  font-weight: 600;
  color: var(--_navy);
}

/* ---- Bookmark button (Bookmarks: single items and auctions) ----------- */

.epcm-bookmark {
  position: absolute;
  /* Above the whole-card link (.epcm-card__link, z-index: 1), so a click here
     saves the item instead of opening the card. */
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--_white);
  color: var(--_gray);
  /* Not saved: grey icon with a plus. */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(18, 27, 60, 0.18);
  transition:
    color var(--_ease),
    transform var(--_ease);
}

.epcm-bookmark:hover,
.epcm-bookmark:focus-visible {
  transform: scale(1.06);
}

.epcm-bookmark__check {
  display: none;
}

/* Saved: same white background, blue icon, tick instead of the plus. */
.epcm-bookmark.is-active {
  color: var(--_blue);
}

.epcm-bookmark.is-active .epcm-bookmark__plus {
  display: none;
}

.epcm-bookmark.is-active .epcm-bookmark__check {
  display: inline;
}

/* Saving: script.js adds is-busy until the server answers, and the icon is
   swapped for a small spinning ring. */
.epcm-bookmark.is-busy {
  pointer-events: none;
}

.epcm-bookmark.is-busy .epcm-bookmark__icon {
  display: none;
}

/* The spinning ring. The bookmark button shows it while saving, and the
   auction listings reuse it as .epcm-spinner (a bigger one, see
   "Paged results") while a slow page loads. */
.epcm-bookmark.is-busy::after,
.epcm-spinner {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid var(--_line, #d0d0d1);
  border-top-color: var(--_blue, #0097e9);
  border-radius: 50%;
  animation: epcm-bookmark-spin 0.7s linear infinite;
}

@keyframes epcm-bookmark-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Bookmark alert ---------------------------------------------------- */

.epcm-bookmark-alert-host {
  position: relative;
}

.epcm-bookmark-alert {
  position: absolute;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, calc(-100% - 8px));
  box-sizing: border-box;
  width: 70%;
  min-width: min(320px, 100%);
  margin: 0;
  padding: 12px 20px;
  box-shadow: 0 6px 24px rgba(18, 27, 60, 0.14);
  border: 1px solid rgba(117, 175, 0, 0.35);
  border-radius: var(--radius-sm, 4px);
  background: #f1f7e6;
  color: #3f5e00;
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: var(--fs-body-sm, 15px);
  font-weight: 600;
  text-align: center;
}

.epcm-bookmark-alert:empty {
  display: none;
}

.epcm-bookmark-alert--error {
  border-color: rgba(214, 54, 56, 0.35);
  background: #fbeaea;
  /* Light red. */
  color: #8a1f20;
  /* The same as the form error message. */
}

/* ---- Single event ----------------------------------------------------- */

.epcm-event {
  margin-bottom: var(--space-lg, 40px);
}

.epcm-event__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--_navy);
  color: var(--_white);
  border-radius: var(--_radius);
  font-size: var(--fs-body-sm, 15px);
}

.epcm-event__status {
  padding: 2px 10px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-micro, 12px);
}

.epcm-event--live .epcm-event__status {
  background: var(--epcm-green, #75af00);
}

.epcm-event__country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.epcm-event__bar .epcm-bookmark {
  position: static;
  margin-left: auto;
  width: 36px;
  height: 36px;
  box-shadow: none;
}

.epcm-event__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 24px;
  margin: var(--space-md, 24px) 0 0;
  padding: 0;
}

.epcm-event__facts>div {
  border-left: 3px solid var(--_line);
  padding-left: 12px;
}

.epcm-event__facts .epcm-event__locations {
  grid-column: 1 / -1;
}

.epcm-event__facts dt {
  font-size: var(--fs-caption, 13px);
  color: var(--_gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.epcm-event__facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--_navy);
}

/* ---- Lot grid / archive grid ----------------------------------------- */

.epcm-items {
  margin-top: var(--space-xl, 60px);
}

.epcm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--_gap, 25px);
}

/* ---- Bookmarks dashboard ([epcm_bookmarks]) --------------------------- */

.epcm-bookmarks {
  margin-block: var(--space-lg, 40px);
}

.epcm-bookmarks__title,
.epcm-bookmarks__heading {
  margin-bottom: 16px;
  color: var(--_navy);
}

.epcm-bookmarks__section+.epcm-bookmarks__section {
  margin-top: var(--space-lg, 40px);
}

/* The wrapper only marks a card for the JS, so let the card sit in the
   grid exactly as if the wrapper weren't there. */
.epcm-bookmarks__item {
  display: contents;
}

.epcm-bookmarks__guest,
.epcm-bookmarks__empty {
  color: var(--_gray);
}

.epcm-bookmarks__guest a {
  color: var(--_blue);
  font-weight: 600;
}

.epcm-pagination {
  margin-top: var(--space-lg, 40px);
  text-align: center;
}

.epcm-pagination .page-numbers {
  display: inline-block;
  min-width: 36px;
  padding: 6px 10px;
  margin: 2px;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  color: var(--_navy);
  text-decoration: none;
}

.epcm-pagination .page-numbers.current {
  background: var(--_navy);
  border-color: var(--_navy);
  color: var(--_white);
}

/* ---- Paged results: empty and loading states --------------------------
   Shared by the Auction Calendar, a single auction's items and /auctions/
   (inc/class-paged-results.php, assets/js/paged-results.js). */

/* Replaces the plain grey <p> empty messages. */
.epcm-empty {
  padding: var(--space-xl, 60px) var(--space-md, 24px);
  background: var(--_white, #ffffff);
  border: 1px dashed var(--_line, #d0d0d1);
  border-radius: var(--_radius, 4px);
  text-align: center;
}

.epcm-empty__title {
  margin: 0 0 8px;
  font-size: var(--fs-h5, 20px);
  font-weight: 600;
  line-height: var(--lh-tight, 1.2);
  color: var(--_navy, #121b3c);
}

.epcm-empty__message {
  max-width: 48ch;
  margin: 0 auto;
  color: var(--_gray, #777777);
}

.epcm-empty__action {
  margin-top: var(--space-sm, 16px);
}

/* paged-results.js only moves focus here after loading a page, so screen
   readers start at the new results; there is nothing to outline. */
[data-epcm-results]:focus {
  outline: none;
}

[data-epcm-results] {
  position: relative;
}

[data-epcm-results][aria-busy="true"] {
  cursor: progress;
}

/* Slow page load: paged-results.js adds is-loading after a short delay. The
   current cards stay where they are and fade back, so the page doesn't jump. */
[data-epcm-results].is-loading> :not(.epcm-results-loader) {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--_ease, 180ms ease-out);
}

/* Covers the results. The spinner stays in the middle of the screen (sticky),
   even when the pager that was clicked is far down the page. */
.epcm-results-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--space-xl, 60px);
}

/* The bookmark's spinning ring (.epcm-spinner), just bigger. */
.epcm-results-loader .epcm-spinner {
  position: sticky;
  top: calc(50vh - 22px);
  width: 44px;
  height: 44px;
  border-width: 4px;
}

/* ---- Archive tabs ----------------------------------------------------- */

.epcm-archive__tabs {
  display: flex;
  gap: 8px;
}

.epcm-archive__tab {
  padding: 8px 16px;
  border: 1px solid var(--_line);
  border-radius: var(--radius-pill, 999px);
  color: var(--_navy);
  text-decoration: none;
  font-size: var(--fs-body-sm, 15px);
}

.epcm-archive__tab.is-active {
  background: var(--_navy);
  border-color: var(--_navy);
  color: var(--_white);
}

@media (max-width: 600px) {

  .epcm-archive__header,
  .epcm-items__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Countdown on live equipment cards --------------------------------
   Markup: template-parts/card-equipment.php ('show_countdown'), ticked by
   assets/js/countdown.js. Sits under the card's bid line. */

.epcm-card__countdown {
  margin-top: 4px !important;
  color: var(--_navy);
  font-variant-numeric: tabular-nums;
}

.epcm-card__countdown-label {
  color: var(--_gray);
}

.epcm-card__countdown-time {
  font-weight: 600;
}

.epcm-card__countdown.is-ended {
  color: var(--_gray);
}

/* =========================================================================
   Homepage
   Markup: templates/landing-page.php. A grey band holding the sections, split by a
   hairline, at the same width as the header and the listing page.
   ========================================================================= */

.epcm-home {
  background: var(--epcm-off-white, #f9f9f9);
}

.epcm-home__inner {
  /* max-width: var(--container-wide, 1920px);
  margin-inline: auto;
  padding-inline: var(--space-xl, 60px);
  padding-block: var(--space-md, 24px); */
}

.epcm-home__inner>section+section {
  /* border-top: 1px solid var(--epcm-gray-light, #d0d0d1); */
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

/* Same step-down as the listing page: --space-xl eats a phone screen. */
@media (max-width: 768px) {
  .epcm-home__inner {
    /* padding-inline: var(--gutter, 16px); */
  }
}

/* =========================================================================
   Auction listing page
   Markup: templates/auction-event-listing.php + template-parts/auction-filters.php.
   Page heading on white, then a grey band holding the facet sidebar and the
   card grid. Cards are the shared .epcm-card from the section above.
   ========================================================================= */

.epcm-listing {
  /* Replaced by the shared private variables block (.epcm-carousel, .epcm-listing, ...):
  --_navy: var(--epcm-navy, #121b3c);
  --_gray: var(--epcm-gray, #777777);
  --_line: var(--epcm-gray-light, #d0d0d1);
  --_blue: var(--epcm-blue-light, #0097e9);
  --_white: var(--epcm-white, #ffffff);
  */
  --_band: var(--epcm-off-white, #f9f9f9);
  --_sidebar: 220px;
  font-family: var(--font-primary, "Poppins", sans-serif);
  color: var(--_navy);
}

/* Matches the header and footer rows, so the sidebar lines up with the logo. */
.epcm-listing__inner {
  max-width: var(--container-wide, 1920px);
  margin-inline: auto;
  padding-inline: var(--space-xl, 60px);
}

/* ---- Heading band ----------------------------------------------------- */

.epcm-listing__head {
  background: var(--_white);
  padding-block: var(--space-lg, 40px) var(--space-md, 24px);
}

.epcm-listing__title {
  margin: 0;
  font-size: var(--fs-display, 36px);
  font-weight: 700;
  line-height: var(--lh-tight, 1.2);
  color: var(--_navy);
}

.epcm-listing__intro {
  max-width: 70ch;
  margin-top: var(--space-sm, 16px);
  font-size: var(--fs-body, 17px);
  color: var(--_gray);
}

.epcm-listing__intro> :last-child {
  margin-bottom: 0;
}

/* ---- Grey band: sidebar + results ------------------------------------- */

.epcm-listing__body {
  background: var(--_band);
  padding-block: var(--space-lg, 40px) var(--space-2xl, 80px);
}

.epcm-listing__layout {
  display: grid;
  grid-template-columns: var(--_sidebar) minmax(0, 1fr);
  gap: var(--space-lg, 40px);
  align-items: start;
}

.epcm-listing__sidebar {
  min-width: 0;
}

.epcm-listing__results {
  min-width: 0;
}

/* Four across, as drawn. Cards keep their own internal layout. */
.epcm-listing__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap, 25px);
}

/* Replaced by .epcm-empty (template-parts/empty-state.php):
.epcm-listing__empty {
  margin: 0;
  padding: var(--space-lg, 40px) 0;
  color: var(--_gray);
}
*/

.epcm-listing .epcm-pagination {
  text-align: left;
}

/* ---- Filter form ------------------------------------------------------ */

/* The group titles already label the controls; the form heading is there for
   screen readers, which announce the landmark before reaching them. */
.epcm-filters__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.epcm-filters__group {
  padding-block: var(--space-md, 24px);
  border-bottom: 1px solid var(--_line);
}

.epcm-filters__group:first-of-type {
  padding-top: 0;
}

.epcm-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle; the caret below replaces it. */
.epcm-filters__summary::-webkit-details-marker {
  display: none;
}

.epcm-filters__summary::marker {
  content: "";
}

.epcm-filters__summary:focus-visible {
  outline: 2px solid var(--_blue);
  outline-offset: 4px;
}

.epcm-filters__title {
  font-size: var(--fs-h5, 20px);
  font-weight: 700;
  line-height: var(--lh-tight, 1.2);
  color: var(--_navy);
}

.epcm-filters__caret {
  flex: 0 0 auto;
  color: var(--_navy);
  transition: transform var(--ease-default, 180ms ease-out);
}

.epcm-filters__group:not([open]) .epcm-filters__caret {
  transform: rotate(-90deg);
}

.epcm-filters__list {
  display: grid;
  gap: 10px;
  margin: var(--space-sm, 16px) 0 0;
  padding: 0;
  list-style: none;
}

.epcm-filters__item {
  margin: 0;
}

.epcm-filters__option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.epcm-filters__label {
  flex: 1 1 auto;
  font-size: var(--fs-body-sm, 15px);
  line-height: 1.4;
  color: var(--_navy);
  transition: color var(--ease-default, 180ms ease-out);
}

.epcm-filters__option:hover .epcm-filters__label {
  color: var(--_blue);
}

.epcm-filters__chevron {
  flex: 0 0 auto;
  color: var(--_gray);
}

/* Custom checkbox: a square that fills navy with a white tick when ticked.
   The selectors carry `.epcm-filters input` because Astra prints
   `input[type="checkbox"]:checked { background-color: … }` inline in the
   head, and a bare class loses to it — the box came out Astra blue. */
.epcm-filters input.epcm-filters__checkbox {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--_line);
  border-radius: 3px;
  background: var(--_white);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--ease-default, 180ms ease-out),
    border-color var(--ease-default, 180ms ease-out);
}

.epcm-filters input.epcm-filters__checkbox::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--_white);
  border-bottom: 2px solid var(--_white);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.epcm-filters input.epcm-filters__checkbox:checked,
.epcm-filters input.epcm-filters__checkbox:hover:checked,
.epcm-filters input.epcm-filters__checkbox:focus:checked {
  background-color: var(--_navy);
  border-color: var(--_navy);
}

.epcm-filters input.epcm-filters__checkbox:checked::after {
  opacity: 1;
}

.epcm-filters input.epcm-filters__checkbox:focus-visible {
  outline: 2px solid var(--_blue);
  outline-offset: 2px;
}

.epcm-filters__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm, 16px);
  margin-top: var(--space-md, 24px);
}

/* With JS on, ticking a box submits — so Apply is noise. */
.epcm-filters[data-epcm-auto] .epcm-filters__submit {
  display: none;
}

/* Keep one line of room for "Clear all" even when nothing is ticked, so the
   sidebar stays the same height whether the link is there or not. */
.epcm-filters[data-epcm-auto] .epcm-filters__actions {
  min-height: calc(var(--fs-body-sm, 15px) * 1.5);
}

.epcm-filters__clear {
  font-size: var(--fs-body-sm, 15px);
  line-height: 1.5;
  color: var(--_gray);
  text-decoration: underline;
}

.epcm-filters__clear:hover,
.epcm-filters__clear:focus {
  color: var(--_blue);
}

/* ---- Mobile: the sidebar collapses behind a Filters button ------------- */

.epcm-listing__filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--_line);
  border-radius: var(--radius-pill, 999px);
  background: var(--_white);
  font-family: inherit;
  font-size: var(--fs-body-sm, 15px);
  font-weight: 600;
  color: var(--_navy);
  cursor: pointer;
}

.epcm-listing__filters-toggle[hidden] {
  display: none;
}

.epcm-listing__sidebar[data-epcm-collapsed] {
  display: none;
}

@media (max-width: 1400px) {
  .epcm-listing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .epcm-listing {
    --_sidebar: 190px;
  }
}

@media (max-width: 900px) {
  .epcm-listing__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .epcm-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .epcm-listing__sidebar {
    padding: var(--space-md, 24px);
    background: var(--_white);
    border: 1px solid var(--_line);
    border-radius: var(--radius-sm, 4px);
  }
}

/* --space-xl is a section rhythm, not a gutter: at phone widths it eats the
   screen. Fall back to --gutter, which the token scale already shrinks. */
@media (max-width: 768px) {
  .epcm-listing__inner {
    padding-inline: var(--gutter, 16px);
  }

  .footer-brand-row img {
    height: 28px !important;
  }
}

@media (max-width: 520px) {
  .epcm-listing__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Search results
   Markup: search.php. The Auction Calendar layout above (.epcm-listing)
   without the sidebar, plus a result count and the All / Equipment /
   Auctions tabs (.epcm-archive__tab). Cards are the shared .epcm-card.
   ========================================================================= */

.epcm-search__summary {
  margin: var(--space-xs, 8px) 0 0;
  font-size: var(--fs-body, 17px);
  color: var(--_gray);
}

.epcm-search__tabs {
  flex-wrap: wrap;
  margin-top: var(--space-md, 24px);
}

.epcm-search .epcm-archive__tab {
  transition:
    border-color var(--_ease),
    color var(--_ease);
}

.epcm-search .epcm-archive__tab:not(.is-active):hover {
  border-color: var(--epcm-teal, #27c0b7);
  color: var(--_navy);
}

/* Sign-in form — templates/login.php.
   Reuses the .register_form shell above via a second class on the wrapper, so
   only what genuinely differs lives here. */

.register_form input[type="checkbox"] {
  width: auto;
  /* .register_form input sets width:100% */
  margin-right: 8px;
  vertical-align: middle;
}

.login_form__remember label {
  display: inline;
  font-weight: 400;
}

.login_form__links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--fs-body-sm);
}

/* =========================================================================
   Bidder dashboard — WooCommerce My Account (/my-account/)
   Markup: template-parts/account-*.php, card-bid-panel.php and
   woocommerce/myaccount/dashboard.php. Data and behaviour come from the Kanzu
   EPCM Auctions plugin (Account, My_Bids, assets/js/my-bids.js).
   Items and auctions are the same .epcm-card as the home page, in .epcm-grid;
   an equipment card gains a bid panel at its foot. No drawn design yet (UX-6).
   ========================================================================= */

.epcm-my-bids,
.epcm-account-summary,
.epcm-account-section,
.epcm-account-banner,
.epcm-account-details,
.epcm-payment-box {
  --_navy: var(--epcm-navy, #121b3c);
  --_gray: var(--epcm-gray, #777777);
  --_line: var(--epcm-gray-light, #d0d0d1);
  --_blue: var(--epcm-blue-light, #0097e9);
  --_white: var(--epcm-white, #ffffff);
  --_amber: #9a5b00;
  --_red: #b32d2e;
  --_radius: var(--radius-sm, 4px);
  --_ease: var(--ease-default, 180ms ease-out);
  font-family: var(--font-primary, "Poppins", sans-serif);
  color: var(--_navy);
}

.btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: var(--fs-caption, 13px);
}

/* ---- My Bids: tabs, grid, notices ------------------------------------- */

.epcm-my-bids__tabs {
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 24px);
}

.epcm-my-bids__count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(18, 27, 60, 0.08);
  font-size: var(--fs-micro, 12px);
  line-height: 20px;
  text-align: center;
}

.epcm-archive__tab.is-active .epcm-my-bids__count {
  background: rgba(255, 255, 255, 0.2);
}

.epcm-my-bids__empty,
.epcm-account-section__empty {
  color: var(--_gray);
}

.epcm-my-bids__notice {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 3px solid var(--_blue);
  background: rgba(0, 151, 233, 0.08);
  font-size: var(--fs-body-sm, 15px);
}

/* The wrapper only carries the row's data-epcm-* attributes for my-bids.js,
   so let the card sit in the grid exactly as if it weren't there. */
.epcm-my-bids__item {
  display: contents;
}

.epcm-my-bids__item.is-ended .epcm-card {
  opacity: 0.6;
}

/* ---- Bid panel at the foot of an equipment card ----------------------- */

.epcm-card__bid-panel {
  /* Above the whole-card link (.epcm-card__link, z-index: 1): "Download
     invoice" and "Bid again" take their own clicks, and the bid figures can
     still be selected and copied. */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--_line);
}

.epcm-card__bid-facts {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
}

.epcm-card__bid-facts>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.epcm-card__bid-facts dt {
  color: var(--_gray);
  font-size: var(--fs-caption, 13px);
}

.epcm-card__bid-facts dd {
  margin: 0;
  color: var(--_navy);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.epcm-card__bid-panel .btn {
  width: 100%;
}

.epcm-my-bids__time {
  white-space: nowrap;
}

.epcm-my-bids__time.is-ended {
  color: var(--_gray);
  font-weight: 400;
}

/* ---- Status pills ----------------------------------------------------- */

.epcm-bid-status,
.epcm-invoice-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(18, 27, 60, 0.08);
  color: var(--_navy, #121b3c);
  font-size: var(--fs-micro, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.epcm-bid-status--leading,
.epcm-bid-status--won {
  background: rgba(117, 175, 0, 0.16);
  color: #3f5e00;
}

.epcm-bid-status--leading_reserve,
.epcm-invoice-status--pending {
  background: rgba(154, 91, 0, 0.12);
  color: var(--_amber, #9a5b00);
}

.epcm-bid-status--outbid {
  background: rgba(179, 45, 46, 0.1);
  color: var(--_red, #b32d2e);
}

.epcm-bid-status--ended,
.epcm-bid-status--reserve_not_met,
.epcm-bid-status--bought_outright {
  background: rgba(119, 119, 119, 0.12);
  color: var(--_gray, #777777);
}

/* ---- Payment instructions, once above the Won cards ------------------- */

.epcm-payment-box {
  margin: 0 0 var(--space-md, 24px);
  padding: 14px 18px;
  border-left: 4px solid var(--epcm-green, #75af00);
  border-radius: var(--_radius);
  background: var(--epcm-off-white, #f9f9f9);
  font-size: var(--fs-body-sm, 15px);
}

.epcm-payment-box__title {
  margin: 0 0 6px;
  font-size: var(--fs-body, 17px);
  font-weight: 700;
  color: var(--_navy);
}

.epcm-payment-box p {
  margin: 6px 0;
}

.epcm-payment-box__accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  margin-top: 10px;
}

.epcm-payment-box__bank-name {
  margin: 0 0 4px !important;
  font-weight: 600;
}

.epcm-payment-box dl {
  display: grid;
  gap: 2px;
  margin: 0;
}

.epcm-payment-box dl>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.epcm-payment-box dt {
  color: var(--_gray);
  font-size: var(--fs-caption, 13px);
}

.epcm-payment-box dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Application banner ------------------------------------------------ */

.epcm-account-banner {
  margin: 0 0 var(--space-md, 24px);
  padding: 14px 18px;
  border-left: 4px solid var(--_blue);
  border-radius: var(--_radius);
  background: rgba(0, 151, 233, 0.08);
  font-size: var(--fs-body-sm, 15px);
}

.epcm-account-banner p {
  margin: 0;
}

.epcm-account-banner p+p {
  margin-top: 4px;
}

.epcm-account-banner__title {
  font-weight: 700;
}

.epcm-account-banner--pending {
  border-left-color: var(--_amber);
  background: rgba(154, 91, 0, 0.08);
}

.epcm-account-banner--rejected {
  border-left-color: var(--_red);
  background: rgba(179, 45, 46, 0.07);
}

/* ---- Dashboard: tiles, then card sections ------------------------------ */

.epcm-account-summary {
  margin-top: var(--space-md, 24px);
}

.epcm-account-summary__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epcm-account-summary__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_white);
  color: var(--_navy);
  text-decoration: none;
  transition:
    box-shadow var(--_ease),
    transform var(--_ease);
}

.epcm-account-summary__tile:hover,
.epcm-account-summary__tile:focus-visible {
  color: var(--_navy);
  box-shadow: var(--shadow-hover, 0 6px 24px rgba(18, 27, 60, 0.14));
  transform: translateY(-2px);
}

.epcm-account-summary__value {
  font-size: var(--fs-h2, 26px);
  font-weight: 700;
  line-height: 1.1;
}

.epcm-account-summary__label {
  color: var(--_gray);
  font-size: var(--fs-body-sm, 15px);
}

.epcm-account-summary__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: var(--space-md, 24px);
  font-size: var(--fs-body-sm, 15px);
}

.epcm-account-section {
  margin-top: var(--space-lg, 40px);
}

/* Same heading row as the home page carousels: title left, "View all" right. */
.epcm-account-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-sm, 16px);
}

.epcm-account-section__title {
  margin: 0;
  font-size: var(--fs-h4, 22px);
  font-weight: 500;
  line-height: var(--lh-tight, 1.2);
  color: var(--_navy);
}

.epcm-account-section__link {
  color: var(--_navy);
  font-size: var(--fs-body-sm, 15px);
  text-decoration: none;
  white-space: nowrap;
}

.epcm-account-section__link:hover {
  color: var(--_blue);
}

/* ---- Account details ---------------------------------------------------- */

.epcm-account-details {
  margin: 0 0 var(--space-md, 24px);
  padding: 0;
  border: 0;
}

.epcm-account-details legend {
  margin-bottom: 8px;
  font-weight: 600;
}

.epcm-account-details__locked {
  color: var(--_gray);
  font-size: var(--fs-body-sm, 15px);
}

/* Product page: the "only approved bidders can bid" notice (Bid_Gate). */
.epcm-bid-gate {
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .epcm-account-summary__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .epcm-home__inner>section+section {
    padding-inline: 30px !important;
  }
}

/* WooCommerce pages
   The child header replaces Astra's, so Astra's #content > .ast-container is
   never rendered and WooCommerce templates run edge to edge. On these pages
   Astra's WooCommerce and blog rules also outrank the header and heading
   styles above. Each rule here wins on specificity. */

.woocommerce-page #main-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* .woocommerce-page input[type=search] paints the header search box white. */
.woocommerce-page .site-header .header-search input,
.woocommerce-page .site-header .header-search input:focus {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Astra's .entry-title sizes the product h1 at 20px in its own grey. */
.woocommerce div.product .product_title {
  font-size: var(--fs-h1);
  color: var(--epcm-navy);
}

/* Bid row. In the markup the currency symbol comes before the input, but
   WooCommerce floats the quantity box and the Bid button, so the symbol's
   inline text wraps around them and lands on the right. A flex row ignores
   the floats and keeps DOM order: [R] [input] [Bid]. */
.woocommerce-page #yith-wcact-form-bid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.woocommerce-page #yith-wcact-form-bid .ywcact-your-bid-header {
  flex: 0 0 100%;
}

.woocommerce-page #yith-wcact-form-bid .ywcact-currency-symbol {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--epcm-navy);
}

/* YITH caps the box at 10em. Size the box, not the input inside it, so the
   Bid button sits right after it instead of at the far end of the row. */
.woocommerce-page #yith-wcact-form-bid .quantity {
  flex: 0 0 50%;
  width: auto;
  max-width: none;
  margin: 0;
}

.woocommerce-page #yith-wcact-form-bid .quantity .qty {
  width: 100%;
  text-align: left;
}

.woocommerce-page #yith-wcact-form-bid .auction_bid {
  flex: 0 0 auto;
}

.epcm-items,
.entry-content,
.epcm-event,
.epcm-single-event .entry-header {
  padding-inline: 24px;
}

/* Overtime notice
   Printed beside the end date by woocommerce/auction-end.php; YITH's own
   copy above the countdown is hidden. */
.woocommerce-page #yith-wcact-overtime {
  display: none;
}

.woocommerce-page .ywcact-auction-end-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.woocommerce-page .epcm-overtime[hidden] {
  display: none;
}

.woocommerce-page .epcm-overtime {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fdecea;
  color: #c62828;
  font-weight: 600;
  line-height: 1.6;
}

@media (min-width: 1810px) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr) minmax(600px, 1fr) !important;
  }
}

.form_required {
  color: red;
}