/* ==========================================================================
   Pro Auction — AuctionForge skin
   ==========================================================================

   AuctionForge only allows theme overrides for main/auction_list.php and
   services/configs.json. The shortcode templates, the auth forms and the
   modals are not overridable, so the only way to make them match the design
   system is to restyle the classes they emit.

   Everything below maps a bp-* / bpw-* class onto the tokens. No new colours,
   sizes or spacing values are introduced — if something is needed that the
   token system does not have, it goes in tokens.css first (§14).

   Scoped under .proauction-af so it cannot leak into wp-admin.
   ========================================================================== */

.proauction-af {
  --af-gap: var(--s-4);
}

/* --- Section titles the shortcodes print ---------------------------------- */
.proauction-af .bp-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--s-8);
}

/* --- Listing grid --------------------------------------------------------
   The plugin lays sales out with its own flex utilities. Grid gives even
   columns and matches the sale-card grid used elsewhere on the site.

   As many columns as fit, each at least 270px, stretched to fill the row:
   1 on a phone, 2 on a small tablet, 3-4 on a laptop, 5 at 1920. It was a
   fixed three columns, which at 1920 left each 310px card adrift in a 546px
   track. auto-fill (not auto-fit) keeps a short list — two upcoming sales —
   at card width instead of stretching it across the page. min(100%, …) stops
   a phone narrower than the minimum from scrolling sideways.

   Only containers that actually hold cards. The plugin uses the same
   bp-d-flex/bp-f-wrap utilities for the lot page's gallery and info column,
   which this rule used to chop into three narrow grid columns. */
.proauction-af .bp-d-flex.bp-f-wrap:has(> .bp-lot, > .bp-lot_auction) {
  display: grid;
  gap: var(--af-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

/* --- Sale card -----------------------------------------------------------
   Rebuilt to match .sale-card: hairline border, sharp corners, no shadow. */
/* The lot page wrapper (#single-lot) also carries .bp-lot; it is a page, not a card. */
.proauction-af .bp-lot:not(#single-lot),
.proauction-af .bp-lot_auction {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: none;
  width: auto;      /* the plugin sets fixed widths for its flex layout */
  max-width: none;  /* ...and caps lot cards at 310px (libs.css .bp-lots .bp-lot) */
  margin: 0;
  padding: 0;
}

.proauction-af .bp-lot__wrp-image,
.proauction-af .bp-lot__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}
.proauction-af .bp-lot__image img,
.proauction-af .bp-lot__wrp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-micro) var(--ease-out);
}
.proauction-af .bp-lot:hover .bp-lot__image img { transform: scale(var(--hover-scale)); }

.proauction-af .bp-lot__content,
.proauction-af .bp-lot__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}

.proauction-af .bp-lot__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.proauction-af .bp-lot__title a { color: var(--ink); text-decoration: none; }
.proauction-af .bp-lot__title a:hover { color: var(--brand-deep); }

/* Dates and lot counts are data — tabular figures, muted (§4.3). */
.proauction-af .bp-lot__date,
.proauction-af .bp-auction-start-date {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

.proauction-af .bp-lot__tool { margin-top: auto; padding-top: var(--s-3);
                               border-top: 1px solid var(--line); }
.proauction-af .bp-lot__tool__item { font-size: var(--fs-sm); color: var(--muted); }

/* --- Countdown -----------------------------------------------------------
   Fixed-width tabular figures so ticking never shifts layout (§9, CLS). */
.proauction-af .bp-countdown,
.proauction-af .bpw-countdown-row {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-variant-numeric: tabular-nums lining-nums;
}
.proauction-af .bp-countdown-number,
.proauction-af .bpw-cd-num {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  min-width: 2ch;
  display: inline-block;
  text-align: center;
}
.proauction-af .bp-countdown-text,
.proauction-af .bpw-cd-unit,
.proauction-af .bpw-countdown-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
/* Red is reserved for live and closing-soon states only (§4.2). */
.proauction-af .bp-text-red { color: var(--live); font-weight: var(--fw-semibold); }

/* --- Buttons -------------------------------------------------------------
   The plugin ships bp-btn-default / bp-btn-black. Mapped onto the site's
   primary and secondary so a bidder sees one button language throughout. */
.proauction-af .bp-btn,
.proauction-af .bpw-btn-primary,
.proauction-af .bpw-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.proauction-af .bp-btn-default,
.proauction-af .bpw-btn-primary {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
.proauction-af .bp-btn-default:hover,
.proauction-af .bpw-btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--white);
}

.proauction-af .bp-btn-black,
.proauction-af .bpw-btn-secondary {
  background: transparent;
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}
.proauction-af .bp-btn-black:hover,
.proauction-af .bpw-btn-secondary:hover { background: var(--brand-deep); color: var(--white); }

.proauction-af .bpw-btn-disabled {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
}

/* --- Wide upcoming banner ------------------------------------------------ */
.proauction-af .bpw-auction-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
  overflow: hidden;
}
.proauction-af .bpw-auction-img { border-radius: 0; }
.proauction-af .bpw-auction-body { padding: var(--s-6); display: flex;
                                   flex-direction: column; gap: var(--s-3); }
.proauction-af .bpw-date { font-size: var(--fs-sm); color: var(--muted);
                           font-variant-numeric: tabular-nums lining-nums; }
.proauction-af .bpw-desc { font-size: var(--fs-base); color: var(--slate); }
.proauction-af .bpw-buttons,
.proauction-af .bpw-buttons-single { display: flex; flex-wrap: wrap;
                                     gap: var(--s-3); margin-top: var(--s-2); }

/* --- Auth forms: login, register, profile --------------------------------
   These are the highest-stakes screens in the whole build. A registration
   form that looks unlike the rest of the site is where people abandon. */
.proauction-af .bp-form-group { display: flex; flex-direction: column;
                                gap: var(--s-2); margin-bottom: var(--s-4); }
.proauction-af .bp-form-group__inline,
.proauction-af .bp-form-group__inner { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.proauction-af .bp-form-control {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  min-height: 44px;
  box-shadow: none;
}
.proauction-af .bp-form-control:hover { border-color: var(--muted); }
.proauction-af .bp-form-control:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-color: var(--brand-deep);
}

.proauction-af label,
.proauction-af .bp-form-check-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--slate);
}
.proauction-af .bp-form-check { display: flex; align-items: flex-start;
                                gap: var(--s-2); }
.proauction-af .bp-form-check-input { margin-top: 3px; accent-color: var(--brand); }

/* §4.2: errors are ink with weight, never red — red on a bidding screen
   reads as "bid failed". */
.proauction-af .bp-form-error {
  color: var(--ink);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.proauction-af .bp-form-control.is-invalid,
.proauction-af .bp-form-control[aria-invalid="true"] {
  border-color: var(--ink);
  border-width: 2px;
}

.proauction-af .bp-login-link { color: var(--brand-deep); font-weight: var(--fw-medium); }

/* --- Modals -------------------------------------------------------------- */
.proauction-af .bp-modal,
.bp-modal__content {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
}

/* --- Empty state --------------------------------------------------------- */
.proauction-af .bp-auction-list-not-found,
.proauction-af .auction_list_not_found {
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-12) var(--s-6);
  text-align: center;
  color: var(--muted);
}

/* --- Lot page ------------------------------------------------------------
   The plugin's single-lot template carries the bidding, favourites and live
   bid display, so it stays; this lays it out. Before, the gallery and the
   info column were each chopped into three grid columns by the listing rule
   above (a 291px photo; title, premium and price in three skinny columns;
   the description wrapped at 307px), and the page ran edge to edge.

   Now: the site's content width; the gallery on the left with the
   description under it; the record rail on the right — title, price, the
   bid/premium panel, share and links. One column below 1024px, title first.

   .bp-body__main is display: contents so its children can be placed
   individually. The markup and the plugin's JS hooks are untouched. */
.proauction-af #single-lot {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: var(--s-6) var(--s-16);
}
.proauction-af #single-lot .bp-single-lot { margin: 0; width: auto; }
.proauction-af #single-lot .bp-single-lot > .bp-col { padding: 0; width: 100%; max-width: none; flex: none; }

/* Prev / next / go to lot. */
.proauction-af #single-lot .navigation-bar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  padding: 0 0 var(--s-4);
  margin: 0 0 var(--s-8);
  border-bottom: 1px solid var(--line);
}
.proauction-af #single-lot .navigation-bar .nav-item {
  flex: none;
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  text-decoration: none;
  position: static;
}
.proauction-af #single-lot .navigation-bar .nav-item:hover { color: var(--brand-deep); }
/* !important only because ajax/GoToLot.php prints its margin with !important. */
.proauction-af #single-lot .navigation-bar .af-goto-lot { margin-left: auto !important; gap: var(--s-2); }
.proauction-af #single-lot .navigation-bar .af-goto-lot input,
.proauction-af #single-lot .navigation-bar .af-goto-lot button { min-height: 44px; }

.proauction-af .bp-single-lot__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "gallery" "sold" "price" "actions" "desc" "tools";
  column-gap: var(--s-12);
  margin: 0;
}
.proauction-af .bp-single-lot__body > .bp-body__main { display: contents; }
.proauction-af .bp-single-lot__body > * ,
.proauction-af .bp-single-lot__body > .bp-body__main > * {
  width: auto;
  max-width: none;
  margin: 0;
  flex: none;
  min-width: 0;
}

.proauction-af .bp-single-lot__body #wrpLotImages {
  grid-area: gallery;
  display: block;
  width: auto;   /* libs.css: .bp-single-lot .bp-single-lot__body .bp-body__gallery { width: 50% } */
  padding: 0;
  margin-bottom: var(--s-6);
}
.proauction-af .bp-single-lot__body .bp-gallery-top {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  max-height: none;
}
/* The slide is 4:3 by padding; cap it so a tall screen is not all photo. */
.proauction-af .bp-single-lot__body .bp-gallery-top .swiper-slide { max-height: 70vh; }

.proauction-af .bp-single-lot__body .bp-desc { grid-area: title; margin-bottom: var(--s-4); }
.proauction-af .bp-single-lot__body .bp-desc h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

/* Price — "Sold for", the leading bid, or "Sold to you". */
.proauction-af .bp-single-lot__body #soldBid { grid-area: sold; }
.proauction-af .bp-single-lot__body #leadingBid { grid-area: price; margin-bottom: var(--s-4); }
.proauction-af .bp-single-lot__body .bp-control__notice {
  display: block;
  width: auto;
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-sm);
  color: var(--white);
}
/* The plugin's blue/green badges, mapped onto the palette. The label was
   inheriting body grey — unreadable on the blue. */
.proauction-af .bp-single-lot__body .bp-control__notice.bp-bg-blue { background: var(--brand-deep); }
.proauction-af .bp-single-lot__body .bp-control__notice.bp-bg-green { background: var(--sold); }
.proauction-af .bp-single-lot__body .bp-control__notice .bp-title {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: inherit;
  margin: 0;
}
.proauction-af .bp-single-lot__body .bp-control__notice .bp-bid {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Bid controls / buyer's premium panel — hairline record, not a shadowed card. */
.proauction-af .bp-single-lot__body .lot-actions-wrp {
  grid-area: actions;
  position: relative;
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
}
.proauction-af .bp-single-lot__body .lot-actions-wrp .bp-from { max-width: none; padding: 0; }
.proauction-af .bp-single-lot__body .bp-control__commission,
.proauction-af .bp-single-lot__body .bp-control__commission2 {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 var(--s-1);
  padding-right: var(--s-8); /* clear the favourite heart */
}

.proauction-af .bp-single-lot__body .bp-body__main_content { grid-area: desc; }
.proauction-af .bp-single-lot__body .bp-body__main_content .body {
  max-width: 72ch;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
}

/* Share and links. */
.proauction-af .bp-single-lot__body #wrpLotTools {
  grid-area: tools;
  display: block;
  margin-top: var(--s-6);
}
.proauction-af .bp-single-lot__body #wrpLotTools .title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-2);
}
.proauction-af .bp-single-lot__body #wrpLotTools .bp-share-btn-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.proauction-af .bp-single-lot__body #wrpLotTools ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.proauction-af .bp-single-lot__body #wrpLotTools ul li { border-bottom: 1px solid var(--line); }
.proauction-af .bp-single-lot__body #wrpLotTools ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
}
.proauction-af .bp-single-lot__body #wrpLotTools ul a:hover { color: var(--brand-deep); }

@media (min-width: 1024px) {
  .proauction-af .bp-single-lot__body {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    /* The last rail row takes the slack beside a tall gallery, so the rail
       stays packed at the top instead of spreading its rows apart. */
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
      "gallery title"
      "gallery sold"
      "gallery price"
      "gallery actions"
      "gallery tools"
      "desc    tools";
  }
  .proauction-af .bp-single-lot__body #wrpLotImages { margin-bottom: var(--s-8); }
  .proauction-af .bp-single-lot__body #wrpLotTools { margin-top: 0; }
}

/* Sale strip above the catalogue and lot pages — aligned to the content
   column instead of running to the viewport edge. */
.proauction-af .bp-header__content-minimal {
  padding-inline: max(var(--s-4), calc((100% - var(--content-max)) / 2));
}

/* --- Loading spinner -----------------------------------------------------
   The plugin's spinners (.bs-loader on page load, -fill in modals, -small in
   payment forms) never actually rotated. They animate a keyframes rule named
   "spin", and Bricks also defines "spin" — later in the page, so it wins —
   with only a 100% frame. The missing start frame falls back to the
   element's own translateX(-50%), and rotate(360deg) is the identity matrix,
   so the browser interpolated a 25px sideways slide and no rotation at all.
   That same translateX also sat the arc 25px left of centre, because
   left: calc(50% - 25px) already centres the 50px box.

   A uniquely named animation cannot be captured by anyone else's "spin". */
@keyframes proauction-af-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.proauction-af .bs-loader::before,
.proauction-af .bs-loader-fill::before,
.proauction-af .bs-loader-small::before {
  transform: none;
  border-color: var(--line);           /* faint track, so the ring reads as a ring */
  border-top-color: var(--brand-deep);
  animation: proauction-af-spin 0.9s linear infinite;
}

/* base.css stops every animation under prefers-reduced-motion, which left a
   motionless arc that looks like a hung page. A spinner is the one animation
   whose movement carries the meaning ("still working"), so it keeps turning,
   slower. !important only to beat that rule's own !important. */
@media (prefers-reduced-motion: reduce) {
  .proauction-af .bs-loader::before,
  .proauction-af .bs-loader-fill::before,
  .proauction-af .bs-loader-small::before {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

/* --- Catalogue: pagination and missing photos ----------------------------
   The bottom page numbers are a sibling of the lot cards, so once the lot
   container became a grid they took one card-sized cell — squeezed into the
   last column beside lot 24. They span the full row instead. */
/* :has(> .bp-lot) — the toolbar's pagination wrapper carries .bp-lots too. */
.proauction-af .bp-lots:has(> .bp-lot) > .navigation.pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: var(--s-8) 0 var(--s-16); /* clear of the footer */
}

/* A photo BidSpirit lists but its CDN refuses (lots 1-4 of sale 246 answer
   403) left a blank box. The card's own image is a contain-fitted
   background on .bp-lot__image; behind it the link now carries a picture
   icon. A loaded photo always covers the centre, so the icon only shows
   through when there is nothing to show. */
.proauction-af .bp-lot__wrp-image {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%236B655E' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.75'/%3E%3Cpath d='M21 16l-5.5-5.5L5 20'/%3E%3C/svg%3E")
    center / 44px no-repeat,
    var(--paper);
}
.proauction-af .bp-lot__wrp-image .bp-lot__image { background-color: transparent; }

/* Lot gallery slide whose photo would not load (auctionforge-a11y.js). */
.proauction-af .bp-body__gallery .swiper-slide.pa-img-missing {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24' fill='none' stroke='%236B655E' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.75'/%3E%3Cpath d='M21 16l-5.5-5.5L5 20'/%3E%3C/svg%3E")
    center / 56px no-repeat,
    var(--paper);
}
/* Share links are keyboard-focusable now; show where focus is. */
.proauction-af .share-btn__link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: 50%; }

/* --- My account (signed out) ---------------------------------------------
   The plugin's profile page shows a thin "My account" band and two buttons
   in its own orange and grey. The signed-in profile is drawn by its JS, so
   the page is restyled rather than replaced: the heading takes the site's
   page-hero treatment, the buttons the site's primary and secondary. */
.proauction-af .bp-header__content-profile-page {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-12) 0;
}
.proauction-af .bp-header__content-profile-page h1 {
  max-width: var(--content-max);   /* the .content column: lines up with the logo */
  margin: 0 auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--paper);
  text-align: left;
}
.proauction-af #profile-page .bp-btn-login,
.proauction-af #profile-page .bp-btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: calc(10 * var(--rem));
  margin: 0;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.proauction-af #profile-page .bp-btn-login { background: var(--brand); border: 1px solid var(--brand); color: var(--white); }
.proauction-af #profile-page .bp-btn-login:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.proauction-af #profile-page .bp-btn-register { background: transparent; border: 1px solid var(--brand-deep); color: var(--brand-deep); }
.proauction-af #profile-page .bp-btn-register:hover { background: var(--brand-deep); color: var(--white); }
.proauction-af #profile-page > .bp-content > .bp-col:has(.bp-btn-login) {
  gap: var(--s-3);
  padding-block: var(--s-16);
}