/* /assets/css/components/banner-carousel-common.css */
/*
 * Shared by every banner card style (standard, shop, lottery, mystery) in
 * every theme. Cards opt in through data attributes set by banner_card()
 * (includes/banners.php): data-bnr-card on the card, data-bnr-text and
 * data-bnr-media on its two halves, data-bnr-title on the headline.
 * --bnr-accent and --bnr-image come from the banner itself, and --bnr-ar is
 * its picture's width / height when known. A banner's slide is a size
 * container, so a theme can size against the card's width with cqw.
 * --bnr-room is how wide the product layout's picture may be (36cqw). A theme
 * whose cards are always dark sets --bnr-text and --bnr-text-soft on them.
 */

/* Content decides the height, so a long headline wraps instead of being cut,
   and every slide stretches to the tallest so a carousel's cards line up. */
.banner-carousel-swiper .swiper-slide { height: auto !important; display: flex !important; }
.banner-carousel-swiper .swiper-slide > * { flex: 1 1 auto; min-width: 0; }
.swiper-slide:has(> [data-bnr-card], [data-bnr-card]) { container-type: inline-size; }
[data-bnr-card] { height: 100% !important; min-height: 172px; }
@media (min-width: 640px)  { [data-bnr-card] { min-height: 200px; } }
@media (min-width: 1024px) { [data-bnr-card] { min-height: 224px; } }
[data-bnr-card][data-bnr-compact] { min-height: 0; }

/* With the height free, a percentage max-height on the image no longer
   resolves, so the image is capped here instead of growing the card. */
[data-bnr-card] [data-bnr-media] img { max-height: 8.5rem !important; }
@media (min-width: 640px)  { [data-bnr-card] [data-bnr-media] img { max-height: 10.5rem !important; } }
@media (min-width: 1024px) { [data-bnr-card] [data-bnr-media] img { max-height: 12rem !important; } }

/* On phones a row of text and button puts the button under the text. */
[data-bnr-row] { gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
@media (max-width: 639px) {
  [data-bnr-row] { flex-wrap: wrap; align-content: center; row-gap: .75rem; }
  [data-bnr-row] > * { max-width: 100% !important; }
}

[data-bnr-card] [data-bnr-title] {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  /* A long word breaks with a hyphen where the page's language allows
     (<html lang>), not at any letter. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
[data-bnr-card] [data-bnr-label] { color: var(--bnr-accent) !important; }
/* Headline and subtitle take their direction from their own text, so an
   English name keeps its inch mark after the number on an Arabic page. They
   still align to the page's side: with plaintext, start would follow the text. */
[data-bnr-card] :is([data-bnr-title], .bnr-sub) { unicode-bidi: plaintext; text-align: left; }
[dir="rtl"] [data-bnr-card] :is([data-bnr-title], .bnr-sub) { text-align: right; }

/* Subtitle and the live line */
.bnr-sub { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--bnr-text-soft, var(--ink-soft)); overflow-wrap: anywhere; }
.bnr-live { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .1rem 0 0; font-size: .8rem; color: var(--bnr-text-soft, var(--ink-soft)); }
.bnr-stat { font-weight: 600; color: var(--bnr-text, var(--ink)); overflow-wrap: anywhere; }
.bnr-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
.bnr-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-weight: 700; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--bnr-accent);
  background: color-mix(in srgb, var(--bnr-accent) 14%, transparent);
}
.bnr-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* Only the dot pulses: a fading chip with ticking digits looks like flicker. */
.bnr-chip.is-urgent { color: #b91c1c; background: #fee2e2; }
.bnr-chip.is-urgent::before { animation: bnr-pulse 1.6s ease-in-out infinite; }
.bnr-chip.is-ended { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.bnr-chip.is-ended::before { display: none; }
@keyframes bnr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Both image layouts turn the card dark and show the image with the text
   over its darker side. Cover: a photo or artwork fills the card. Product: a
   cut-out image sits on the right on a spotlight of the banner's colour, no
   wider than --bnr-room, so a wide picture shrinks instead of running under
   the text. The cover's shade stays deep across the whole text column (60%
   of the card) before it fades. */
[data-bnr-layout="cover"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .9) 0%, rgba(12, 12, 18, .78) 45%, rgba(12, 12, 18, .6) 62%, rgba(12, 12, 18, .15) 85%, rgba(12, 12, 18, 0) 100%),
    var(--bnr-image) center / cover no-repeat,
    #0c0c12 !important;
}
[data-bnr-layout="product"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .92) 0%, rgba(12, 12, 18, .7) 42%, rgba(12, 12, 18, 0) 66%),
    var(--bnr-image) right 6% center / auto min(78%, calc(var(--bnr-room, 36cqw) / var(--bnr-ar, 1))) no-repeat,
    radial-gradient(circle at 80% 55%, color-mix(in srgb, var(--bnr-accent) 45%, transparent) 0%, transparent 42%),
    linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
}
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text]:not([data-bnr-row]) { max-width: 60%; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-media],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-deco] { display: none !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] { position: relative; z-index: 1; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] [data-bnr-title],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-stat { color: #fff !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-sub,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-live,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .ed-status { color: rgba(255, 255, 255, .82) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-label],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .ed-eyebrow:not([data-bnr-label]) { color: color-mix(in srgb, var(--bnr-accent) 55%, #fff) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .bnr-chip:not(.is-urgent) { background: rgba(255, 255, 255, .16); color: #fff; }

/* Right-to-left: the text column sits on the right, so the dark side, the
   product and its spotlight swap sides. Phones stack them, which needs no flip. */
@media (min-width: 640px) {
  [dir="rtl"] [data-bnr-layout="cover"] {
    background:
      linear-gradient(270deg, rgba(12, 12, 18, .9) 0%, rgba(12, 12, 18, .78) 45%, rgba(12, 12, 18, .6) 62%, rgba(12, 12, 18, .15) 85%, rgba(12, 12, 18, 0) 100%),
      var(--bnr-image) center / cover no-repeat,
      #0c0c12 !important;
  }
  [dir="rtl"] [data-bnr-layout="product"] {
    background:
      linear-gradient(270deg, rgba(12, 12, 18, .92) 0%, rgba(12, 12, 18, .7) 42%, rgba(12, 12, 18, 0) 66%),
      var(--bnr-image) left 6% center / auto min(78%, calc(var(--bnr-room, 36cqw) / var(--bnr-ar, 1))) no-repeat,
      radial-gradient(circle at 20% 55%, color-mix(in srgb, var(--bnr-accent) 45%, transparent) 0%, transparent 42%),
      linear-gradient(225deg, #1b1b25 0%, #0c0c12 100%) !important;
  }
}

/* One rhythm for the text column in every style: label, headline, meta and
   button evenly spaced and centred in the card's height. The lottery ticket's
   row lays out its own text and button side by side, so it keeps its own. */
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) {
  display: flex !important; flex-direction: column; justify-content: center;
  gap: .5rem !important; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > :last-child:not(:first-child) { margin-top: .25rem !important; }
[data-bnr-card] [data-bnr-label] { line-height: 1.2; }
[data-bnr-card] [data-bnr-title] { line-height: 1.15 !important; }
[data-bnr-card] .bnr-live { margin: 0; }

/* Phones: the text needs the card's full width, so the image moves to a band
   across the top, shown in full, and fades into the dark the text sits on.
   It is contained, not cropped, since a banner's own lettering is often in
   the image; a theme sets --bnr-phone-size (cover, 100% auto, …) to change that. */
@media (max-width: 639px) {
  [data-bnr-layout="cover"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, .15) 5rem, rgba(12, 12, 18, .92) 8.5rem, #0c0c12 10rem),
      var(--bnr-image) center top / var(--bnr-phone-size, contain) no-repeat,
      #0c0c12 !important;
  }
  [data-bnr-layout="product"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, 0) 6.5rem, rgba(12, 12, 18, .9) 8.75rem, #0c0c12 10rem),
      var(--bnr-image) center 1rem / auto 6.5rem no-repeat,
      radial-gradient(circle at 50% 4.25rem, color-mix(in srgb, var(--bnr-accent) 50%, transparent) 0, transparent 6.5rem),
      linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
  }
  :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] {
    max-width: 100% !important;
    padding-top: 8.25rem !important;
    justify-content: flex-end !important;
  }
  [data-bnr-card] [data-bnr-text]:not([data-bnr-row]) { gap: .4rem !important; }
}

/* Pagination: the active dot becomes a bar that fills until the next slide. */
.banner-carousel-swiper .swiper-pagination-bullet { transition: width .3s ease; }
.banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active {
  width: 1.75rem; border-radius: 999px; opacity: 1;
  background: linear-gradient(90deg, var(--theme-600, #4f46e5) calc(var(--bnr-progress, 0) * 100%), color-mix(in srgb, var(--ink-soft) 30%, transparent) 0) !important;
}

[dir="rtl"] .banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active {
  background: linear-gradient(270deg, var(--theme-600, #4f46e5) calc(var(--bnr-progress, 0) * 100%), color-mix(in srgb, var(--ink-soft) 30%, transparent) 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .bnr-chip.is-urgent::before { animation: none; }
}

/* /assets/css/components/banner-carousel-standard.css */
  .banner-carousel-swiper,
  .banner-carousel-swiper .swiper-wrapper,
  .banner-carousel-swiper .swiper-slide { height: auto !important; }

  /* Card shell — mirrors ed-card-auction */
  .bpc-card {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 172px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }
  @media (min-width: 640px)  { .bpc-card { height: 200px; } }
  @media (min-width: 1024px) { .bpc-card { height: 224px; } }

  html.dark .bpc-card { background: var(--paper-2); }

  /* Tear-strip top — identical to ed-card-auction::before */
  .bpc-card::before {
    content: ''; position: absolute; top: -1px; left: 14%; right: 14%;
    height: 2px; background: var(--ink); border-radius: 0 0 2px 2px; z-index: 10;
  }

  .bpc-card:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,0.14);
  }

  /* Left accent strip — banner_color rendered here, not on the background */
  .bpc-accent-strip {
    width: 3px;
    flex-shrink: 0;
    align-self: stretch;
  }

  /* Text area */
  .bpc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    gap: 0.4rem;
  }
  @media (min-width: 640px) { .bpc-body { padding: 1.5rem 1.75rem; } }

  /* Headline — Fraunces, matching auction card h3 */
  .bpc-headline {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-variation-settings: 'opsz' 144, 'SOFT' 0;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    color: var(--ink);
    margin: 0;
  }

  /* Image column */
  .bpc-image-col {
    flex-shrink: 0;
    width: clamp(140px, 38%, 240px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    border-left: 1px solid var(--rule);
  }
  html.dark .bpc-image-col { background: var(--paper); }

  /* Subtle color wash behind the image — banner identity without breaking the palette */
  .bpc-image-wash {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0.09;
  }

  .bpc-hero {
    position: relative; z-index: 1;
    width: 80%; height: 86%;
    object-fit: contain; object-position: center;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.20));
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    display: block;
  }
  .bpc-card:hover .bpc-hero { transform: scale(1.06) translateY(-4px); }

  /* Pagination */
  .banner-carousel-swiper { padding-bottom: 0 !important; }
  .banner-carousel-swiper.has-pagination { padding-bottom: 30px !important; }
  .banner-carousel-swiper .swiper-pagination { bottom: 4px !important; }
  .banner-carousel-swiper .swiper-pagination-bullet {
    width: 6px; height: 6px;
    background: var(--rule); opacity: 1;
    transition: all 0.3s ease;
  }
  .banner-carousel-swiper .swiper-pagination-bullet-active { width: 22px; border-radius: 3px; background: var(--ink); }

/* /assets/themes/prism/assets/css/components/banner_carousel-standard.css */
/* Prism banners, standard style (components/banner_carousel.php): the
   white card. The shared frame, layouts and dots are in skin/home.css;
   this sets the card's size and its picture column. */
html body .psm-bnr.bpc-card { height: auto; min-height: 196px; }
@media (min-width: 640px) { html body .psm-bnr.bpc-card { min-height: 220px; } }
@media (min-width: 1024px) { html body .psm-bnr.bpc-card { min-height: 244px; } }
html body .psm-bnr .bpc-body { padding: 1.6rem 1.6rem; }
@media (min-width: 640px) { html body .psm-bnr .bpc-body { padding: 2rem 2.4rem; } }
html body .psm-bnr .bpc-headline { -webkit-line-clamp: unset; overflow: visible; display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); }
/* The picture column: the photo on a soft round well, a wash of the
   banner's tone behind it */
html body .psm-bnr .bpc-image-col {
  width: clamp(150px, 36%, 260px); border-left: 0;
  background:
    radial-gradient(closest-side, var(--paper-2) 0 58%, var(--paper-3) 59% 100%, transparent 100.5%) center / min(86%, 200px) auto no-repeat,
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--psm-tone, var(--psm-accent)) 14%, transparent), transparent 75%),
    var(--paper-2);
  background-size: min(86%, 200px) min(86%, 200px), auto, auto;
}
html body .psm-bnr .bpc-image-col .bpc-hero { position: relative; max-width: 58%; max-height: 62%; object-fit: contain; }

/* The homepage banners keep Editorial's frame: the slide's full width, at
   least 172px tall on phones, 200px from 640px and 224px from 1024px,
   growing only when a banner's text needs the room. The theme's own frame
   and art sit inside that box rather than adding to it. */
.homeBannerSwiper .swiper-slide > * { width: 100% !important; max-width: none !important; margin-inline: 0 !important; height: auto !important; min-height: 172px !important; aspect-ratio: auto !important; box-sizing: border-box !important; }
.homeBannerSwiper .swiper-slide > :not([data-bnr-card]) { display: flex !important; flex-direction: column !important; }
.homeBannerSwiper .swiper-slide > :not([data-bnr-card]) > [data-bnr-card] { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
@media (min-width: 640px) { .homeBannerSwiper .swiper-slide > * { min-height: 200px !important; } }
@media (min-width: 1024px) { .homeBannerSwiper .swiper-slide > * { min-height: 224px !important; } }

/* /assets/css/components/load-more.css */
/* "Load more" under a storefront grid (includes/load-more.php). The button
   is the theme's own .ed-btn-secondary; the rest takes the theme's tokens. */
.px-more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 1.5rem auto 2.5rem; padding: 0 1rem; text-align: center; scroll-margin-top: 45vh; }
.px-more[hidden] { display: none; }
.px-more-status { margin: 0; font-size: 14px; color: var(--ink-soft, #475569); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.px-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; min-width: 12rem; max-width: 100%; padding: .65rem 1.5rem; font-weight: 600; text-decoration: none; white-space: normal; cursor: pointer; }
.px-more-btn.is-loading, .px-more-btn[aria-disabled="true"] { cursor: progress; opacity: .75; }
.px-more-btn.is-loading::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: px-more-spin .8s linear infinite; }
@keyframes px-more-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .px-more-btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.px-more-error { margin: 0; max-width: 32rem; padding: .6rem .9rem; border-radius: 10px; font-size: 14px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
html.dark .px-more-error { color: #fecaca; background: rgb(127 29 29 / .35); border-color: rgb(248 113 113 / .45); }
.px-more-error[hidden] { display: none; }
/* Ink, not the accent: an accent shade reads under 4.5:1 on some themes' paper; the underline marks it as a link. */
.px-more-earlier { font-size: 14px; font-weight: 600; color: var(--ink, inherit); text-decoration: underline; text-underline-offset: 3px; }
.px-more-earlier:empty { display: none; }
.px-more-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.px-more-top { margin: 0 0 1rem; text-align: center; }
/* A card focused whole after "Load more" (load-more.js) shows the ring
   focus-ring.css draws, which it otherwise leaves off script-only targets:
   the reader has to see where the new cards start. */
:root [data-px-more-grid] > [tabindex="-1"]:focus-visible:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}

/* /assets/css/components/guest-wall.css */
/* The sign-in wall over a members-only control (includes/guest-wall.php).
   The control and the card share one grid cell, so the wall is as tall as
   the taller of the two and nothing is clipped. Colours are the theme's own
   tokens; the card's text is --ink on at least 80% --paper, which keeps AA
   whatever shows through it. */
.px-gw {
  position: relative;
  display: grid;
  isolation: isolate;
}
.px-gw > * { grid-area: 1 / 1; min-width: 0; }

.px-gw__body {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* What the caller hid stays hidden, whatever display its own classes give it. */
.px-gw__body [hidden] { display: none !important; }
/* A coloured button blurred behind the card still reads as a smudge through
   it, so the control's buttons keep their place but aren't drawn. */
.px-gw__body :is(button, [role="button"], input[type="submit"], input[type="button"]) { visibility: hidden !important; }

.px-gw__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .px-gw__card {
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .px-gw__card {
    background: var(--paper-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.px-gw__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.px-gw__badge svg { display: block; }

.px-gw__title {
  margin: 0.25rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.px-gw__line {
  margin: 0;
  max-width: 34rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Sign in and Create account side by side, always the same width, each
   label on one line. Themes turn any
   primary + secondary pair into a flex row on phones (html body
   :is(div, p):has(> .ed-btn-primary)…), so these selectors outweigh that. */
.px-gw .px-gw__card .px-gw__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 24rem;
  margin-top: 0.5rem;
}
/* A theme's own button padding or nowrap must not widen one column past the other. */
.px-gw .px-gw__card .px-gw__actions > .px-gw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding-inline: 1rem;
  text-align: center;
  white-space: nowrap;
}
/* On a phone each button is about 140px wide: less side padding and a
   slightly smaller label keep "Create account" (and longer translations)
   on one line, at the same size in both buttons. */
@media (max-width: 480px) {
  .px-gw .px-gw__card .px-gw__actions > .px-gw__btn {
    padding-inline: 0.375rem;
    font-size: clamp(0.6875rem, 3.1vw, 0.875rem);
    letter-spacing: 0;
  }
}

.px-gw__return {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
}

.px-gw__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.px-gw__social-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink);
}
.px-gw__social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.px-gw__social-row .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.px-gw__social-row .social-btn img { width: 1.25rem; height: 1.25rem; }

.px-gw a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}