/* /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/bazaar/assets/css/components/home/hero.css */
  .hero-bz{position:relative;padding:2rem 1rem 3rem;background:transparent}
  .hero-bz__arch{
    position:relative;max-width:66rem;margin:0 auto;text-align:center;
    background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
    border:1px solid var(--rule);
    border-radius:44% 44% 18px 18px / 30% 30% 18px 18px;   /* ogee crown */
    padding:clamp(2.75rem,6vw,4.25rem) clamp(1.5rem,5vw,3.5rem) clamp(2rem,5vw,3rem);
    box-shadow:var(--shadow-md);overflow:hidden;
  }
  .hero-bz__arch::before{                                    /* faint lattice wash */
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:var(--pattern);opacity:.9;
  }
  .hero-bz__frame{
    position:absolute;inset:12px;pointer-events:none;
    border:1px solid var(--bz-gold);
    border-radius:42% 42% 12px 12px / 28% 28% 12px 12px;
    box-shadow:inset 0 0 0 3px rgba(184,134,47,.16);opacity:.85;
  }
  .hero-bz__pip{position:absolute;color:var(--bz-gold);font-size:12px;opacity:.9;line-height:1}
  .hero-bz__pip--l{bottom:22px;left:24px}
  .hero-bz__pip--r{bottom:22px;right:24px}
  .hero-bz__inner{position:relative}
  .hero-bz__eyebrow{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:'Inter',sans-serif;font-weight:700;font-size:.66rem;
    letter-spacing:.28em;text-transform:uppercase;color:var(--bz-gold);
  }
  .hero-bz__eyebrow::before,.hero-bz__eyebrow::after{content:"\25C6";font-size:7px;opacity:.85}
  .hero-bz__title{
    font-family:var(--font-display);font-weight:400;margin-top:1.1rem;
    font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;letter-spacing:.01em;color:var(--ink);
  }
  .hero-bz__title .accent{
    display:block;
    background:linear-gradient(105deg,var(--bz-gold-strong) 0%,var(--bz-gold) 42%,var(--bz-primary) 118%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  }
  .hero-bz__desc{
    max-width:38rem;margin:1.4rem auto 0;line-height:1.65;
    font-size:clamp(1rem,1.35vw,1.18rem);color:var(--ink-2);
  }
  .hero-bz__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
  .hero-bz__coins{
    margin:2.6rem auto 0;max-width:44rem;display:grid;gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  }
  .hero-bz__coin{
    position:relative;display:flex;flex-direction:column;align-items:center;
    padding:1.15rem .75rem;border-radius:16px;text-decoration:none;
    background:radial-gradient(120% 120% at 50% 0%, rgba(184,134,47,.14), rgba(184,134,47,.03) 70%);
    border:1px solid var(--bz-gold);
    box-shadow:inset 0 1px 0 rgba(217,168,60,.4), var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .hero-bz__coin:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(217,168,60,.5), var(--shadow-md)}
  .hero-bz__num{font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;color:var(--bz-primary)}
  html.dark .hero-bz__num{color:var(--bz-gold-strong)}
  .hero-bz__label{
    margin-top:.5rem;display:flex;align-items:center;gap:.4rem;
    font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  }
  .hero-bz__dot{width:6px;height:6px;border-radius:9999px;flex:none}
  @media (max-width:640px){
    .hero-bz__arch{border-radius:34% 34% 14px 14px / 12% 12% 14px 14px;padding:2rem 1rem 1.75rem}
    .hero-bz__frame{inset:8px}
    .hero-bz__cta{flex-wrap:nowrap;gap:.5rem}
    .hero-bz__cta > a{flex:1 1 0;justify-content:center;white-space:nowrap;padding-inline:.7rem;font-size:.85rem}
    .hero-bz__coins{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.5rem;margin-top:1.75rem}
    .hero-bz__coin{padding:.75rem .4rem}
    .hero-bz__num{font-size:1.2rem}
    .hero-bz__label{font-size:.52rem;letter-spacing:.1em}
  }

  /* Phones: the arch is the whole hero here, with no scene to fold away;
     only its foot is tightened so the next section follows on */
  @media (max-width:639px){
    .hero-bz{padding-bottom:1.5rem}
  }

  /* Phone hero emblem: a brass stall lantern hangs from the hero's top
     inline-end corner, over the arch's shoulder and clear of the kicker and
     title; it sways three times and hangs still. Desktop never shows it. */
  .hero-bz__lamp{display:none}
  @media (max-width:639px){
    .hero-bz__lamp{
      display:block;position:absolute;z-index:2;top:.25rem;inset-inline-end:1.35rem;width:40px;height:78px;
      pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 0 7px rgba(242,206,116,.55));
      animation:bz-lamp-sway 3.6s ease-in-out .9s 3;
    }
    .hero-bz__lamp svg{display:block;width:100%;height:100%}
    @keyframes bz-lamp-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
  }
  @media (max-width:639px) and (prefers-reduced-motion:reduce){
    .hero-bz__lamp{animation:none}
  }

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