/* /assets/css/pages/home.css */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Clickable hero stat rows — wrapper keeps its theme class for layout;
     this only strips link chrome and adds a subtle hover affordance. */
  .hero-stat-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .hero-stat-link:hover { opacity: 0.72; }
  /* Micro animations */
  @keyframes shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .animate-shine {
    background-image: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
    
    background-size: 200% auto;
    animation: shine 3s linear infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
  }

  .float-animate {
    animation: float 3s ease-in-out infinite;
  }

  /* Tilt effect */
  .tilt-card {
    perspective: 1000px;
  }

  .tilt-inner {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
  }

  .tilt-card:hover .tilt-inner {
    transform: rotateY(4deg) rotateX(2deg);
  }

  .notify-btn:hover {
    background: linear-gradient(to right, #facc15, #f59e0b);
    color: #000;
  }
  .dark .notify-btn:hover {
    color: #000;
  }
  /* Skeleton shimmer */
  @keyframes sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .sk {
    background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 50%, var(--paper-2) 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
  }
  /* RTL helpers and overrides */
  [dir="rtl"] .rtl-text { text-align: right; }
  [dir="rtl"] .rtl-flex-row-reverse { flex-direction: row-reverse; }
  /* Mobile search input padding flip (pl-10/pr-3 equivalent) */
  [dir="rtl"] .rtl-pl-10 { padding-left: 0.75rem; padding-right: 2.5rem; }
  /* Flip absolute icon position in search */
  [dir="rtl"] .rtl-left-icon { left: auto; right: 0.75rem; }
  /* Flip animated placeholder anchor */
  [dir="rtl"] .rtl-placeholder { left: auto; right: 2.5rem; }

  /* Mobile-first snap carousel → responsive CSS grid */
  .section-carousel,
  .section-carousel-4 {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .section-carousel::-webkit-scrollbar,
  .section-carousel-4::-webkit-scrollbar { display: none; }

  .section-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    padding-bottom: 0.75rem;
  }
  .section-carousel > * {
    flex: none;
    width: 78vw;
    max-width: 340px;
    scroll-snap-align: start;
  }

  .section-carousel-4 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.75rem;
  }
  .section-carousel-4 > * {
    flex: none;
    width: 72vw;
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* sm+: fixed pixel widths so cards stay carousel on all screen sizes */
  @media (min-width: 640px) {
    .section-carousel       { gap: 1.5rem; }
    .section-carousel   > * { width: 340px; max-width: 340px; }
    .section-carousel-4     { gap: 1.25rem; }
    .section-carousel-4 > * { width: 270px; max-width: 270px; }
  }
  /* An upcoming lottery in a live-lottery carousel: its card turns into a
     wide image-beside-text layout from md up, so it takes two slots there. */
  @media (min-width: 768px) {
    .section-carousel > .home-upcoming-slot { width: calc(680px + 1.5rem); max-width: calc(680px + 1.5rem); }
  }

  /* ═══════════ Editorial homepage ═══════════ */

  /* Hero ledger — stat index rows */
  .ed-ledger-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .ed-ledger-num {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-variation-settings: "opsz" 144;
    font-size: 1.75rem; font-weight: 500;
    color: var(--ink); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* Carousel arrows — letterpress dots */
  .ed-carousel-btn {
    position: absolute; top: 50%; z-index: 20;
    width: 42px; height: 42px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35);
    transition: background 0.18s ease, transform 0.18s ease;
    transform: translateY(-50%);
  }
  .ed-carousel-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
  .ed-carousel-btn:active { transform: translateY(-50%) scale(0.94); }
  .ed-carousel-btn.hidden { display: none !important; }
  /* dynamic-theme's `.dark button { color }` outranks the class above and
     paints the arrow the same colour as its fill. */
  .dark .ed-carousel-btn { color: var(--paper); }
  .dark .ed-carousel-btn:hover { color: var(--ink); }

  /* Editorial price — ink */
  .ed-price { color: var(--ink); }

  /* Shared CTA — letterpress pill; hover inverts to black/white. This file
     loads after theme.css, so these sit in :where() at zero specificity and any
     theme rule for the button wins. */
  :where(.ed-plan-cta) {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    padding: 0.8rem 1.5rem; border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; font-weight: 600;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  :where(.ed-plan-cta):hover { background: var(--paper); color: var(--ink); transform: translateY(-1px); }

  /* Homepage: primary buttons invert to black/white on hover (no theme tint) */
  :where(.ed-btn-primary):hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }

  /* Investment plan cards — editorial dossier */
  .ed-plan {
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .ed-plan:hover { border-color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.18); }
  .ed-plan-featured {
    position: relative;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .ed-plan-featured::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--noise); opacity: 0.18; mix-blend-mode: overlay;
  }
  .ed-plan-featured:hover { box-shadow: 0 30px 60px -24px rgba(0,0,0,0.35); }
  html.dark .ed-plan-featured { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
  .ed-plan-hairline { border-color: var(--rule); }
  .ed-plan-featured .ed-plan-hairline { border-color: rgba(255,255,255,0.16); }
  html.dark .ed-plan-featured .ed-plan-hairline { border-color: var(--rule); }
  :where(.ed-plan-featured .ed-plan-cta) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  :where(.ed-plan-featured .ed-plan-cta):hover { background: transparent; color: var(--paper); border-color: var(--paper); }
  :where(html.dark .ed-plan-featured .ed-plan-cta) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  :where(html.dark .ed-plan-featured .ed-plan-cta):hover { background: transparent; color: var(--ink); border-color: var(--ink); }

  /* Shop cards — hairline frames */
  .shop-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .shop-card:hover { border-color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.16); }

  /* Mystery dossier card */
  .ed-card-mystery {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    position: relative;
  }
  html.dark .ed-card-mystery { background: var(--paper-2); }
  .ed-card-mystery::before {
    content: ''; position: absolute; top: -1px; left: 14%; right: 14%; height: 2px;
    background: var(--ink); border-radius: 0 0 2px 2px; z-index: 5;
  }

  /* Section eyebrow label — mono folio */
  .section-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
  }
  .section-eyebrow::before {
    content: ''; width: 1.75rem; height: 1px;
    background: var(--ink-soft); opacity: 0.6; flex-shrink: 0;
  }

  /* View-all — hairline arrow link */
  .btn-view-all {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap; flex-shrink: 0;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink);
    text-decoration: none;
    transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .btn-view-all svg { transition: transform 0.2s ease; }
  .btn-view-all:hover { gap: 0.75rem; color: var(--ink-soft); border-bottom-color: var(--ink-soft); }
  [dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

  /* Scroll-reveal motion */
  .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Countdown urgency: red when an item ends within the hour. The text holds
     still; fading it while its digits tick every second reads as flicker. */
  .countdown-urgent { color: #dc2626 !important; }
  html.dark .countdown-urgent { color: #f87171 !important; }

  /* Tactile press feedback on primary actions */
  .ed-btn-primary, .ed-btn-secondary { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
  .ed-btn-primary:active, .ed-btn-secondary:active, .ed-plan-cta:active { transform: scale(0.96); }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .sk, .float-animate { animation: none; }
    .ed-btn-primary:active, .ed-btn-secondary:active, .ed-plan-cta:active { transform: none; }
  }

/* /assets/css/pages/home-search-placeholder.css */
/* The rotating search hint fills the field and fades out at its end edge
   instead of cutting a long name off with an ellipsis. */
.flip-wrapper {
  width: 100%; min-width: 0; height: 1.5em; overflow: hidden; perspective: 1000px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
[dir="rtl"] .flip-wrapper {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
.flip {
  display: flex;
  flex-direction: column;
  animation: flipCube 8s 3; /* three turns, then it rests on the first hint */
}
.flip div {
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  transform-origin: top;
  backface-visibility: hidden;
}
@keyframes flipCube {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-1.5em); }
  50%, 70%  { transform: translateY(-3em); }
  75%, 95%  { transform: translateY(-4.5em); }
  100%      { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .flip { animation: none; } }

/* /assets/themes/prism/assets/css/components/home/hero.css */
/* Prism hero: the copy on the left, the live board on the right, the
   "Just won" strip under both (components/home/hero.php).

   The board's tiles are printed by the products that own them
   (live-tile-<kind>.php in each plugin's copy for this theme); they all
   share the .psm-tile classes below, so every tile reads as one set:
     .psm-tile                    the card (an <a>), .psm-tile--<kind>
     .psm-tile__media / __thumb   the picture: large on the wide first tile, a
                                  small square on the others
     .psm-tile__kicker            the kind and its state, .psm-tile__dot for live
     .psm-tile__title             the item's name
     .psm-tile__clock             a countdown: .psm-tile__u cells with data-u
                                  d/h/m/s, filled by prism.js from data-psm-end
     .psm-tile__bar               a fill bar, its fill an <i> at --p
     .psm-tile__row               a line of small facts, spread apart
     .psm-tile__foot              the bottom line: __meta, __price, __cta (--stack: one above the other)
     .psm-tile__badge             a saving
   The box tile is the ink one, the game tile sits on a wash of the accent. */

.psm-hero { position: relative; padding: 44px 0 0; }
.psm-hero__inner {
  position: relative;
  max-width: 1360px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 52px;
  align-items: start;
}
.psm-hero__copy { position: relative; display: flex; flex-direction: column; gap: 22px; padding-top: 18px; min-width: 0; }
.psm-hero__emblem { display: none; }

.psm-hero__pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 14px;
  border-radius: 999px;
  background: var(--psm-accent-soft); color: var(--psm-accent-text);
  font: 600 13px/1.3 var(--font-ui);
}
.psm-hero__pill-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.psm-hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: .98; letter-spacing: -.035em;
  color: var(--ink);
  overflow-wrap: break-word;
}
.psm-hero__title > span { display: inline; }
.psm-hero__accent { color: var(--psm-accent-text); }
html.dark .psm-hero__accent { color: var(--psm-accent); }
.psm-hero__text { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.psm-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.psm-hero__cta, .psm-hero__cta2 { min-height: 52px; padding-inline: 24px; font-size: 16px; }
.psm-hero__stats { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 6px; }
.psm-stat { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); border-radius: 10px; transition: transform .25s cubic-bezier(.2, .8, .3, 1); }
/* home.css fades a hovered stat; here it lifts at full strength */
html body .psm-stat.hero-stat-link:hover, html body .psm-stat.hero-stat-link:focus-visible { opacity: 1; transform: translateY(-2px); }
.psm-stat__num { font: 600 24px/1.2 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: normal; }
.psm-stat__label { font-size: 13px; color: var(--ink-soft); }

/* ── The board ── */
.psm-board {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(196px, auto);
  gap: 16px;
}
.psm-board__cell { min-width: 0; display: flex; }
.psm-board__cell > * { flex: 1 1 auto; min-width: 0; }
/* Five tiles: the wide one and one beside it, then three */
.psm-board[data-n="5"] .psm-board__cell:nth-child(1) { grid-column: span 4; grid-row: span 1; min-height: 252px; }
.psm-board[data-n="5"] .psm-board__cell:nth-child(2) { grid-column: span 2; }
.psm-board[data-n="5"] .psm-board__cell:nth-child(n+3) { grid-column: span 2; }
/* Four: the wide one and one, then two halves */
.psm-board[data-n="4"] .psm-board__cell:nth-child(1) { grid-column: span 4; min-height: 252px; }
.psm-board[data-n="4"] .psm-board__cell:nth-child(2) { grid-column: span 2; }
.psm-board[data-n="4"] .psm-board__cell:nth-child(n+3) { grid-column: span 3; }
/* Three: the wide one across, two halves under it */
.psm-board[data-n="3"] .psm-board__cell:nth-child(1) { grid-column: span 6; min-height: 252px; }
.psm-board[data-n="3"] .psm-board__cell:nth-child(n+2) { grid-column: span 3; }
/* Two: one over the other */
.psm-board[data-n="2"] .psm-board__cell { grid-column: span 6; }
.psm-board[data-n="2"] .psm-board__cell:nth-child(1) { min-height: 252px; }
/* One, or none: the tile and the prism, or the prism alone */
.psm-board[data-n="1"] .psm-board__cell { grid-column: span 6; }
.psm-board[data-n="1"] .psm-board__cell:nth-child(1) { min-height: 252px; }
.psm-board[data-n="0"] .psm-board__cell { grid-column: span 6; min-height: 468px; }

/* ── A tile ── */
.psm-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease, border-color .3s ease;
}
a.psm-tile:hover, a.psm-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
html.dark a.psm-tile:hover, html.dark a.psm-tile:focus-visible { border-color: #343a4e; }
a.psm-tile:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }
.psm-tile__kicker {
  display: flex; align-items: center; gap: 8px;
  font: 700 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--psm-accent-text);
}
.psm-tile__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--psm-live); flex-shrink: 0; }
.psm-tile__title {
  font: 700 20px/1.15 var(--font-display); letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.psm-tile__sub { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.psm-tile__clock { display: flex; gap: 6px; font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.psm-tile__u { display: inline-flex; align-items: baseline; gap: 2px; padding: 7px 9px; border-radius: 10px; background: var(--paper-3); font-size: 18px; line-height: 1; }
.psm-tile__u small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.psm-tile__u[hidden] { display: none; }
.psm-tile__bar { display: block; height: 10px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.psm-tile__bar > i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--psm-accent); }
.psm-tile__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; color: var(--ink-soft); }
.psm-tile__row b { font-family: var(--font-num); font-weight: 600; color: var(--ink); }
.psm-tile__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.psm-tile__foot--stack { flex-direction: column; align-items: stretch; }
.psm-tile__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.psm-tile__price { font: 600 clamp(17px, 1.6vw, 20px)/1.15 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); overflow-wrap: normal; white-space: nowrap; }
.psm-tile__price s, .psm-tile__was { font-size: .72em; font-weight: 500; color: var(--ink-soft); }
.psm-tile__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: 12px;
  background: var(--ink); color: var(--paper-2);
  font: 600 14px/1.1 var(--font-ui); white-space: nowrap;
  transition: transform .2s ease;
}
.psm-tile__cta--line { width: 100%; background: transparent; color: var(--ink); border: 1px solid var(--rule); }
a.psm-tile:hover .psm-tile__cta { transform: translateY(-1px); }
.psm-tile__badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--psm-accent); color: var(--psm-on-accent); font: 700 12px/1.2 var(--font-num); }
.psm-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.psm-tile__thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 16px; background: var(--psm-well);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.psm-tile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.psm-tile__thumb svg { width: 70%; height: auto; }

/* The wide tile: the picture on the start side */
.psm-tile--wide { display: grid; grid-template-columns: minmax(150px, 42%) minmax(0, 1fr); gap: 20px; }
.psm-tile--wide .psm-tile__media {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--psm-well);
  display: flex; align-items: center; justify-content: center; min-height: 180px;
}
.psm-tile--wide .psm-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.psm-tile--wide .psm-tile__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.psm-tile--wide .psm-tile__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.1; }
.psm-tile--wide .psm-tile__u { font-size: 20px; padding: 8px 10px; }
.psm-tile--wide .psm-tile__price { font-size: clamp(20px, 2.1vw, 26px); }

/* The box: the ink tile */
.psm-tile--box { background: var(--psm-panel); color: var(--psm-on-panel); border-color: var(--psm-panel); box-shadow: 0 18px 40px -22px rgba(16, 18, 28, .6); }
.psm-tile--box .psm-tile__kicker { color: var(--psm-on-panel-soft); }
.psm-tile--box .psm-tile__sub, .psm-tile--box .psm-tile__meta { color: var(--psm-on-panel-soft); }
.psm-tile--box .psm-tile__price { color: var(--psm-on-panel); }
.psm-tile--box .psm-tile__thumb { background: color-mix(in srgb, var(--psm-on-panel) 10%, transparent); }
.psm-tile--box .psm-tile__cta { background: var(--psm-on-panel); color: var(--psm-panel); }
html.dark .psm-tile--box { box-shadow: none; }
/* The game: a wash of the accent */
.psm-tile--play { background: color-mix(in srgb, var(--psm-accent) 9%, var(--paper-2)); }
.psm-tile--play .psm-tile__thumb { background: var(--paper-2); }

/* A figure that just changed (live-board.js): a new bid, the count, the
   tickets sold. It lights in the accent's soft wash and settles back. */
@media (prefers-reduced-motion: no-preference) {
  .psm-tile .is-new { animation: psm-figure-lit 2s ease-out; border-radius: 6px; }
  .psm-tile__bar > i { transition: width .8s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes psm-figure-lit {
  0%, 40% { background-color: var(--psm-accent-soft); color: var(--psm-accent-text); box-shadow: 0 0 0 4px var(--psm-accent-soft); }
  100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}

/* Time up: "Closing…" while the store is asked. The clock rests, the live
   dot goes grey and the button becomes a quiet note. */
.psm-tile.is-closing .psm-tile__clock { opacity: .45; }
.psm-tile.is-closing .psm-tile__dot { background: var(--ink-soft); }
.psm-tile.is-closing .psm-tile__cta { background: transparent; color: var(--ink-soft); border: 1px dashed var(--rule); }
.psm-tile--box.is-closing .psm-tile__cta { color: var(--psm-on-panel-soft); }
/* A late bid moved the end on: the kicker says so for a moment */
.psm-tile.is-extended [data-psm-kicker] { color: var(--psm-accent-text); }

/* The result: what happened, in place of the clock and the button, with
   the picture still there and a hairline running down the seconds before
   the next one comes in */
.psm-tile.is-result .psm-tile__clock, .psm-tile.is-result .psm-tile__foot { display: none; }
.psm-tile.is-result .psm-tile__dot { background: var(--ink-soft); }
.psm-tile.is-result [data-psm-kicker] { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--psm-accent-soft); color: var(--psm-accent-text); letter-spacing: .06em; }
.psm-tile.is-result .psm-tile__media img { filter: saturate(.85); }
.psm-tile__result { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.psm-tile__res-label { font-size: 12px; color: var(--ink-soft); }
.psm-tile__res-who { font: 600 14px/1.35 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.psm-tile__balls { display: flex; flex-wrap: wrap; gap: 4px; }
.psm-tile__balls b { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-3); font: 600 13px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.psm-tile__res-time { display: block; align-self: stretch; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.psm-tile__res-time > i { display: block; height: 100%; background: var(--psm-accent); transform-origin: left; }
[dir="rtl"] .psm-tile__res-time > i { transform-origin: right; }
.psm-tile--box .psm-tile__res-label { color: var(--psm-on-panel-soft); }
.psm-tile--box .psm-tile__res-who { color: var(--psm-on-panel); }
/* the small picture a result brings along, for phones, where the wide
   tile has none */
.psm-tile__thumb--result { display: none; }

/* The swap: the next tile laid over the last one while they cross */
.psm-board__cell.is-swapping { position: relative; }
/* Nothing more of a kind live: a card saying the next one is on its way */
.psm-tile--soon { background: color-mix(in srgb, var(--paper-3) 60%, var(--paper-2)); border-style: dashed; box-shadow: none; }
.psm-tile--soon .psm-tile__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.psm-tile--soon .psm-tile__title { color: var(--ink); }
.psm-tile--soon .psm-tile__foot { width: 100%; }
.psm-tile__soon-art { width: 100%; height: auto; }

/* Nothing live: the prism, and a line saying the board fills as things open */
.psm-still {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px; border-radius: var(--radius);
  background: radial-gradient(70% 70% at 50% 35%, var(--psm-accent-soft), transparent 75%), var(--paper-2);
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 30%, transparent);
  text-align: center;
}
.psm-still__art { width: min(260px, 70%); height: auto; }
.psm-still__title { margin: 6px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.psm-still__text { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* ── Just won ── */
.psm-won { margin-top: 40px; border-block: 1px solid var(--rule); background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.psm-won__inner { max-width: 1360px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 28px; min-height: 56px; }
.psm-won__head { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 14px/1 var(--font-ui); color: var(--ink); text-decoration: none; }
.psm-won__list {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 36px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}
[dir="rtl"] .psm-won__list { -webkit-mask: linear-gradient(270deg, #000 calc(100% - 64px), transparent); mask: linear-gradient(270deg, #000 calc(100% - 64px), transparent); }
.psm-won__list::-webkit-scrollbar { display: none; }
.psm-won__item { flex-shrink: 0; white-space: nowrap; }
.psm-won__item a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; align-items: center; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.psm-won__item a:hover { color: var(--ink); }
.psm-won__item b { font-weight: 600; color: var(--ink); }
.psm-won__val { font-family: var(--font-num); font-weight: 600; color: var(--psm-accent-text); }
.psm-won__item + .psm-won__item::before { content: ''; display: none; }

/* ── Arrival: the tiles rise in once, one after another ── */
@media (prefers-reduced-motion: no-preference) {
  .psm-hero:not(.psm-hero--done) .psm-board__cell { animation: psm-tile-in .7s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
  .psm-hero:not(.psm-hero--done) .psm-hero__pill { animation: psm-tile-in .6s cubic-bezier(.2, .8, .3, 1) both; }
}
@keyframes psm-tile-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── Desktop at the narrow end ── */
@media (max-width: 1279px) {
  .psm-hero__inner { padding: 0 32px; gap: 40px; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .psm-won__inner { padding: 0 32px; }
}
/* ── Tablet: the copy above the board ── */
@media (max-width: 1023px) {
  .psm-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .psm-hero__copy { padding-top: 0; }
  .psm-hero__text { max-width: 60ch; }
}

/* ── Phones (option E): the prism mark in the top corner, the pill, the
   headline and one full-width button; the board turns into a row of cards
   to swipe through, each snapping into place ── */
@media (max-width: 639px) {
  .psm-hero { padding-top: 22px; }
  .psm-hero__inner { padding: 0 16px; gap: 18px; }
  .psm-hero__copy { gap: 14px; }
  .psm-hero__emblem { display: block; position: absolute; top: -4px; inset-inline-end: 0; width: 56px; height: 56px; color: var(--psm-mark); }
  [dir="rtl"] .psm-hero__emblem { transform: scaleX(-1); }
  .psm-hero__emblem-svg { display: block; width: 100%; height: 100%; }
  .psm-hero__pill { max-width: calc(100% - 68px); padding: 6px 12px; font-size: 12px; }
  .psm-hero__title { font-size: clamp(2.1rem, 10.4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; padding-inline-end: 64px; }
  .psm-hero__text, .psm-hero__cta2, .psm-hero__stats { display: none; }
  /* the narrowest phones keep the headline's first line in one piece */
  @media (max-width: 374px) { .psm-hero__title { font-size: clamp(2rem, 9.6vw, 2.6rem); } }
  .psm-hero__cta { width: 100%; }
  .psm-board {
    display: flex; gap: 12px;
    margin-inline: -16px; padding: 4px 16px 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .psm-board::-webkit-scrollbar { display: none; }
  .psm-board .psm-board__cell { flex: 0 0 auto; width: 226px; min-height: 0 !important; scroll-snap-align: start; }
  .psm-board .psm-board__cell:nth-child(1) { width: 282px; }
  .psm-board[data-n="0"] .psm-board__cell, .psm-board[data-n="1"] .psm-board__cell--still { width: calc(100vw - 32px); }
  .psm-tile { padding: 16px; gap: 8px; border-radius: 20px; }
  .psm-tile--wide { display: flex; }
  .psm-tile--wide .psm-tile__media { display: none; }
  .psm-tile--wide .psm-tile__thumb--result { display: flex; }
  .psm-tile--wide .psm-tile__title { font-size: 20px; }
  .psm-tile__kicker { font-size: 11px; }
  .psm-tile__title { font-size: 17px; }
  .psm-tile__u { font-size: 17px; padding: 6px 8px; }
  .psm-tile--wide .psm-tile__u { font-size: 17px; padding: 6px 8px; }
  .psm-tile--wide .psm-tile__price, .psm-tile__price { font-size: 18px; }
  .psm-tile__cta { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .psm-tile__thumb { width: 52px; height: 52px; border-radius: 14px; }
  .psm-still { padding: 22px 16px; }
  .psm-won { margin-top: 18px; }
  .psm-won__inner { padding: 0 16px; gap: 16px; }
  .psm-won__list { gap: 24px; }
}

/* The game tile's drawing (psm_game_art()): no photo, the kind in glass */
.psm-tile__thumb--art svg { width: 92%; height: 92%; }
.psm-tile--wide .psm-tile__media--art svg { width: min(78%, 220px); height: auto; }
/* It moves the way the game does, unhurried and mostly at rest: the wheel
   turns a few segments and settles, the card's foil catches the light, the
   coin flips, the reels roll, the light climbs the tower, the token
   crosses, the carts roll on a little. Pointed at or focused, it goes a
   little quicker. Transforms only; still under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .psm-tile--play .psm-gart :is(.psm-gart__spin, .psm-gart__coin, .psm-gart__pop, .psm-gart__climb, .psm-gart__cross, .psm-gart__carts, .psm-gart__reel, .psm-gart__sheen) {
    transform-box: fill-box; transform-origin: center;
    animation: 7s cubic-bezier(.45, 0, .25, 1) 1.4s infinite both;
  }
  .psm-tile--play .psm-gart__spin { animation-name: psm-ga-spin; }
  .psm-tile--play .psm-gart__sheen { animation-name: psm-ga-sheen; animation-timing-function: ease-in-out; }
  .psm-tile--play .psm-gart__coin { animation-name: psm-ga-flip; }
  .psm-tile--play .psm-gart__pop { animation-name: psm-ga-pop; animation-duration: 3.5s; }
  .psm-tile--play .psm-gart__pop--2 { animation-delay: 2.2s; }
  .psm-tile--play .psm-gart__reel { animation-name: psm-ga-reel; }
  .psm-tile--play .psm-gart__reel--2 { animation-delay: 1.6s; }
  .psm-tile--play .psm-gart__reel--3 { animation-delay: 1.8s; }
  .psm-tile--play .psm-gart__climb { animation-name: psm-ga-climb; animation-duration: 4s; }
  .psm-tile--play .psm-gart__cross { animation-name: psm-ga-cross; }
  .psm-tile--play .psm-gart__carts { animation-name: psm-ga-roll; animation-duration: 5s; }
  a.psm-tile--play:is(:hover, :focus-visible) .psm-gart * { animation-duration: 3s; }
}
@keyframes psm-ga-spin { 0% { transform: rotate(0); } 40%, 100% { transform: rotate(180deg); } }
@keyframes psm-ga-sheen { 0%, 55% { transform: translateX(-30px); } 85%, 100% { transform: translateX(84px); } }
@keyframes psm-ga-flip { 0%, 60% { transform: scaleX(1); } 70% { transform: scaleX(.08); } 80%, 100% { transform: scaleX(1); } }
@keyframes psm-ga-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }
@keyframes psm-ga-reel { 0%, 55% { transform: translateY(0); } 70% { transform: translateY(26px); } 70.01% { transform: translateY(-26px); } 85%, 100% { transform: translateY(0); } }
@keyframes psm-ga-climb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes psm-ga-cross { 0%, 10% { transform: translateX(0); } 45%, 60% { transform: translateX(40px); } 95%, 100% { transform: translateX(0); } }
@keyframes psm-ga-roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* The first page of a visit (prism.js): a soft band of light crosses each
   tile once, one after another */
@media (prefers-reduced-motion: no-preference) {
  .psm-board--sheen .psm-tile { overflow: hidden; isolation: isolate; }
  .psm-board--sheen .psm-tile::after {
    content: ""; position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 48%, rgba(var(--theme-300-rgb), .28) 52%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-70%);
    animation: psm-sheen 1.1s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 250ms);
  }
  html.dark .psm-board--sheen .psm-tile::after { background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .14) 48%, rgba(var(--theme-300-rgb), .16) 52%, rgba(255, 255, 255, 0) 62%); }
  [dir="rtl"] .psm-board--sheen .psm-tile::after { animation-name: psm-sheen-rtl; }
}
@keyframes psm-sheen { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes psm-sheen-rtl { from { transform: translateX(70%); } to { transform: translateX(-70%); } }

/* A game with no drawing of its kind shows its own picture: its image as
   any photo is shown, or its kind's icon in the accent */
.psm-tile__icon { font-size: 26px; color: var(--psm-accent-text); }
.psm-tile--wide .psm-tile__media .psm-tile__icon { font-size: 64px; }

/* /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; } }