/**
 * Perla Comps — section-level overrides.
 *
 * Maps each parent template-part to its mockup counterpart in
 * /perla-comps-v1.2-dev.html so typography, buttons, cards, hover effects,
 * and inner content match the client-approved design without forking
 * parent template files.
 *
 *   parent .ncs-hero / .hero-section      → mockup #hero
 *   parent #categories-competitions       → mockup #competitions (child .competitions-mockup)
 *   parent .promo-banner-section          → mockup #social-banner
 *   parent .quick-guide-section / .how-it-works-section → child #how-it-works (mockup)
 *   parent .ending-soon-section           → mockup #ending-soon
 *   parent #postal-entry                  → mockup #postal-entry
 *   parent #trust-compliance              → mockup #trust-compliance
 *   parent #live-draws                    → mockup #live-draws
 *   parent #email-signup                  → mockup #email-signup
 *   parent .faq-section                   → mockup #faq
 *   parent #site-header                   → mockup #nav
 *   parent .ncs-site-footer / #site-footer → mockup #footer
 *
 * Tokens come from child-brand.css. Atmospheric layer (orbs + section
 * gradients) lives in perla-atmosphere.css. This file is content-styling
 * only.
 *
 * Loaded after child-brand.css and the parent Vite bundle, so we use
 * `!important` only where Tailwind utilities are inlined or where the
 * parent ships hardcoded `bg-[#hex]` literals we must beat.
 */

/* =========================================================================
   0. Shared mockup primitives — buttons, pills, cards, headings
   ========================================================================= */

/* ---- Section heading rhythm (parent uses ad-hoc Tailwind sizes) ---- */
body .ncs-hero h1,
body #categories-competitions h2,
body .promo-banner-section h2,
body .quick-guide-section h2,
body .ending-soon-section h2,
body .faq-section h2 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ---- Mockup section chrome (.section-label / .section-heading / .section-subtext) ---- */
body .perla-section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body .perla-section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.02em;
}

body .perla-section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

/* Inner pages: primary H1 uses same scale as section headings (homepage hero keeps .perla-hero-headline). */
body main h1.section-heading.perla-section-heading {
  font-family: var(--font-heading);
}

body .perla-section-subtext {
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--color-text-secondary) !important;
  max-width: 560px;
}

@keyframes perla-pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}

body .perla-hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: perla-pulse-dot 2s infinite;
  flex-shrink: 0;
}

/* =========================================================================
   1. SITE HEADER  →  mockup #nav
   parent: <header id="site-header" class="sticky top-0 ... bg-surface/95">
   mockup: #nav { 68px, translucent, gold-on-hover icons, gold logo accent }
   ========================================================================= */
body #site-header {
  border-bottom: 1px solid var(--perla-border-dim);
  box-shadow: none;
  z-index: 999;
}

body #site-header nav {
  min-height: 68px;
}

/* Image logo — .nav-logo */
body #site-header a.nav-logo {
  font-family: var(--font-heading);
  text-decoration: none;
  color: inherit;
}
body #site-header a.nav-logo img.perla-site-logo {
  display: block;
  max-height: 36px;
  width: auto;
  height: auto;
}
body #site-header a.nav-logo:focus-visible img.perla-site-logo,
body #site-header a.nav-logo:hover img.perla-site-logo {
  opacity: 0.92;
}

/* Desktop nav rail — mute links */
body #site-header .perla-header-desktop-nav a,
body #site-header .menu-item > a {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.88rem;
  transition: color 0.22s ease;
}
body #site-header .perla-header-desktop-nav a:hover,
body #site-header .menu-item > a:hover {
  color: var(--color-primary);
}

/* Cart / account icons: 38px circle (child header uses .nav-icon-chip) */
body #site-header .nav-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--perla-border-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-sizing: border-box;
}

body #site-header .nav-icon-chip svg {
  width: 18px;
  height: 18px;
}
body #site-header .nav-icon-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Polylang trigger: same 38px circle as cart/account (text label, not an SVG) */
body #site-header .perla-lang-switcher .nav-icon-chip,
body #site-header [data-perla-lang-toggle] {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50%;
}

/* Polylang dropdown: compact width; was min-w-260 + centered flex-1 label */
body #site-header .perla-lang-menu {
  width: max-content;
  min-width: 0;
  max-width: 12rem;
  box-sizing: border-box;
}

body #site-header .perla-lang-menu__row {
  max-width: 12rem;
  box-sizing: border-box;
}

/* Polylang flags: small rectangle (~3:2), not the previous circular mask */
body #site-header .perla-lang-menu__flag {
  width: 1.5rem; /* 24px */
  height: 0.875rem; /* 14px — h-3.5 */
  flex-shrink: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
body #site-header .perla-lang-menu__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
}

/* Cart count pill: gold on dark, override gradient-primary white text */
body #site-header .nera-header-cart-count-desktop-wrapper span,
body #site-header .nera-header-cart-count-mobile-nav-wrapper span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Mobile menu panel: keep on dark canvas */
body #site-header #mobile-menu {
  background-color: var(--color-surface);
  border-top-color: var(--perla-border-dim);
}
body #site-header #mobile-menu hr {
  border-color: var(--perla-border-dim);
}

/* Keep mobile cart + hamburger hidden on desktop reliably. */
@media (min-width: 1024px) {
  body #site-header .perla-mobile-controls {
    display: none !important;
  }
}

/* =========================================================================
   TRUST BAR (#trust-bar) → mockup #trust-bar (under hero)
   ========================================================================= */

body #trust-bar.trust-bar.credibility-section,
body section#trust-bar.trust-bar,
body section.credibility-section.trust-bar {
  border-top: 1px solid var(--perla-border-dim) !important;
  border-bottom: 1px solid var(--perla-border-dim) !important;
  background: rgba(28, 21, 56, 0.85) !important;
  padding: 22px clamp(16px, 5vw, 40px) !important;
  margin: 0;
}

body :is(#trust-bar, section.credibility-section.trust-bar) .trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

body :is(#trust-bar, section.credibility-section.trust-bar) .tb-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 160px;
  justify-content: center;
}

body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon {
  width: 40px;
  height: 40px;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Medal + lock use filled shapes in mockup SVG — keep stroke/fill from paths */
body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg circle,
body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg path,
body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg rect,
body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg polygon,
body :is(#trust-bar, section.credibility-section.trust-bar) .tb-icon svg polyline {
  stroke: currentColor;
  fill: none;
}

body :is(#trust-bar, section.credibility-section.trust-bar) .tb-info strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

body :is(#trust-bar, section.credibility-section.trust-bar) .tb-info span {
  display: block;
  font-size: 0.71rem;
  color: var(--color-text-secondary);
}

/* =========================================================================
   2. HERO  →  mockup #hero  (child template: perla-hero-section)
   ========================================================================= */

/* ---- Section wrapper ---- */
body section.perla-hero-section {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(1rem, 2.25vw, 1.65rem);
  padding: clamp(44px, 6.5vh, 68px) clamp(16px, 5vw, 40px) clamp(56px, 8vh, 88px);
  position: relative;
  overflow: hidden;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 70% 80% at 70% 50%, rgba(201, 168, 76, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(120, 20, 100, 0.15) 0%, transparent 60%);
}

/* Band between header clearance and main hero grid: centers the discount strip */
body section.perla-hero-section > .perla-hero-discount-slot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(5.25rem, 14vh, 10.5rem);
  padding-block: clamp(0.35rem, 1.8vmin, 1.1rem);
  box-sizing: border-box;
}

/* ---- First-order discount banner (hero strip) — ticket / luxury chip ---- */
body .perla-hero-discount-banner {
  width: 100%;
  max-width: min(840px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

body .perla-hero-discount-ticket-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

body .perla-hero-discount-copy-with-toast {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  justify-content: center;
}

/* “Code copied!” — absolute to .perla-hero-discount-ticket-slot (right of full ticket) */
body .perla-hero-discount-ticket-slot .perla-hero-discount-copy-toast {
  pointer-events: none;
  position: absolute;
  left: calc(100% + 0.4rem);
  top: 50%;
  right: auto;
  z-index: 30;
  min-width: 0;
  max-width: 10rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.32rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #0a0a0c;
  background: linear-gradient(135deg, #fff5c8 0%, #e8c96a 55%, #d4b055 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, #1a1408);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, #fff 28%, transparent) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.96);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

body .perla-hero-discount-ticket-slot .perla-hero-discount-copy-toast.perla-hero-discount-copy-toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

@media (max-width: 519px) {
  body .perla-hero-discount-ticket-slot .perla-hero-discount-copy-toast {
    left: 50%;
    right: auto;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%) translateY(0) scale(0.96);
  }

  body .perla-hero-discount-ticket-slot .perla-hero-discount-copy-toast.perla-hero-discount-copy-toast--visible {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

body .perla-hero-discount-banner__surface {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding-block: 1.05rem;
  padding-inline: clamp(1.05rem, 3vw, 1.35rem);
  border-radius: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  /* Left accent: painted inside the surface so it follows border-radius (no gap vs outer curve). */
  background:
    linear-gradient(
        180deg,
        #f0d56a 0%,
        var(--color-primary) 38%,
        color-mix(in srgb, #c04090 70%, var(--color-primary)) 100%
      )
      0 0 / 5px 100% no-repeat,
    radial-gradient(120% 160% at 100% 0%, rgba(200, 90, 160, 0.18) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(236, 195, 42, 0.12) 0%, transparent 50%),
    linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 92%, #1a0f28) 0%, color-mix(in srgb, var(--color-background-light) 88%, var(--color-secondary)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset,
    inset 4px 0 14px -3px rgba(240, 213, 106, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 0 60px -12px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

body .perla-hero-discount-banner__lead {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  text-align: center;
}

body .perla-hero-discount-banner__glyph {
  display: inline-flex;
  padding: 0.35rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-primary) 35%, transparent));
  flex-shrink: 0;
}

body .perla-hero-discount-banner__text {
  flex: 1;
  align-self: center;
  margin: 0;
  padding: 0;
  min-width: min(100%, 220px);
  line-height: 1.52;
  text-align: center;
}

body .perla-hero-discount-banner__coupon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
}

@media (min-width: 900px) {
  body .perla-hero-discount-banner__surface {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding-block: 1rem;
    padding-inline: 1.35rem 1.5rem;
  }

  body .perla-hero-discount-banner__lead {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  body .perla-hero-discount-banner__text {
    text-align: left;
  }

  body .perla-hero-discount-banner__coupon {
    justify-content: flex-end;
    flex-shrink: 0;
    align-self: center;
  }
}

@media (min-width: 900px) {
  body .perla-shop-prize-disclosure-banner .perla-hero-discount-banner__surface {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0;
  }

  body .perla-shop-prize-disclosure-banner .perla-hero-discount-banner__lead {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
  }
}

body .perla-shop-prize-disclosure-banner .perla-hero-discount-banner__surface {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 0;
  padding-block: 1.125rem;
  box-sizing: border-box;
}

body .perla-shop-prize-disclosure-banner .perla-hero-discount-banner__lead {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
}

body .perla-shop-prize-disclosure-banner .perla-shop-prize-disclosure-banner__body > :last-child {
  margin-bottom: 0;
}

body .perla-shop-prize-disclosure-banner .perla-shop-prize-disclosure-banner__body > :last-child .space-y-2 > p:last-child {
  padding-bottom: 0 !important;
}

body .perla-shop-prize-disclosure-banner .perla-shop-prize-disclosure-banner__body {
  width: 100%;
  max-width: none;
  min-width: 0;
  text-align: left;
}

/* Beat parent + Tailwind `flex-1` / `align-self: center` on the prose column so vertical padding reads even. */
body .perla-shop-prize-disclosure-banner .perla-shop-prize-disclosure-banner__body.perla-hero-discount-banner__text {
  flex: 0 1 auto !important;
  flex-grow: 0 !important;
  align-self: stretch !important;
}

@media (min-width: 900px) {
  body .perla-shop-prize-disclosure-banner .perla-shop-prize-disclosure-banner__body.perla-hero-discount-banner__text {
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    align-self: stretch !important;
  }
}

/* Discount ticket: animated gold pill (dual-layer shine, L→R) + perforated edge + ink text */
@keyframes perla-hero-discount-ticket-shine {
  0% {
    background-position: -115% 0, 0 0;
  }
  100% {
    background-position: 230% 0, 0 0;
  }
}

body .perla-hero-discount-ticket {
  display: inline-flex;
  align-items: center;
  position: relative;
  max-width: 100%;
  cursor: pointer;
  border-radius: 0.65rem;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid color-mix(in srgb, #b88614 55%, #3a2a0c);
  background-image:
    linear-gradient(
      100deg,
      transparent 18%,
      rgba(255, 252, 235, 0.75) 48%,
      rgba(255, 255, 255, 0.55) 52%,
      transparent 86%
    ),
    linear-gradient(
      118deg,
      #b88614 0%,
      #e8bd32 34%,
      #fde047 50%,
      #fbbf24 66%,
      #b45309 100%
    );
  background-size:
    min(320px, 65%) 100%,
    100% 100%;
  background-position: -115% 0, 0 0;
  background-repeat: no-repeat;
  animation: perla-hero-discount-ticket-shine 3.1s ease-in-out infinite;
  animation-delay: 0.2s;
  box-shadow:
    0 4px 22px rgba(234, 179, 8, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  body .perla-hero-discount-ticket {
    animation: none;
    background-image: linear-gradient(
      118deg,
      #b88614 0%,
      #e8bd32 34%,
      #fde047 50%,
      #fbbf24 66%,
      #b45309 100%
    );
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

body .perla-hero-discount-ticket::after {
  content: '';
  position: absolute;
  left: 3.1rem;
  top: 6px;
  bottom: 6px;
  width: 0;
  border-left: 2px dashed color-mix(in srgb, #0a0a0c 42%, transparent);
  pointer-events: none;
  z-index: 1;
}

body .perla-hero-discount-ticket-percent {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 3rem;
  padding: 0.45rem 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  color: #0a0a0c;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Code strip + trailing copy icon (⅔× code font-sized control) */
body .perla-hero-discount-code-track {
  --code-fs: clamp(0.95rem, 2vw, 1.2rem);
  --copy-glyph: calc(var(--code-fs) * 2 / 3);
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
  padding-right: 0.35rem;
  font-size: var(--code-fs);
}

body .perla-hero-discount-code {
  position: relative;
  overflow: hidden;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  user-select: all;
  -webkit-user-select: all;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 1em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  padding: 0.55rem 0.25rem 0.55rem 1.15rem;
  line-height: 1.15;
  color: #0a0a0c;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #0a0612 10%, transparent) 0%,
    color-mix(in srgb, #0a0612 16%, transparent) 100%
  );
  transition: filter 0.2s ease, transform 0.2s ease;
}

body .perla-hero-discount-ticket:hover {
  background-image:
    linear-gradient(
      100deg,
      transparent 18%,
      rgba(255, 253, 245, 0.85) 48%,
      rgba(255, 255, 255, 0.65) 52%,
      transparent 86%
    ),
    linear-gradient(
      118deg,
      #ca9a24 0%,
      #f4d962 38%,
      #fff088 52%,
      #fcd656 72%,
      #c0780a 100%
    );
  box-shadow:
    0 6px 28px rgba(234, 179, 8, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body .perla-hero-discount-ticket:hover .perla-hero-discount-code {
  transform: translateY(-0.5px);
}

body .perla-hero-discount-code:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body .perla-hero-discount-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max(1.4rem, calc(var(--copy-glyph) + 0.45rem));
  height: max(1.4rem, calc(var(--copy-glyph) + 0.45rem));
  padding: 0;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body .perla-hero-discount-copy-btn:hover,
body .perla-hero-discount-copy-btn:focus-visible {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-primary);
  border-color: color-mix(in srgb, var(--color-primary-dark) 90%, #000);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

body .perla-hero-discount-copy-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

body .perla-hero-discount-copy-btn svg {
  flex-shrink: 0;
  width: var(--copy-glyph);
  height: var(--copy-glyph);
}

/* Visually hidden; keep for screen reader + aria-live announcements */
body .perla-hero-discount-banner__surface .perla-copy-code-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  bottom: 0;
  right: 0;
}

/* ---- Two-column inner grid ---- */
body .perla-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  body .perla-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body .perla-hero-right {
    order: -1;
  }
}

/* ---- Badge ---- */
body .perla-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 22px;
}

/* ---- Headline ---- */
body .perla-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 10px;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

body .perla-hero-gold,
body .perla-hero-headline .perla-hero-gold {
  color: var(--color-primary);
  background: none !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  font-weight: 800;
}

/* Keep .text-gradient-primary from overriding our gold colour */
body .ncs-hero h1 .text-gradient-primary,
body .perla-hero-headline .text-gradient-primary {
  background: none !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-weight: 800;
}

/* ---- Sub-headline ---- */
body .perla-hero-subheadline {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ---- Supporting line ---- */
body .perla-hero-supporting {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin-bottom: 30px;
  font-weight: 300;
}

/* ---- CTA row ---- */
body .perla-hero-ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

body .perla-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
}

body .perla-btn-primary {
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  color: #0a0a0c;
  -webkit-text-fill-color: currentColor;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
}

body .perla-btn-primary svg {
  color: inherit;
}

body .perla-btn-primary:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
  color: #0a0a0c;
  -webkit-text-fill-color: currentColor;
}

body .perla-btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--perla-border);
}

body .perla-btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Also cover legacy selectors so old CTA helper classes still work */
body .ncs-hero .ncs-hero__cta a:first-child,
body .ncs-hero .ncs-hero__cta a.bg-gradient-primary {
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
  transition: all 0.22s ease;
}

body .ncs-hero .ncs-hero__cta a:first-child:hover,
body .ncs-hero .ncs-hero__cta a.bg-gradient-primary:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55) !important;
  transform: translateY(-2px);
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
}

body .ncs-hero .ncs-hero__cta a:first-child:hover svg,
body .ncs-hero .ncs-hero__cta a.bg-gradient-primary:hover svg {
  color: #0a0a0c !important;
  stroke: currentColor !important;
}

/* Icon-first primary CTA (child template .perla-btn-primary) */
body .ncs-hero .ncs-hero__cta a.perla-btn-primary {
  border-radius: 999px !important;
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
}

body .ncs-hero .ncs-hero__cta a.perla-btn-primary svg,
body .ncs-hero .ncs-hero__cta a.bg-gradient-primary svg,
body .ncs-hero .ncs-hero__cta a:first-child svg {
  color: #0a0a0c !important;
  stroke: currentColor !important;
}

/* Secondary CTA — ghost button (transparent, gold on hover) */
body .ncs-hero .ncs-hero__cta a:last-child:not(:first-child),
body .ncs-hero .ncs-hero__cta a[class*='border-2'] {
  background: transparent !important;
  border: 1.5px solid var(--perla-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  transition: all 0.22s ease;
}
body .ncs-hero .ncs-hero__cta a:last-child:not(:first-child):hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
}

body .ncs-hero .ncs-hero__cta a.perla-btn-ghost {
  border-radius: 999px !important;
  border-width: 1.5px !important;
}

/* ---- Trust badges row ---- */
body .perla-hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

body .perla-htb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--perla-border-dim);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

body .perla-htb svg {
  width: 13px;
  height: 13px;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---- Gamble-aware line ---- */
body .perla-hero-gamble {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.55;
  margin-bottom: 14px;
}

body .perla-hero-gamble a {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

body .perla-hero-gamble a:hover {
  opacity: 0.85;
  color: var(--color-primary);
}

/* ---- Social follow row ---- */
body .perla-hero-social-follow {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body .perla-hero-social-follow > span {
  opacity: 0.65;
}

body .perla-social-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--perla-border-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.22s ease;
}

body .perla-social-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body .perla-social-chip svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Hero image column ---- */
body .perla-hero-right {
  position: relative;
}

body .perla-hero-image-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

body .perla-hero-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--perla-border-dim);
  display: block;
}

body .perla-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(16, 12, 32, 0.75) 100%);
  border-radius: 16px;
  pointer-events: none;
}

/* ---- Winner badge (bottom-right overlay) ---- */
body .perla-hero-winner-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(16, 12, 32, 0.92);
  border: 1px solid var(--perla-border);
  border-radius: 12px;
  padding: 12px 18px;
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  animation: perla-slide-in-right 0.7s 0.5s ease both;
}

@keyframes perla-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

body .perla-hwb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  border: 1.5px solid var(--color-primary);
  overflow: hidden;
  flex-shrink: 0;
}

body .perla-hwb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body .perla-hwb-info strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

body .perla-hwb-info span {
  display: block;
  font-size: 0.7rem;
  color: var(--color-primary);
}

body .perla-hwb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  margin-left: auto;
  box-shadow: 0 0 10px var(--color-success);
  animation: perla-pulse-dot 2s infinite;
  flex-shrink: 0;
}

/* ---- Hero entrance animation ---- */
body .perla-hero-left > * {
  animation: perla-fade-in-up 0.65s ease both;
}
body .perla-hero-left > *:nth-child(1) { animation-delay: 0.05s; }
body .perla-hero-left > *:nth-child(2) { animation-delay: 0.14s; }
body .perla-hero-left > *:nth-child(3) { animation-delay: 0.22s; }
body .perla-hero-left > *:nth-child(4) { animation-delay: 0.30s; }
body .perla-hero-left > *:nth-child(5) { animation-delay: 0.38s; }
body .perla-hero-left > *:nth-child(6) { animation-delay: 0.44s; }
body .perla-hero-left > *:nth-child(7) { animation-delay: 0.50s; }
body .perla-hero-left > *:nth-child(8) { animation-delay: 0.56s; }
body .perla-hero-image-wrap {
  animation: perla-fade-in-up 0.8s 0.18s ease both;
}

@keyframes perla-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Legacy: old parent hero image fallback */
body .ncs-hero [class*='from-gray-200'] {
  background: linear-gradient(135deg, var(--color-surface), var(--color-secondary)) !important;
  border: 1px solid var(--perla-border-dim);
  border-radius: 22px;
}
body .ncs-hero .relative.rounded-2xl {
  border-radius: 22px;
  border: 1px solid var(--perla-border-dim);
}
body .ncs-hero .bg-surface.shadow-xl,
body .ncs-hero .bg-surface[class*='shadow-xl'] {
  background-color: rgba(16, 12, 32, 0.92) !important;
  border: 1px solid var(--perla-border);
  backdrop-filter: blur(14px);
  border-radius: 14px;
}
body .ncs-hero .bg-surface .text-success {
  color: var(--color-success) !important;
  filter: drop-shadow(0 0 6px var(--color-success));
}

/* =========================================================================
   3. COMPETITIONS  →  mockup #competitions
   parent: <section id="categories-competitions" class="py-24 bg-surface">
   mockup: 100px padding, soft purple band, "Live Competitions" gold pill,
           pill filter row, 3-col grid of dark surface cards w/ gold hover,
           gold "View All" CTA.
   ========================================================================= */

/* Section shell — mockup #competitions band */
body #categories-competitions {
  background: transparent !important;
}

body #categories-competitions.competitions-mockup {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(28, 21, 56, 0.45) 50%,
    transparent 100%
  ) !important;
  position: relative;
}

/* Header — mockup .comps-header */
body #categories-competitions .comps-header {
  max-width: 1200px;
  margin: 0 auto 36px;
  text-align: center;
}

body #categories-competitions .comps-header .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #categories-competitions .comps-header .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0 0 0.5rem;
}

body #categories-competitions .comps-header .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #categories-competitions .comps-header .section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 12px auto 0;
  font-weight: 300;
  line-height: 1.6;
}

/* Filter pills — mockup .comp-filters / .pill */
body #categories-competitions .comp-filters {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

body #categories-competitions .comp-filters-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body #categories-competitions .comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--perla-border-dim);
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
  box-shadow: none;
  background: transparent;
  color: var(--color-text-secondary);
}

body #categories-competitions .comp-pill:hover {
  border-color: var(--perla-border);
  color: var(--color-text-primary);
}

body #categories-competitions .comp-pill.pill-active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #080510 !important;
  font-weight: 700;
}

body #categories-competitions .comp-pill.pill-inactive {
  background: transparent;
  border-color: var(--perla-border-dim);
  color: var(--color-text-secondary);
}

body #categories-competitions .comp-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body #categories-competitions .comp-pill-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

body #categories-competitions .comp-pill-icon--material .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

body #categories-competitions .comp-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

body #categories-competitions .comp-pill.pill-active .comp-pill-count {
  background: rgba(8, 5, 16, 0.15);
  color: #080510;
}

/* Legacy tablist buttons (parent template without .comp-pill) */
body #categories-competitions [role='tablist'] button:not(.comp-pill) {
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  font-weight: 500;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--perla-border-dim) !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
  transition: all 0.22s ease;
}
body #categories-competitions [role='tablist'] button:not(.comp-pill):hover {
  border-color: var(--perla-border) !important;
  color: var(--color-text-primary) !important;
  transform: none !important;
}
body #categories-competitions [role='tablist'] button:not(.comp-pill)[aria-selected='true'],
body #categories-competitions [role='tablist'] button:not(.comp-pill).bg-gradient-to-r {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 0 transparent !important;
}

body #categories-competitions [role='tablist'] button:not(.comp-pill) span[class*='rounded-full'] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-secondary) !important;
}
body #categories-competitions [role='tablist'] button:not(.comp-pill)[aria-selected='true'] span[class*='rounded-full'] {
  background: rgba(8, 5, 16, 0.18) !important;
  color: var(--color-on-primary) !important;
}

/* -------------------------------------------------------------------------
   Shop / product archive filter strip (.comp-filters--archive)
   — trust-bar canvas + borders; controls mirror .comp-pill / .pill-active
   ------------------------------------------------------------------------- */

body #categories-competitions .comp-filters--archive {
  border-top: 1px solid var(--perla-border-dim);
  border-bottom: 1px solid var(--perla-border-dim);
  background: rgba(28, 21, 56, 0.85);
  padding: clamp(14px, 3vw, 22px) clamp(16px, 5vw, 40px);
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  box-sizing: border-box;
}

body #categories-competitions .comp-filters-inner--archive {
  gap: 10px;
}

/* Trigger row — inactive pill */
body #categories-competitions .perla-archive-filter-trigger {
  font-family: var(--font-body);
  border-radius: 999px;
  border: 1.5px solid var(--perla-border-dim);
  background: transparent;
  color: var(--color-text-secondary);
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

body #categories-competitions .perla-archive-filter-trigger:hover {
  border-color: var(--perla-border);
  color: var(--color-text-primary);
}

/* Active — pill-active */
body #categories-competitions .perla-archive-filter-trigger--on {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

body #categories-competitions .perla-archive-filter-trigger input::placeholder {
  color: color-mix(in srgb, var(--color-text-secondary) 82%, transparent);
}

/* Native selects — pill chrome + readable OS dropdown (fixes light-on-light options) */
body #categories-competitions .perla-archive-filter-select-wrap .perla-archive-filter-select {
  font-family: var(--font-body);
  border-radius: 999px;
  border: 1.5px solid var(--perla-border-dim);
  background: transparent;
  color: var(--color-text-primary);
  color-scheme: dark;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}

body #categories-competitions .perla-archive-filter-select-wrap .perla-archive-filter-select:hover {
  border-color: var(--perla-border);
}

body #categories-competitions .perla-archive-filter-select-wrap .perla-archive-filter-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/*
 * Options list: force readable contrast on Windows/WebKit (inherits light bg).
 * Matches intent of header .perla-lang-menu (dark surface + legible rows).
 */
body #categories-competitions .perla-archive-filter-select option {
  background-color: #f4f0fc;
  color: #140f22;
}

body #categories-competitions .perla-archive-filter-clear {
  font-family: var(--font-body);
  border-radius: 999px;
  border: 1.5px solid var(--perla-border-dim);
  background: transparent;
  color: var(--color-text-secondary);
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

body #categories-competitions .perla-archive-filter-clear:hover {
  border-color: var(--perla-border);
  color: var(--color-text-primary);
}

/* Category dropdown panel — Polylang-style surface + border */
body #categories-competitions .perla-archive-category-dropdown {
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}

body #categories-competitions .perla-archive-category-dropdown li:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Gold-gradient chips (hero CTA–grade), dark ink labels */
body #categories-competitions .perla-archive-chip--gradient {
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, #0a0a0c);
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c;
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.32);
}

body #categories-competitions .perla-archive-chip--gradient .perla-archive-chip-label {
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c;
}

body #categories-competitions .perla-archive-chip--gradient svg {
  color: #0a0a0c;
  stroke: currentColor;
}

body #categories-competitions .perla-archive-chip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(8, 5, 16, 0.15);
}

body #categories-competitions .perla-archive-chip--lg {
  box-shadow: 0 3px 14px rgba(201, 168, 76, 0.35);
}

body #categories-competitions .perla-archive-chip-more {
  border: 1.5px solid var(--perla-border-dim);
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Section badge "Browse by Category" — gold pill (legacy markup) */
body #categories-competitions .inline-flex.border-primary\/20,
body #categories-competitions [class*='border-primary/20'] {
  background: var(--perla-primary-glow) !important;
  border: 1px solid var(--perla-border) !important;
  color: var(--color-primary);
  border-radius: 999px;
}

body #categories-competitions .text-primary[class*='uppercase'],
body #categories-competitions span.text-primary {
  color: var(--color-primary);
  letter-spacing: 0.18em;
}

/* Grid — mockup .comp-grid (desktop: repeat(3, 1fr) like perla-comps-v1.2-dev.html) */
body #categories-competitions .comp-grid {
  max-width: 1200px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
}

/*
 * Shop archive (#advanced-filter-grid): match homepage #categories-grid.comp-grid exactly.
 * WooCommerce / other stylesheets can force flex/float on loops — re-assert full grid track
 * math so cards don’t space apart or clip like a broken product loop.
 */
body #categories-competitions #advanced-filter-grid.comp-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto 0 !important;
  box-sizing: border-box !important;
  flex-wrap: unset !important;
  flex-direction: unset !important;
  align-content: unset !important;
  justify-content: unset !important;
  float: none !important;
  clear: none !important;
  list-style: none !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  body #categories-competitions .comp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #categories-competitions #advanced-filter-grid.comp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  body #categories-competitions .comp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body #categories-competitions #advanced-filter-grid.comp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Alpine category filter: x-show lives on this wrapper so the card keeps display:flex.
   Make the cell a flex column so the nested .comp-card stretches to the
   grid row height — without this, cards size to their content and rows
   of mixed-height cards look uneven. */
body #categories-competitions .comp-grid > .comp-grid__cell {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

body #categories-competitions .comp-grid > .comp-grid__cell > .comp-card {
  flex: 1 1 auto;
  height: 100%;
}

/* Scroll reveal */
body #categories-competitions .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #categories-competitions .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #categories-competitions .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Decorative divider line in subtitle row — soften */
body #categories-competitions [class*='via-gray-300'] {
  background-image: linear-gradient(to right, transparent, var(--perla-border), transparent) !important;
}

/* Competition card (component): re-skin parent `.bg-surface .border-gray-100`
   shell to match mockup .comp-card with gold-glow hover. The component
   inlines per-category accent colours via `style=""`, so we only restyle
   the surface/border/shadow + card-internal text. */
body #categories-competitions article > div,
body #categories-competitions .bg-surface.rounded-xl,
body #categories-competitions .bg-surface.rounded-2xl {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--perla-border-dim) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: all 0.3s ease;
}
body #categories-competitions article:hover > div {
  border-color: rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 168, 76, 0.12) !important;
}

/* Mockup .comp-card gold wash overlay */
body #categories-competitions.competitions-mockup article > div {
  position: relative;
  isolation: isolate;
}

body #categories-competitions.competitions-mockup article > div::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

body #categories-competitions.competitions-mockup article:hover > div::before {
  opacity: 1;
}

body #categories-competitions.competitions-mockup article > div > * {
  position: relative;
  z-index: 2;
}

/* Mockup .comp-card-img — fixed height + bottom gradient */
body #categories-competitions.competitions-mockup article > div > div.relative.overflow-hidden:first-child {
  height: 210px !important;
  min-height: 210px;
  max-height: 210px;
  aspect-ratio: auto !important;
}

body #categories-competitions.competitions-mockup article > div > div.relative.overflow-hidden:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(16, 12, 32, 0.45) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Image zoom — mockup ~1.06 */
body #categories-competitions.competitions-mockup article.group:hover [class*='bg-cover'] {
  transform: scale(1.06) !important;
  transition: transform 0.5s ease !important;
}

/* Progress bar shimmer (mockup .progress-fill::after) */
@keyframes perla-competitions-shimmer {
  0% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}

body #categories-competitions.competitions-mockup article .relative.overflow-hidden.rounded-full.shadow-inner > .h-full.rounded-full {
  position: relative;
  overflow: hidden;
}

body #categories-competitions.competitions-mockup article .relative.overflow-hidden.rounded-full.shadow-inner > .h-full.rounded-full::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: perla-competitions-shimmer 2.2s infinite;
}

/* Urgent badge pulse — mockup .badge-live */
@keyframes perla-competitions-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 14px rgba(232, 69, 69, 0.5);
  }
  50% {
    box-shadow: 0 0 22px rgba(232, 69, 69, 0.8);
  }
}

body #categories-competitions.competitions-mockup article .animate-pulse {
  animation: perla-competitions-badge-pulse 2.5s ease-in-out infinite;
}

/* Card title — make sure it renders white on hover-gold */
body #categories-competitions article h3 a {
  color: var(--color-text-primary);
}
body #categories-competitions article h3 a:hover {
  color: var(--color-primary);
}

/* "Tickets Sold" label */
body #categories-competitions article .uppercase.tracking-wider {
  color: var(--color-text-secondary) !important;
  font-weight: 500;
}

/* Progress bar background well */
body #categories-competitions article [class*='bg-gray-100'].rounded-full {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Footer divider above CTA */
body #categories-competitions article [class*='border-t'][class*='border-gray-100'] {
  border-top-color: var(--perla-border-dim) !important;
}

/* Glassmorphic price chip — dark variant */
body #categories-competitions article .bg-surface\/95.backdrop-blur-md,
body #categories-competitions article [class*='bg-surface/95'] {
  background-color: rgba(16, 12, 32, 0.85) !important;
  border-color: var(--perla-border-dim) !important;
}

/* "View All Competitions" CTA — gold pill */
body #categories-competitions a.bg-gradient-to-r[class*='from-primary'] {
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  background-image: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  color: #0a0a0c !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
  transition: all 0.22s ease;
}
body #categories-competitions a.bg-gradient-to-r[class*='from-primary']:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  color: #0a0a0c !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55) !important;
  transform: translateY(-2px);
}

/* =========================================================================
   4. PROMO BANNER  →  mockup #social-banner
   parent: <section class="promo-banner-section"> full-bleed gradient strip
           with ::before gold radial (perla-atmosphere.css), gold pill badge,
           white headline, horizontal .social-btn-style links.
   ========================================================================= */

body .promo-banner-section {
  padding: 64px clamp(16px, 5vw, 40px);
}

/* FAQ template (`faq-page-template.php`): inherit page canvas — no gradient strip or ::before wash */
body main.faq-page .promo-banner-section {
  background-image: none !important;
  background-color: transparent !important;
}

body main.faq-page .promo-banner-section::before {
  display: none !important;
  background: none !important;
  content: none !important;
}

/* Section gets gradient from perla-atmosphere.css; typography + social pills here. */

/* Badge "Stay Connected" — replace solid bg-primary chip with gold pill */
body .promo-banner-section span.bg-primary {
  background: var(--perla-primary-glow) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--perla-border);
  padding: 5px 14px !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Title — keep white but match mockup weight + size */
body .promo-banner-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Description text */
body .promo-banner-section p.text-white\/80,
body .promo-banner-section p[class*='text-white/80'] {
  color: var(--color-text-secondary) !important;
  font-size: 0.95rem;
  font-weight: 300;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Social CTAs — perla-comps-v1.2-dev.html .social-icons / .social-btn */
body .promo-banner-section .social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

body .promo-banner-section a.social-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--perla-border-dim);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

body .promo-banner-section a.social-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  transform: translateY(-2px);
}

body .promo-banner-section a.social-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body .promo-banner-section a.social-btn svg polygon {
  fill: currentColor;
  stroke: none;
}

body .promo-banner-section a.social-btn__label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit !important;
}

/* =========================================================================
   5. HOW IT WORKS (#how-it-works)  →  perla-comps-v1.2-dev.html
   Child template: .quick-guide-section.how-it-works-mockup
   ========================================================================= */

body #how-it-works.quick-guide-section,
body #how-it-works.how-it-works-section {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  position: relative;
}

/* Header — mockup .section-label / .section-heading / .section-subtext */
body #how-it-works .how-header {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
}

body #how-it-works .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #how-it-works .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
}

body #how-it-works .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #how-it-works .section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 12px auto 0;
  font-weight: 300;
  line-height: 1.6;
}

/* Step grid */
body #how-it-works .steps-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 768px) {
  body #how-it-works .steps-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  body #how-it-works .steps-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

body #how-it-works .steps-content .step {
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

body #how-it-works .steps-content .step:hover {
  border-color: var(--perla-border);
  transform: translateY(-5px);
  box-shadow: 0 4px 32px rgba(201, 168, 76, 0.22), 0 0 24px rgba(201, 168, 76, 0.08);
}

body #how-it-works .steps-content .step-num {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.12;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 18px;
  pointer-events: none;
  font-family: var(--font-heading);
}

body #how-it-works .steps-content .step-icon {
  width: 56px;
  height: 56px;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--color-primary);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

body #how-it-works .steps-content .step:hover .step-icon {
  background: rgba(201, 168, 76, 0.28);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
}

body #how-it-works .steps-content .step-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #how-it-works .steps-content .step h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
}

body #how-it-works .steps-content .step p {
  font-size: 0.83rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

/* Compliance callout */
body #how-it-works .how-compliance {
  max-width: 700px;
  margin: 48px auto 0;
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid var(--perla-border);
  border-radius: 14px;
  padding: 22px 28px;
  font-size: 0.83rem;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.7;
  font-weight: 300;
}

body #how-it-works .how-compliance strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* CTA */
body #how-it-works .how-cta {
  text-align: center;
  margin-top: 40px;
}

body #how-it-works .how-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #0a0a0c !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
}

body #how-it-works .how-cta-btn:hover {
  color: #0a0a0c !important;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
}

/* Scroll reveal (mockup .reveal) */
body #how-it-works .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #how-it-works .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #how-it-works .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   5b. FREE POSTAL ENTRY (#postal-entry)  →  perla-comps-v1.2-dev.html
   ========================================================================= */

body #postal-entry.postal-entry-section {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  position: relative;
}

body #postal-entry .postal-inner {
  max-width: 1200px;
  margin: 0 auto;
}

body #postal-entry .postal-intro {
  margin-bottom: 56px;
}

body #postal-entry .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #postal-entry .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0;
}

body #postal-entry .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #postal-entry .section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-top: 12px;
  font-weight: 300;
  line-height: 1.6;
}

body #postal-entry .postal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

body #postal-entry .postal-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body #postal-entry .postal-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 12px;
  padding: 22px;
  transition: border-color 0.22s ease, transform 0.22s ease;
}

body #postal-entry .postal-step:hover {
  border-color: var(--perla-border);
  transform: translateX(4px);
}

body #postal-entry .postal-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #080510;
  flex-shrink: 0;
}

body #postal-entry .postal-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--color-text-primary);
}

body #postal-entry .postal-step p {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

body #postal-entry .postal-address {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid var(--perla-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  font-style: normal;
  line-height: 1.8;
}

body #postal-entry .postal-sidebar {
  position: sticky;
  top: 90px;
}

body #postal-entry .postal-highlight {
  background: var(--color-surface);
  border: 1px solid var(--perla-border);
  border-radius: 18px;
  padding: 40px;
  text-align: center;
}

body #postal-entry .postal-highlight-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--color-primary);
}

body #postal-entry .postal-highlight-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #postal-entry .postal-highlight h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text-primary);
}

body #postal-entry .postal-highlight > p:not(.postal-highlight-note) {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 20px;
  font-weight: 300;
}

body #postal-entry .postal-highlight-note {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 20px;
}

body #postal-entry .gold-rule.postal-gold-rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  margin: 0 auto 20px;
}

body #postal-entry .postal-compliance {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid var(--perla-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 0;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-weight: 300;
}

body #postal-entry .postal-compliance a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body #postal-entry .postal-compliance a:hover {
  color: var(--color-primary-dark, #a8883a);
}

body #postal-entry .postal-highlight-compliance {
  margin-top: 20px;
  text-align: center;
}

body #postal-entry .postal-highlight-compliance strong {
  color: var(--color-primary);
  font-weight: 600;
}

body #postal-entry .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
}

body #postal-entry .btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--perla-border);
}

body #postal-entry .btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

body #postal-entry .postal-browse-btn {
  margin-top: 8px;
}

/* Scroll reveal (mockup .reveal) */
body #postal-entry .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #postal-entry .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #postal-entry .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  body #postal-entry .postal-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body #postal-entry .postal-sidebar {
    position: static;
  }
}

/* =========================================================================
   5c. TRUST & COMPLIANCE (#trust-compliance)  →  perla-comps-v1.2-dev.html
   ========================================================================= */

body #trust-compliance.trust-compliance-section {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  position: relative;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(28, 21, 56, 0.5) 50%,
    transparent 100%
  );
}

body #trust-compliance .trust-comp-header {
  max-width: 1200px;
  margin: 0 auto 56px;
  text-align: center;
}

body #trust-compliance .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #trust-compliance .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0;
}

body #trust-compliance .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #trust-compliance .trust-comp-subtext.section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 12px auto 0;
  font-weight: 300;
  line-height: 1.6;
}

body #trust-compliance .trust-blocks {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

body #trust-compliance .trust-block {
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 12px;
  padding: 30px 26px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

body #trust-compliance .trust-block:hover {
  border-color: var(--perla-border);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(201, 168, 76, 0.1);
}

body #trust-compliance .trust-block-icon {
  width: 50px;
  height: 50px;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-primary);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

body #trust-compliance .trust-block:hover .trust-block-icon {
  background: rgba(201, 168, 76, 0.28);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.18);
}

body #trust-compliance .trust-block-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #trust-compliance .trust-block-icon svg polygon {
  fill: currentColor;
  stroke: none;
}

body #trust-compliance .trust-block h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 9px;
  color: var(--color-text-primary);
}

body #trust-compliance .trust-block p {
  font-size: 0.81rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}

body #trust-compliance .trust-closing {
  max-width: 700px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 300;
  line-height: 1.65;
}

body #trust-compliance .trust-closing a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body #trust-compliance .trust-closing a:hover {
  color: var(--color-primary-dark, #a8883a);
}

/* Scroll reveal */
body #trust-compliance .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #trust-compliance .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #trust-compliance .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  body #trust-compliance .trust-blocks {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   5d. LIVE DRAWS (#live-draws)  →  perla-comps-v1.2-dev.html
   ========================================================================= */

body #live-draws.live-draws-section {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  position: relative;
}

body #live-draws .draws-inner {
  max-width: 1200px;
  margin: 0 auto;
}

body #live-draws .draws-header {
  text-align: center;
  margin-bottom: 60px;
}

body #live-draws .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #live-draws .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0;
}

body #live-draws .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #live-draws .draws-header-subtext.section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 12px auto 0;
  font-weight: 300;
  line-height: 1.6;
}

body #live-draws .draws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 48px;
}

body #live-draws .draw-step {
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

body #live-draws .draw-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 36px;
  width: 24px;
  height: 1px;
  background: var(--perla-border);
  opacity: 0.5;
  z-index: 2;
}

body #live-draws .draw-step:hover {
  border-color: var(--perla-border);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201, 168, 76, 0.18), 0 20px 50px rgba(0, 0, 0, 0.35);
}

body #live-draws .draw-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--color-primary);
  transition: background 0.22s ease;
}

body #live-draws .draw-step:hover .draw-step-icon {
  background: rgba(201, 168, 76, 0.28);
}

body #live-draws .draw-step-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #live-draws .draw-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}

body #live-draws .draw-step p {
  font-size: 0.79rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

body #live-draws .draws-social-prompt {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid var(--perla-border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  margin-bottom: 28px;
}

body #live-draws .draws-social-prompt p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0 0 20px;
  font-weight: 300;
  line-height: 1.6;
}

body #live-draws .draws-compliance {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-align: center;
  opacity: 0.65;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}

body #live-draws .draws-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

body #live-draws .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s ease,
    box-shadow 0.22s ease, background 0.22s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
}

body #live-draws .btn-primary.draws-fb-btn {
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  color: #080510;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
}

body #live-draws .btn-primary.draws-fb-btn:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
}

/* WooCommerce cart / checkout — same gold pill as #live-draws .btn-primary.draws-fb-btn (overrides child style.css .btn-checkout block) */
body:not(.block-editor-page) a.btn.btn-primary.draws-fb-btn.btn-checkout,
body:not(.block-editor-page) button.btn.btn-primary.draws-fb-btn.btn-checkout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
  font-family: var(--font-body);
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease !important;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  background-image: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  color: #080510 !important;
  -webkit-text-fill-color: #080510 !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38) !important;
  line-height: 1.2 !important;
  min-height: unset !important;
  filter: none !important;
}

body:not(.block-editor-page) a.btn.btn-primary.draws-fb-btn.btn-checkout.inline-flex {
  width: auto !important;
}

body:not(.block-editor-page) a.btn.btn-primary.draws-fb-btn.btn-checkout:hover,
body:not(.block-editor-page) button.btn.btn-primary.draws-fb-btn.btn-checkout:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  background-image: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  color: #080510 !important;
  -webkit-text-fill-color: #080510 !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55) !important;
  transform: translateY(-2px);
}

body:not(.block-editor-page) a.btn.btn-primary.draws-fb-btn.btn-checkout .material-symbols-outlined,
body:not(.block-editor-page) button.btn.btn-primary.draws-fb-btn.btn-checkout .material-symbols-outlined {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

@media (max-width: 639px) {
  body:not(.block-editor-page) a.btn.btn-primary.draws-fb-btn.btn-checkout,
  body:not(.block-editor-page) button.btn.btn-primary.draws-fb-btn.btn-checkout {
    padding: 12px 22px !important;
  }
}

body #live-draws .btn-ghost.draws-winners-btn {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--perla-border);
}

body #live-draws .btn-ghost.draws-winners-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

body #live-draws .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #live-draws .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #live-draws .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1024px) {
  body #live-draws .draws-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body #live-draws .draw-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  body #live-draws .draws-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   5e. WINNER STORIES (#winner-stories)  →  perla-comps-v1.2-dev.html
   ========================================================================= */

body #winner-stories.perla-winner-stories-section {
  padding: clamp(72px, 12vw, 100px) clamp(16px, 5vw, 40px);
  position: relative;
}

body #winner-stories .stories-header {
  max-width: 1200px;
  margin: 0 auto 48px;
  text-align: center;
}

body #winner-stories .stories-header .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #winner-stories .stories-header .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0;
}

body #winner-stories .stories-header .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #winner-stories .winners-intro-subtext.section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 12px auto 0;
  font-weight: 300;
  line-height: 1.6;
}

body #winner-stories .winners-holding {
  max-width: 1200px;
  margin: 0 auto;
}

body #winner-stories .winners-empty {
  background: var(--color-surface);
  border: 1px solid var(--perla-border);
  border-radius: 22px;
  padding: 64px 40px;
  text-align: center;
}

body #winner-stories .winners-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--color-primary);
}

body #winner-stories .winners-empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #winner-stories .winners-empty h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text-primary);
}

body #winner-stories .winners-empty > p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto 28px;
  font-weight: 300;
  line-height: 1.65;
}

body #winner-stories .winners-empty .btn-primary.winners-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  color: #080510;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

body #winner-stories .winners-empty .btn-primary.winners-empty-cta:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
}

body #winner-stories .winners-holding-footer {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 18px;
  opacity: 0.6;
  font-weight: 300;
  line-height: 1.65;
}

body #winner-stories .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #winner-stories .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #winner-stories .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   6. ENDING SOON  →  mockup #ending-soon
   parent: static flex row/wrap of bg-surface cards (no horizontal scroll).
   mockup: 280px cards in dark surface + gold accents + prize tag + progress.
   Child theme template limits the query to 3 products (mockup strip).
   ========================================================================= */

body .ending-soon-section {
  padding-top: 100px;
  padding-bottom: 100px;
  background: transparent !important;
}

body .ending-soon-section p.text-text-secondary {
  color: var(--color-text-secondary) !important;
  font-weight: 300;
}

/* Card shell — parent Tailwind cards only (not mockup `.comp-card`). */
body .ending-soon-section article:not(.comp-card) {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--perla-border-dim) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  overflow: hidden;
}
body .ending-soon-section article:not(.comp-card):hover {
  border-color: rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 168, 76, 0.12) !important;
  transform: translateY(-4px);
}

/* Card image fallback grey → dark surface */
body .ending-soon-section article .bg-gray-100 {
  background-color: var(--color-secondary) !important;
}
body .ending-soon-section article .text-gray-300 {
  color: var(--perla-border) !important;
}

/* Status badge (Ending Soon / Last N tickets) — keep semantic colour
   but ensure good contrast on dark */
body .ending-soon-section article .bg-danger {
  background-color: var(--color-danger) !important;
  box-shadow: 0 0 14px rgba(232, 69, 69, 0.45);
}
body .ending-soon-section article .bg-warning {
  background-color: var(--color-warning) !important;
}

/* Glassmorphic price chip — dark variant */
body .ending-soon-section article .bg-surface\/90,
body .ending-soon-section article [class*='bg-surface/90'] {
  background-color: rgba(16, 12, 32, 0.85) !important;
  border-color: var(--perla-border-dim) !important;
}
body .ending-soon-section article .text-primary {
  color: var(--color-primary) !important;
}

/* Card title */
body .ending-soon-section article h3 a {
  color: var(--color-text-primary);
}
body .ending-soon-section article h3 a:hover {
  color: var(--color-primary) !important;
}

/* Progress bar */
body .ending-soon-section article .h-1\.5.bg-gray-100,
body .ending-soon-section article [class*='bg-gray-100'].rounded-full {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
body .ending-soon-section article .bg-primary.rounded-full {
  background: linear-gradient(90deg, var(--color-primary), #e8c96a) !important;
}

/* "Tickets Sold" label */
body .ending-soon-section article .text-text-secondary.uppercase {
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}

/* Countdown text */
body .ending-soon-section article .text-text-secondary svg {
  color: var(--color-warning);
}

/* ENTER button — match mockup .comp-card-enter */
body .ending-soon-section article a.bg-primary\/5,
body .ending-soon-section article a[class*='bg-primary/5'] {
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  color: #0a0a0c !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.3);
  transition: all 0.22s ease;
}
body .ending-soon-section article a.bg-primary\/5:hover,
body .ending-soon-section article a[class*='bg-primary/5']:hover {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  color: #0a0a0c !important;
  box-shadow: 0 6px 26px rgba(201, 168, 76, 0.5) !important;
  transform: translateY(-2px);
}

/* =========================================================================
   6f. EMAIL SIGN-UP (#email-signup)  →  perla-comps-v1.2-dev.html
   ========================================================================= */

body #email-signup.perla-email-signup-section {
  padding-top: clamp(72px, 12vw, 100px);
  padding-bottom: clamp(72px, 12vw, 100px);
  padding-left: 0;
  padding-right: 0;
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-background-dark) 60%,
    var(--color-secondary) 100%
  );
  border-top: 1px solid var(--perla-border-dim);
  border-bottom: 1px solid var(--perla-border-dim);
  position: relative;
  overflow: hidden;
}

body #email-signup.perla-email-signup-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(201, 168, 76, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

body #email-signup.perla-email-signup-section > .max-w-7xl {
  position: relative;
  z-index: 1;
}

body #email-signup .signup-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 60px);
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body #email-signup .signup-column {
  min-width: 0;
}

@media (max-width: 900px) {
  body #email-signup .signup-inner {
    grid-template-columns: 1fr;
  }
}

body #email-signup .signup-column--intro .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #email-signup .signup-heading.section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0 0 32px;
}

body #email-signup .signup-heading.section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #email-signup .signup-benefits {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body #email-signup .signup-benefit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

body #email-signup .signup-benefit-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

body #email-signup .signup-benefit-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #email-signup .signup-benefit-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}

body #email-signup .signup-benefit-text {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
}

body #email-signup .signup-form {
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 22px;
  padding: 36px;
}

body #email-signup .signup-form .form-group {
  margin-bottom: 18px;
}

body #email-signup .signup-form .form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

body #email-signup .signup-form .form-group input[type='email'] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--perla-border-dim);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 13px 18px;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;
}

body #email-signup .signup-form .form-group input[type='email']:focus {
  border-color: var(--color-primary);
}

body #email-signup .signup-form .form-group input[type='email']::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

body #email-signup .signup-form .checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}

body #email-signup .signup-form .checkbox-row input[type='checkbox'] {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  box-sizing: border-box;
}

body #email-signup .signup-form .checkbox-row label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-weight: 300;
}

body #email-signup .signup-form .checkbox-row label a,
body #email-signup .signup-form .checkbox-row label a:visited {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

body #email-signup .signup-form .checkbox-row label a:hover {
  color: inherit;
  text-decoration: none;
}

body #email-signup .perla-email-signup-submit.btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
  color: #0a0a0c;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body #email-signup .perla-email-signup-submit.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(201, 168, 76, 0.45);
  color: #0a0a0c;
}

body #email-signup .signup-reassurance,
body #email-signup .signup-column--form > .signup-reassurance,
body #email-signup .signup-form .signup-reassurance,
body #email-signup .perla-signup-ff-wrap .ff-custom_html .signup-reassurance {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.85;
  text-align: center;
  margin: 18px 0 0;
  padding: 0 8px;
  font-weight: 300;
  line-height: 1.5;
}

body #email-signup .signup-form-message {
  font-size: 0.85rem;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.45;
}

body #email-signup .signup-form-message--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}

body #email-signup .signup-form-message--error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
}

/* ---------- FluentForm #2 (delegated via [fluentform id="2"]) ---------- */

body #email-signup .perla-signup-ff-wrap .fluentform,
body #email-signup .perla-signup-ff-wrap .frm-fluent-form,
body #email-signup .perla-signup-ff-wrap .ff-form-loading {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/*
 * FluentForm outputs Custom HTML before submit; mockup has footnote after the button.
 * Pull footnote out of flow and pin to bottom of the form (below submit) with position.
 */
body #email-signup .perla-signup-ff-wrap form.frm-fluent-form {
  position: relative;
  padding-bottom: 3.75rem;
}

body #email-signup .perla-signup-ff-wrap form.frm-fluent-form .ff_submit_btn_wrapper {
  margin-bottom: 0;
}

body #email-signup .perla-signup-ff-wrap form.frm-fluent-form .ff-custom_html.ff-perla-reassurance-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 8px;
  display: block !important;
  visibility: visible;
  text-align: center;
  pointer-events: auto;
}

body #email-signup .perla-signup-ff-wrap form.frm-fluent-form .ff-custom_html.ff-perla-reassurance-group .signup-reassurance {
  margin: 0;
  font-size: 0.72rem;
  opacity: 0.6;
  font-weight: 300;
}

body #email-signup .perla-signup-ff-wrap .ff-el-group {
  margin-bottom: 16px;
}

/* One .ff-el-group per checkbox field — match mockup .checkbox-row spacing (14px between rows). */
body #email-signup .perla-signup-ff-wrap .ff-el-group:has(.ff-el-form-check) {
  margin-bottom: 14px;
}

body #email-signup .perla-signup-ff-wrap form.frm-fluent-form .ff_submit_btn_wrapper.ff-el-group {
  margin-bottom: 0;
}

body #email-signup .perla-signup-ff-wrap .ff-el-input--label label,
body #email-signup .perla-signup-ff-wrap .ff-el-input--label > label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}

body #email-signup .perla-signup-ff-wrap input[type='email'],
body #email-signup .perla-signup-ff-wrap input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--perla-border-dim);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 13px 18px;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: none;
}

body #email-signup .perla-signup-ff-wrap input[type='email']:focus,
body #email-signup .perla-signup-ff-wrap input[type='text']:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
}

body #email-signup .perla-signup-ff-wrap input[type='email']::placeholder,
body #email-signup .perla-signup-ff-wrap input[type='text']::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

/* Checkbox rows — mirror mockup .checkbox-row (flex, gap 10px, native checkbox + label text) */

body #email-signup .perla-signup-ff-wrap .ff-el-group:has(.ff-el-form-check) .ff-el-input--content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
}

body #email-signup .perla-signup-ff-wrap .ff-el-form-check {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Compact checkbox to match fine consent copy (0.78rem); explicit size avoids oversized OS widgets in flex. */
body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label .ff-el-form-check-input,
body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label input[type='checkbox'] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: 0 0 auto;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  margin: 3px 0 0 !important;
  accent-color: var(--color-primary);
  opacity: 1 !important;
  position: static !important;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 0;
  vertical-align: top;
  align-self: flex-start;
}

body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label span {
  flex: 1;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Privacy link: same colour, weight, and decoration as the rest of the label line. */
body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label span a,
body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label span a:visited {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  text-underline-offset: 0;
}

body #email-signup .perla-signup-ff-wrap label.ff-el-form-check-label span a:hover {
  color: inherit !important;
  text-decoration: none !important;
  opacity: 1;
}

/* Hide the empty top label that FluentForm renders above checkbox groups. */
body #email-signup .perla-signup-ff-wrap .ff-el-group .ff-el-input--label:empty,
body #email-signup .perla-signup-ff-wrap .ff-el-group .ff-el-input--label label:empty {
  display: none;
}

/* ---------- Contact page Fluent Forms: match signup field chrome (.ff-el-input--content inputs) ---------- */

body .nera-contact-page .frm-fluent-form input.ff-el-form-control,
body .nera-contact-page .frm-fluent-form textarea.ff-el-form-control,
body .nera-contact-page .frm-fluent-form select.ff-el-form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--perla-border-dim);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 13px 18px;
  border-radius: 10px;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  box-shadow: none;
}

body .nera-contact-page .frm-fluent-form textarea.ff-el-form-control {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}

body .nera-contact-page .frm-fluent-form input.ff-el-form-control:focus,
body .nera-contact-page .frm-fluent-form textarea.ff-el-form-control:focus,
body .nera-contact-page .frm-fluent-form select.ff-el-form-control:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
}

body .nera-contact-page .frm-fluent-form input.ff-el-form-control::placeholder,
body .nera-contact-page .frm-fluent-form textarea.ff-el-form-control::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

body .nera-contact-page .frm-fluent-form .ff-el-is-error input.ff-el-form-control,
body .nera-contact-page .frm-fluent-form .ff-el-is-error textarea.ff-el-form-control,
body .nera-contact-page .frm-fluent-form .ff-el-is-error select.ff-el-form-control {
  border-color: var(--color-danger-border);
}

/* My Account — WC validation: same error border as Contact .ff-el-is-error fields */
body.woocommerce-account .woocommerce-invalid .woocommerce-Input.input-text,
body.woocommerce-account .woocommerce-invalid .woocommerce-Input--text.input-text {
  border-color: var(--color-danger-border) !important;
}

/* Lost password — Woo notices sit above form; keep gap tight */
body.woocommerce-account.woocommerce-lost-password .woocommerce-notices-wrapper {
  margin-bottom: 0.75rem;
}

/* My Account — payment methods: success / error notice banners */
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper {
  margin-bottom: 1rem;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-message::before,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-message::before,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error::before,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error::before {
  content: none;
  display: none;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-message {
  color: var(--color-success-text, #b8f5c8);
  background: var(--color-success-bg, rgba(34, 197, 94, 0.12));
  border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 35%, transparent);
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error {
  color: var(--color-danger-text, #ffbaba);
  background: var(--color-danger-bg, rgba(255, 59, 53, 0.14));
  border: 1px solid var(--color-danger-border, rgba(255, 59, 53, 0.42));
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error li,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error li {
  margin: 0;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error:focus,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error:focus-visible,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error:focus,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error:focus-visible,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error li:focus,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-error li:focus-visible,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error li:focus,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-error li:focus-visible,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-message:focus,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-notices-wrapper .woocommerce-message:focus-visible,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-message:focus,
body.woocommerce-account.woocommerce-add-payment-method .woocommerce-notices-wrapper .woocommerce-message:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-offset-width: 0 !important;
}

/* Checkout billing fields — same border / fill chrome as Contact .ff-el-form-control */
body.woocommerce-checkout .woocommerce-billing-fields .form-row input[type='text'],
body.woocommerce-checkout .woocommerce-billing-fields .form-row input[type='email'],
body.woocommerce-checkout .woocommerce-billing-fields .form-row input[type='tel'],
body.woocommerce-checkout .woocommerce-billing-fields .form-row input[type='number'],
body.woocommerce-checkout .woocommerce-billing-fields .form-row input[type='password'],
body.woocommerce-checkout .woocommerce-billing-fields .form-row select,
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid var(--perla-border-dim) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body);
  font-size: 0.9rem !important;
  padding: 13px 18px !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row input:focus,
body.woocommerce-checkout .woocommerce-billing-fields .form-row select:focus,
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea:focus {
  border-color: var(--color-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  --tw-ring-width: 0 !important;
  --tw-ring-offset-width: 0 !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row input::placeholder,
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input,
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid select,
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid textarea {
  border-color: var(--color-danger-border) !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-validated input:not(:focus),
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-validated select:not(:focus),
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-validated textarea:not(:focus) {
  border-color: color-mix(in srgb, var(--color-success) 55%, transparent) !important;
}

/* Order notes (#order_comments) — same chrome as Contact message textarea (.ff-el-form-control), not billing grid */
body.woocommerce-checkout textarea#order_comments,
body.woocommerce-checkout textarea[name='order_comments'] {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  height: auto !important;
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid var(--perla-border-dim) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body);
  font-size: 0.9rem !important;
  padding: 13px 18px !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease !important;
}

body.woocommerce-checkout textarea#order_comments:focus,
body.woocommerce-checkout textarea[name='order_comments']:focus {
  border-color: var(--color-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  --tw-ring-width: 0 !important;
  --tw-ring-offset-width: 0 !important;
  box-shadow: none !important;
}

body.woocommerce-checkout textarea#order_comments::placeholder,
body.woocommerce-checkout textarea[name='order_comments']::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.85;
}

body.woocommerce-checkout .form-row.woocommerce-invalid textarea#order_comments,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea[name='order_comments'] {
  border-color: var(--color-danger-border) !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .select2-container .select2-selection--single {
  height: auto !important;
  min-height: calc(13px + 13px + 1.5em) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid var(--perla-border-dim) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 13px 18px !important;
  line-height: 1.5 !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .select2-container.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .woocommerce-billing-fields .select2-container.select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid .select2-container .select2-selection--single {
  border-color: var(--color-danger-border) !important;
}

/* WooCommerce core `forms.scss`: feather chevron is `data:image/svg+xml;base64,...` with stroke=black on native `select` AND on Select2 `.select2-selection__arrow b` (border:none + background). Override with white stroke SVG. */
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-cart .woocommerce form .form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b,
body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-cart .select2-container .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  border: none !important;
}

body .nera-contact-page .frm-fluent-form .choices__inner {
  box-sizing: border-box;
  min-height: auto;
  padding: 10px 15px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--perla-border-dim) !important;
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

body .nera-contact-page .frm-fluent-form .ff-el-is-error .choices__inner {
  border-color: var(--color-danger-border) !important;
}

body .nera-contact-page .frm-fluent-form .choices.is-focused .choices__inner {
  border-color: var(--color-primary) !important;
  background: rgba(255, 255, 255, 0.06);
}

/* Submit — mockup .btn uses --radius-pill (999px); match pill shape + gradient. */

body #email-signup .perla-signup-ff-wrap .ff_submit_btn_wrapper .ff-btn-submit.ff_btn_no_style,
body #email-signup .perla-signup-ff-wrap .ff-btn-submit,
body #email-signup .perla-signup-ff-wrap .ff-el-group.ff-text-center .ff-btn,
body #email-signup .perla-signup-ff-wrap button[type='submit'].ff-btn-submit {
  width: 100% !important;
  max-width: 100%;
  justify-content: center;
  margin-top: 6px;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
  background-color: transparent !important;
  color: #0a0a0c !important;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Envelope icon prepended to the submit button to match the mockup. */
body #email-signup .perla-signup-ff-wrap .ff_submit_btn_wrapper .ff-btn-submit.ff_btn_no_style::before,
body #email-signup .perla-signup-ff-wrap .ff-btn-submit::before,
body #email-signup .perla-signup-ff-wrap .ff-el-group.ff-text-center .ff-btn::before,
body #email-signup .perla-signup-ff-wrap button[type='submit']::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23080510' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}

body #email-signup .perla-signup-ff-wrap .ff_submit_btn_wrapper .ff-btn-submit.ff_btn_no_style:hover,
body #email-signup .perla-signup-ff-wrap .ff-btn-submit:hover,
body #email-signup .perla-signup-ff-wrap button[type='submit'].ff-btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(201, 168, 76, 0.48) !important;
  filter: brightness(1.05);
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%) !important;
}

/* Error + success messages inside the FF container. */

body #email-signup .perla-signup-ff-wrap .ff-el-is-error .text-danger,
body #email-signup .perla-signup-ff-wrap .error-text {
  font-size: 0.75rem;
  color: var(--color-danger-text);
  margin-top: 6px;
}

body #email-signup .perla-signup-ff-wrap .ff-message-success,
body #email-signup .perla-signup-ff-wrap .ff_submit_btn_active + .ff-message-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* =========================================================================
   7. FAQ  →  mockup #faq
   parent: <section class="faq-section py-20 bg-surface">
   mockup: max-w 800px, surface cards (each FAQ in its own pill),
           gold-glow chevron circle that rotates on open, gold hover text.
   ========================================================================= */

body .faq-section {
  padding-top: 100px;
  padding-bottom: 100px;
  background: transparent !important;
}

body .faq-section .faq-header {
  margin-bottom: 56px !important;
}

/* Constrain inner column to 800px (parent uses max-w-7xl > max-w-4xl) */
body .faq-section > .max-w-7xl > .max-w-4xl {
  max-width: 800px !important;
}

/* Header */
body .faq-section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.02em;
}

/* Each FAQ item: flip from hairline divider to full surface card */
body .faq-section .faq-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--perla-border-dim) !important;
  border-bottom: 1px solid var(--perla-border-dim) !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.22s ease;
}
body .faq-section .faq-item:hover {
  border-color: var(--perla-border) !important;
}

body .faq-section .faq-item.perla-faq-item--open {
  border-color: var(--perla-border) !important;
}

/* Question button */
body .faq-section .faq-item__question {
  padding: 20px 24px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  transition: color 0.22s ease;
}
body .faq-section .faq-item__question:hover,
body .faq-section .faq-item__question:hover span {
  color: var(--color-primary) !important;
}

/* Chevron — gold-glow circle */
body .faq-section .faq-item__icon {
  width: 28px;
  height: 28px;
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-left: 16px;
  transition: transform 0.22s ease, background 0.22s ease;
}
body .faq-section .faq-item__icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Answer body (template uses .faq-answer-inner for HTML answers; keep p for legacy) */
body .faq-section .faq-item__answer .faq-answer-inner,
body .faq-section .faq-item__answer p {
  margin: 0;
  padding: 0 24px 20px !important;
  font-size: 0.86rem !important;
  font-weight: 300 !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.75;
}

body .faq-section .faq-item__answer .faq-answer-inner a {
  color: var(--color-primary) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

body .faq-section .faq-item__answer .faq-answer-inner a:hover {
  opacity: 0.92;
}

/* "Still have questions?" support row */
body .faq-section .text-center.mt-12 p {
  font-size: 0.87rem;
  color: var(--color-text-secondary);
}
body .faq-section .text-center.mt-12 a {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* =========================================================================
   8. SITE FOOTER  →  mockup #footer (perla-comps-v1.2-dev.html)
   ========================================================================= */

body #site-footer.perla-mockup-footer {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--perla-border-dim) !important;
  padding: clamp(48px, 8vw, 72px) clamp(16px, 5vw, 40px) 0;
  box-shadow: none;
}

/* Brand + image logo */
body #site-footer.perla-mockup-footer .footer-brand .nav-logo {
  font-family: var(--font-heading);
  text-decoration: none !important;
  display: inline-flex;
  margin-bottom: 12px;
  transition: opacity 0.22s ease;
  color: inherit;
}
body #site-footer.perla-mockup-footer .footer-brand .nav-logo img.perla-site-logo {
  display: block;
  max-height: 60px;
  width: auto;
  height: auto;
}
body #site-footer.perla-mockup-footer .footer-brand .nav-logo:hover,
body #site-footer.perla-mockup-footer .footer-brand .nav-logo:focus,
body #site-footer.perla-mockup-footer .footer-brand .nav-logo:focus-visible {
  text-decoration: none !important;
  opacity: 0.92;
}

body #site-footer.perla-mockup-footer .footer-brand > p {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
  font-weight: 300;
}

body #site-footer.perla-mockup-footer .footer-brand-reg {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.55;
  font-weight: 300;
  margin-bottom: 0;
}

/* Grid */
body #site-footer.perla-mockup-footer .footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--perla-border-dim);
}

@media (min-width: 768px) and (max-width: 1023px) {
  body #site-footer.perla-mockup-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  body #site-footer.perla-mockup-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  body #site-footer.perla-mockup-footer .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
  }
  body #site-footer.perla-mockup-footer .footer-brand {
    grid-column: auto;
  }
}

/* Social row — circle chips + hover (mockup --transition) */
body #site-footer.perla-mockup-footer .footer-social-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

body #site-footer.perla-mockup-footer .footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--perla-border-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
  color: var(--color-text-secondary);
  text-decoration: none !important;
  box-sizing: border-box;
}

body #site-footer.perla-mockup-footer a.footer-social-icon:hover,
body #site-footer.perla-mockup-footer span.footer-social-icon:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

body #site-footer.perla-mockup-footer .footer-social-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body #site-footer.perla-mockup-footer .footer-social-icon--facebook svg {
  fill: currentColor;
  stroke: none;
}

body #site-footer.perla-mockup-footer .footer-social-icon--outline svg,
body #site-footer.perla-mockup-footer .footer-social-icon--outline svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Columns */
body #site-footer.perla-mockup-footer .footer-col h5 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 18px;
}

body #site-footer.perla-mockup-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body #site-footer.perla-mockup-footer .footer-col ul li a {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  font-weight: 300;
  text-decoration: none;
  transition: color 0.22s ease;
}

body #site-footer.perla-mockup-footer .footer-col ul li a:hover {
  color: var(--color-primary);
}

/* Contact */
body #site-footer.perla-mockup-footer .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  font-weight: 300;
}

body #site-footer.perla-mockup-footer .footer-contact-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

body #site-footer.perla-mockup-footer .footer-contact-item svg path,
body #site-footer.perla-mockup-footer .footer-contact-item svg polyline {
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #site-footer.perla-mockup-footer .footer-contact-item a {
  color: var(--color-primary);
  font-weight: 300;
  text-decoration: none;
  transition: opacity 0.22s ease;
}

body #site-footer.perla-mockup-footer .footer-contact-item a:hover {
  opacity: 0.85;
}

body #site-footer.perla-mockup-footer .footer-contact-item--address {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 0.8rem;
  margin-top: 8px;
  margin-bottom: 0;
}

body #site-footer.perla-mockup-footer .footer-contact-item--address span {
  display: block;
}

/* Compliance strip */
body #site-footer.perla-mockup-footer .footer-compliance {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0 18px;
  font-size: 0.71rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  line-height: 1.8;
  text-align: center;
  font-weight: 300;
}

/* Copyright signature plate — gilded hairline beneath compliance strip.
   Uses a gold-fade rule above and a small medallion treatment around {year}. */
body #site-footer.perla-mockup-footer .footer-copyright {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 36px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
  line-height: 1.9;
}

body #site-footer.perla-mockup-footer .footer-copyright::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, 28%, 320px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 50%,
    transparent 100%
  );
}

body #site-footer.perla-mockup-footer .footer-copyright::after {
  content: '\2756'; /* ❖ four-diamond ornament */
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  font-size: 0.7rem;
  line-height: 16px;
  text-align: center;
  color: var(--color-primary);
  background: var(--color-surface, #1c1538);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 70%, transparent);
  pointer-events: none;
}

/* WYSIWYG nested elements — flatten paragraph margins so the field renders as
   a single signature line regardless of whether the editor wrapped it in <p>. */
body #site-footer.perla-mockup-footer .footer-copyright p {
  margin: 0;
  display: inline;
}

/* Number-glyph treatment: the parent template wraps the {year} replacement
   inline. Apply a gold tint to any 4-digit year-shaped span/strong inside. */
body #site-footer.perla-mockup-footer .footer-copyright strong,
body #site-footer.perla-mockup-footer .footer-copyright b {
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

body #site-footer.perla-mockup-footer .footer-copyright a {
  color: color-mix(in srgb, var(--color-primary) 85%, white 15%);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

body #site-footer.perla-mockup-footer .footer-copyright a:hover,
body #site-footer.perla-mockup-footer .footer-copyright a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

@media (max-width: 640px) {
  body #site-footer.perla-mockup-footer .footer-copyright {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    padding: 20px 20px 32px;
  }
}

/* Scroll-to-top button — gold variant */
body #site-footer.perla-mockup-footer #nera-scroll-top {
  background-color: var(--color-primary) !important;
  color: #0a0a0c !important;
  border-color: rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38) !important;
}
body #site-footer.perla-mockup-footer #nera-scroll-top:hover {
  background-color: #e8c96a !important;
}

/* Hide wpadminbar as soon as the page is scrolled. */
body.admin-bar #wpadminbar {
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body.admin-bar.perla-scrolled #wpadminbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   12. COMPETITIONS CARD (mockup #competitions / #ending-soon)
   Direct port of perla-comps-v1.2-dev.html .comp-card markup. The child
   templates render this markup verbatim (no parent Tailwind overlay), so
   these rules don't need !important to beat parent utilities.
   ========================================================================= */

body #categories-competitions .comp-card,
body #ending-soon .comp-card,
body .ncs-product-card.comp-card {
  background: var(--color-surface);
  border: 1px solid var(--perla-border-dim);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
}

body #categories-competitions .comp-card::before,
body #ending-soon .comp-card::before,
body .ncs-product-card.comp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

body #categories-competitions .comp-card:hover,
body #ending-soon .comp-card:hover,
body .ncs-product-card.comp-card:hover {
  border-color: rgba(201, 168, 76, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 168, 76, 0.12);
}

body #categories-competitions .comp-card:hover::before,
body #ending-soon .comp-card:hover::before,
body .ncs-product-card.comp-card:hover::before {
  opacity: 1;
}

body #categories-competitions .comp-card > *,
body #ending-soon .comp-card > *,
body .ncs-product-card.comp-card > * {
  position: relative;
  z-index: 2;
}

body #categories-competitions .comp-card-img,
body #ending-soon .comp-card-img,
body .ncs-product-card.comp-card .comp-card-img {
  position: relative;
  overflow: hidden;
  height: 210px;
  background: var(--color-surface);
}

body #ending-soon .comp-card.comp-card--compact .comp-card-img,
body .ncs-product-card.comp-card.comp-card--compact .comp-card-img {
  height: 160px;
}

body #categories-competitions .comp-card-img .comp-card-img-link,
body #ending-soon .comp-card-img .comp-card-img-link,
body .ncs-product-card.comp-card .comp-card-img .comp-card-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

body #categories-competitions .comp-card-img img,
body #ending-soon .comp-card-img img,
body .ncs-product-card.comp-card .comp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

body #categories-competitions .comp-card:hover .comp-card-img img,
body #ending-soon .comp-card:hover .comp-card-img img,
body .ncs-product-card.comp-card:hover .comp-card-img img {
  transform: scale(1.06);
}

body #categories-competitions .comp-card-img-placeholder,
body #ending-soon .comp-card-img-placeholder,
body .ncs-product-card.comp-card .comp-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--perla-border);
  background: linear-gradient(135deg, var(--color-secondary), var(--color-surface));
}

body #categories-competitions .comp-card-img-placeholder svg,
body #ending-soon .comp-card-img-placeholder svg,
body .ncs-product-card.comp-card .comp-card-img-placeholder svg {
  width: 56px;
  height: 56px;
}

body #categories-competitions .comp-card-img::after,
body #ending-soon .comp-card-img::after,
body .ncs-product-card.comp-card .comp-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(16, 12, 32, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

body #categories-competitions .comp-card .badge-status,
body #ending-soon .comp-card .badge-status,
body .ncs-product-card.comp-card .badge-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-danger);
  box-shadow: 0 0 14px rgba(232, 69, 69, 0.5);
  animation: perla-comp-card-badge-pulse 2.5s ease-in-out infinite;
  z-index: 3;
}

body #categories-competitions .comp-card .badge-status.is-urgent,
body #ending-soon .comp-card .badge-status.is-urgent,
body .ncs-product-card.comp-card .badge-status.is-urgent {
  background: var(--color-danger);
}

body #categories-competitions .comp-card .badge-status.is-soldout,
body #ending-soon .comp-card .badge-status.is-soldout,
body .ncs-product-card.comp-card .badge-status.is-soldout {
  background: var(--color-text-secondary);
  color: #080510;
  animation: none;
  box-shadow: none;
}

@keyframes perla-comp-card-badge-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(232, 69, 69, 0.5); }
  50%      { box-shadow: 0 0 22px rgba(232, 69, 69, 0.8); }
}

body #categories-competitions .comp-card .badge-cat,
body #ending-soon .comp-card .badge-cat,
body .ncs-product-card.comp-card .badge-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 12, 32, 0.85);
  color: var(--color-text-secondary);
  border: 1px solid var(--perla-border-dim);
  backdrop-filter: blur(6px);
  z-index: 3;
}

body #categories-competitions .comp-card .card-bonus-banner {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05));
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
}

body #categories-competitions .comp-card .card-bonus-banner svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

body #categories-competitions .comp-card .comp-card-body,
body #ending-soon .comp-card .comp-card-body,
body .ncs-product-card.comp-card .comp-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
}

body #categories-competitions .comp-card .comp-card-title,
body #ending-soon .comp-card .comp-card-title,
body .ncs-product-card.comp-card .comp-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0 0 12px;
  font-family: var(--font-heading, var(--font-body));
}

body #categories-competitions .comp-card .comp-card-title a,
body #ending-soon .comp-card .comp-card-title a,
body .ncs-product-card.comp-card .comp-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.22s ease;
}

body #categories-competitions .comp-card .comp-card-title a:hover,
body #ending-soon .comp-card .comp-card-title a:hover,
body .ncs-product-card.comp-card .comp-card-title a:hover {
  color: var(--color-primary);
}

body #categories-competitions .comp-card .card-prize-tag,
body #ending-soon .comp-card .card-prize-tag,
body .ncs-product-card.comp-card .card-prize-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

body #categories-competitions .comp-card .card-prize-tag span,
body #ending-soon .comp-card .card-prize-tag span,
body .ncs-product-card.comp-card .card-prize-tag span {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

body #categories-competitions .comp-card .card-countdown,
body .ncs-product-card.comp-card .card-countdown {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

body #categories-competitions .comp-card .countdown-label,
body .ncs-product-card.comp-card .countdown-label {
  font-size: 0.67rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-right: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

body #categories-competitions .comp-card .countdown-label svg,
body .ncs-product-card.comp-card .countdown-label svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-warning);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #categories-competitions .comp-card .countdown-unit,
body .ncs-product-card.comp-card .countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--perla-border-dim);
  border-radius: 5px;
  padding: 4px 7px;
  min-width: 34px;
}

body #categories-competitions .comp-card .countdown-num,
body .ncs-product-card.comp-card .countdown-num {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body #categories-competitions .comp-card .countdown-sub,
body .ncs-product-card.comp-card .countdown-sub {
  font-size: 0.55rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

body #categories-competitions .comp-card .card-urgency,
body #ending-soon .comp-card .card-urgency,
body .ncs-product-card.comp-card .card-urgency {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

body #categories-competitions .comp-card .card-tickets-left,
body #ending-soon .comp-card .card-tickets-left,
body .ncs-product-card.comp-card .card-tickets-left {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: 4px;
}

body #categories-competitions .comp-card .card-tickets-left svg,
body #ending-soon .comp-card .card-tickets-left svg,
body .ncs-product-card.comp-card .card-tickets-left svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #categories-competitions .comp-card .card-entry-price,
body #ending-soon .comp-card .card-entry-price,
body .ncs-product-card.comp-card .card-entry-price {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

body :is(#categories-competitions .comp-card .card-entry-price .woocommerce-Price-amount, #ending-soon .comp-card .card-entry-price .woocommerce-Price-amount, .ncs-product-card.comp-card .card-entry-price .woocommerce-Price-amount),
body #categories-competitions .comp-card .card-entry-price bdi,
body #ending-soon .comp-card .card-entry-price bdi,
body .ncs-product-card.comp-card .card-entry-price bdi {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

body #categories-competitions .comp-card .progress-wrap,
body #ending-soon .comp-card .progress-wrap,
body .ncs-product-card.comp-card .progress-wrap {
  margin-bottom: 16px;
}

body #categories-competitions .comp-card .progress-label,
body #ending-soon .comp-card .progress-label,
body .ncs-product-card.comp-card .progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

body #categories-competitions .comp-card .progress-label .pct,
body #ending-soon .comp-card .progress-label .pct,
body .ncs-product-card.comp-card .progress-label .pct {
  color: var(--color-primary);
  font-weight: 700;
}

body #categories-competitions .comp-card .progress-bar,
body #ending-soon .comp-card .progress-bar,
body .ncs-product-card.comp-card .progress-bar {
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}

body #categories-competitions .comp-card .progress-fill,
body #ending-soon .comp-card .progress-fill,
body .ncs-product-card.comp-card .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #e8c96a);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  transition: width 0.5s ease;
}

body #categories-competitions .comp-card .progress-fill--urgent,
body #ending-soon .comp-card .progress-fill--urgent,
body .ncs-product-card.comp-card .progress-fill--urgent {
  background: linear-gradient(90deg, var(--color-danger), #ff8c6b);
}

body :is(#categories-competitions .comp-card .progress-fill--full, #ending-soon .comp-card .progress-fill--full, .ncs-product-card.comp-card .progress-fill--full),
body .ncs-product-card .progress-fill--full,
body .perla-ticket-purchase .progress-fill--full,
body .ncs-closed-prize-card .progress-fill--full {
  background: linear-gradient(90deg, #e84545, #ff8c6b);
}

body #categories-competitions .comp-card .progress-fill::after,
body #ending-soon .comp-card .progress-fill::after,
body .ncs-product-card.comp-card .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: perla-comp-card-shimmer 2.2s infinite;
}

@keyframes perla-comp-card-shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}

body #categories-competitions .comp-card .card-skill-note,
body .ncs-product-card.comp-card .card-skill-note {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  font-weight: 300;
}

body #categories-competitions .comp-card .comp-card-enter,
body #ending-soon .comp-card .comp-card-enter,
body .ncs-product-card.comp-card .comp-card-enter,
body .ncs-product-card.comp-card button.comp-card-enter,
body main.nera-closed-prizes-page .ncs-closed-prize-card .comp-card-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 13px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
}

body #categories-competitions .comp-card .comp-card-enter::after,
body #ending-soon .comp-card .comp-card-enter::after,
body .ncs-product-card.comp-card .comp-card-enter::after,
body .ncs-product-card.comp-card button.comp-card-enter::after,
body main.nera-closed-prizes-page .ncs-closed-prize-card .comp-card-enter::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

body #categories-competitions .comp-card .comp-card-enter:hover,
body #ending-soon .comp-card .comp-card-enter:hover,
body .ncs-product-card.comp-card .comp-card-enter:hover,
body .ncs-product-card.comp-card button.comp-card-enter:hover,
body main.nera-closed-prizes-page .ncs-closed-prize-card .comp-card-enter:hover {
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
}

body #categories-competitions .comp-card .comp-card-enter:hover::after,
body #ending-soon .comp-card .comp-card-enter:hover::after,
body .ncs-product-card.comp-card .comp-card-enter:hover::after,
body .ncs-product-card.comp-card button.comp-card-enter:hover::after,
body main.nera-closed-prizes-page .ncs-closed-prize-card .comp-card-enter:hover::after {
  opacity: 1;
}

body #categories-competitions .comp-card .card-free-note {
  font-size: 0.67rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body #categories-competitions .comp-card .card-free-note svg {
  width: 11px;
  height: 11px;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #categories-competitions .comp-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--perla-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
}

body #categories-competitions .comp-empty-state .comp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--perla-primary-glow);
  color: var(--color-primary);
  margin-bottom: 20px;
}

body #categories-competitions .comp-empty-state h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

body #categories-competitions .comp-empty-state p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: 300;
}

/* =========================================================================
   13. POSTAL CALLOUT + VIEW ALL CTA  (mockup #competitions footer)
   ========================================================================= */

body #categories-competitions .comp-postal-callout {
  max-width: 1200px;
  margin: 36px auto 0;
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid var(--perla-border);
  border-radius: 14px;
  padding: 22px 28px;
  font-size: 0.83rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-weight: 300;
}

body #categories-competitions .comp-postal-callout strong {
  color: var(--color-primary);
  font-weight: 600;
}

body #categories-competitions .comp-postal-callout a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
}

body #categories-competitions .comp-view-all,
body .related-competitions .comp-view-all {
  text-align: center;
  margin-top: 44px;
}

body #categories-competitions .comp-view-all-btn,
body .related-competitions .comp-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0a0a0c !important;
  padding: 14px 30px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.22s ease;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.38);
  background: linear-gradient(135deg, #d4b055 0%, #a8883a 100%);
}

body #categories-competitions .comp-view-all-btn:hover,
body .related-competitions .comp-view-all-btn:hover {
  transform: translateY(-2px);
  color: #0a0a0c !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.55);
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%);
}

/* Override Tailwind / parent utility colors on gold-gradient CTAs (text must stay ink-dark) */
body #categories-competitions .comp-view-all-btn,
body #categories-competitions .comp-view-all-btn span,
body #categories-competitions .comp-view-all-btn svg,
body .related-competitions .comp-view-all-btn,
body .related-competitions .comp-view-all-btn span,
body .related-competitions .comp-view-all-btn svg {
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
  stroke: currentColor !important;
}

body #categories-competitions article.comp-card a.comp-card-enter,
body #ending-soon article.comp-card a.comp-card-enter,
body .ncs-product-cardarticle.comp-card a.comp-card-enter,
body main.nera-closed-prizes-page article.ncs-closed-prize-card a.comp-card-enter {
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}

/* =========================================================================
   14. ENDING SOON STRIP  (mockup #ending-soon)
   Horizontal scrolling rail of compact competition cards.
   ========================================================================= */

body #ending-soon.ending-soon-mockup {
  padding-top: clamp(72px, 12vw, 100px);
  padding-bottom: clamp(72px, 12vw, 100px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(28, 21, 56, 0.4) 50%,
    transparent 100%
  ) !important;
}

/* Mockup #ending-soon .ending-header — no text-align:center (left-aligned like HTML reference) */
body #ending-soon.ending-soon-mockup .ending-header {
  max-width: 1200px;
  margin: 0 auto 36px;
  text-align: left;
}

body #ending-soon.ending-soon-mockup .ending-header .section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--perla-primary-glow);
  border: 1px solid var(--perla-border);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

body #ending-soon.ending-soon-mockup .ending-header .section-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin: 0 0 0.5rem;
}

body #ending-soon.ending-soon-mockup .ending-header .section-heading em {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 800;
}

body #ending-soon.ending-soon-mockup .ending-header .section-subtext {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 42rem;
  margin: 12px 0 0;
  font-weight: 300;
  line-height: 1.6;
}

/* Ending Soon now renders as a full 4-column grid (no horizontal scroll).
   All 4 cards display in their entirety on desktop; 2 cols on tablet,
   1 col on small phones. */
body #ending-soon.ending-soon-mockup .ending-scroll-wrap {
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
}

body #ending-soon.ending-soon-mockup .ending-scroll {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-width: 0;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 640px) {
  body #ending-soon.ending-soon-mockup .ending-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body #ending-soon.ending-soon-mockup .ending-scroll {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body #ending-soon.ending-soon-mockup .ending-scroll .comp-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  height: 100%;
}

/* Single product — related competitions (Tailwind .grid): same grid-item lock as .ending-scroll
   so nested flex .comp-card columns do not collapse to a narrow sliver. */
body .related-competitions {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body .related-competitions > .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  min-width: 0;
  width: 100%;
  justify-items: stretch;
  align-items: stretch;
}

@media (min-width: 640px) {
  body .related-competitions > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body .related-competitions > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body .related-competitions > .grid > article.ncs-product-card.comp-card {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

body .related-competitions > .grid > article.ncs-product-card.comp-card .comp-card-img,
body .related-competitions > .grid > article.ncs-product-card.comp-card .comp-card-body {
  min-width: 0;
}

/* Closed Prizes template — same grid shell as #ending-soon .ending-scroll (results cards) */
body main.nera-closed-prizes-page .closed-prizes-strip.ending-soon-mockup .ending-scroll-wrap {
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
}

body main.nera-closed-prizes-page .closed-prizes-strip.ending-soon-mockup .ending-scroll {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-width: 0;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 640px) {
  body main.nera-closed-prizes-page .closed-prizes-strip.ending-soon-mockup .ending-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body main.nera-closed-prizes-page .closed-prizes-strip.ending-soon-mockup .ending-scroll {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body main.nera-closed-prizes-page .closed-prizes-strip.ending-soon-mockup .ending-scroll .ncs-closed-prize-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

body #ending-soon.ending-soon-mockup .reveal,
body #ending-soon.ending-soon-mockup .ending-scroll .comp-card.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

body #ending-soon.ending-soon-mockup .reveal.visible,
body #ending-soon.ending-soon-mockup .ending-scroll .comp-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body #ending-soon.ending-soon-mockup .reveal,
  body #ending-soon.ending-soon-mockup .ending-scroll .comp-card.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body #categories-competitions .comp-card .progress-fill::after,
  body #ending-soon .comp-card .progress-fill::after,
  body #categories-competitions .comp-card .badge-status,
  body #ending-soon .comp-card .badge-status {
    animation: none;
  }
}

/* =========================================================================
   15. COMP-CARD CASCADE FIXES
   The parent (legacy) selector `body #categories-competitions article > div`
   sets a `border + border-radius + ::before overlay` on every direct child
   div of an article — that was written for the parent's wrapper-div card,
   but our new `.comp-card` puts `.comp-card-img / .card-bonus-banner /
   .comp-card-body` directly inside <article>, so the legacy rule was
   triple-bordering every section of the card and applying a 22px radius
   that broke the layout. Neutralise those rules for the new structure.

   Also lock the grid item sizing — flex grid items can collapse to
   `min-content` when nested inside a `display: flex` `.comp-card`, which is
   what made the live cards render as a single ~30px sliver in the screenshot.
   ========================================================================= */

body #categories-competitions article.comp-card > div:not(.card-bonus-banner),
body #ending-soon article.comp-card > div:not(.card-bonus-banner),
body .ncs-product-cardarticle.comp-card > div:not(.card-bonus-banner),
body article.ncs-product-card.comp-card > div:not(.card-bonus-banner) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  transition: none;
}

body #categories-competitions article.comp-card > .comp-card-img,
body #ending-soon article.comp-card > .comp-card-img,
body .ncs-product-cardarticle.comp-card > .comp-card-img,
body article.ncs-product-card.comp-card > div:first-child {
  overflow: hidden;
}

body #categories-competitions article.comp-card > div:not(.card-bonus-banner)::before,
body #categories-competitions article.comp-card:hover > div:not(.card-bonus-banner)::before,
body #ending-soon article.comp-card > div:not(.card-bonus-banner)::before,
body #ending-soon article.comp-card:hover > div:not(.card-bonus-banner)::before,
body article.ncs-product-card.comp-card > div:not(.card-bonus-banner)::before,
body article.ncs-product-card.comp-card:hover > div:not(.card-bonus-banner)::before {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Re-apply mockup .card-bonus-banner styles at higher specificity so they
   beat both cascade fixes above and any leftover parent card utilities.
   Mirrors perla-comps-v1.2-dev.html lines 615-623 verbatim. */
body #categories-competitions article.comp-card > .card-bonus-banner,
body #ending-soon article.comp-card > .card-bonus-banner,
body .ncs-product-cardarticle.comp-card > .card-bonus-banner {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: none !important;
  overflow: visible;
}

body #categories-competitions article.comp-card > .card-bonus-banner svg,
body #ending-soon article.comp-card > .card-bonus-banner svg,
body .ncs-product-cardarticle.comp-card > .card-bonus-banner svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

body #categories-competitions article.comp-card:hover > div,
body article.ncs-product-card.comp-card:hover > div {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

body #categories-competitions .comp-grid > .comp-card,
body #categories-competitions .comp-grid__cell > .comp-card {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
}

body #categories-competitions .comp-card {
  min-width: 0;
}

body #categories-competitions .comp-card .comp-card-img,
body #categories-competitions .comp-card .comp-card-body {
  min-width: 0;
}

body #ending-soon.ending-soon-mockup .ending-scroll > .comp-card {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

body #categories-competitions article.comp-card,
body #ending-soon article.comp-card,
body .ncs-product-cardarticle.comp-card,
body article.ncs-product-card.comp-card {
  opacity: 1;
}

/* =========================================================================
   Single product — .perla-ticket-purchase: black text on gold (countdown, +5, Enter Now)
   ========================================================================= */

body .perla-ticket-purchase .lty-lottery-timer-content,
body .perla-ticket-purchase button.lty-participate-now-button,
body .perla-ticket-purchase button.lty-participate-now-button .material-symbols-outlined,
body .perla-ticket-purchase button[data-quantity-add].bg-primary {
  color: #0a0a0c !important;
  -webkit-text-fill-color: #0a0a0c !important;
}

/* =========================================================================
   Order thank you / order-received — trust-bar border tokens, cart row chrome
   ========================================================================= */

/* Card / strip borders — same dim borders as #trust-bar (perla-border-dim) */
body.woocommerce-order-received.woocommerce-page .border-gray-100,
body.woocommerce-order-received.woocommerce-page .border-gray-200 {
  border-color: var(--perla-border-dim) !important;
}

body.woocommerce-order-received.woocommerce-page .bg-gray-50.border-b.border-gray-200 {
  border-bottom-color: var(--perla-border-dim) !important;
  border-top: 1px solid var(--perla-border-dim);
}

/* Same rail + panel treatment as #trust-bar (.tb-icon uses --perla-border; section uses --perla-border-dim) */
body.woocommerce-order-received.woocommerce-page .border-success-border,
body.woocommerce-order-received.woocommerce-page
  .w-full.mb-8.p-6.rounded-2xl.border.shadow-sm[class*='border-primary/20'][class*='bg-secondary/80'] {
  border-color: var(--perla-border-dim) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-top-color: var(--perla-border-dim) !important;
  border-bottom-color: var(--perla-border-dim) !important;
  background: rgba(28, 21, 56, 0.85) !important;
  box-shadow: none !important;
}

/* Theme primary (gold) — all price amounts + order totals rows */
body.woocommerce-order-received.woocommerce-page .woocommerce-order .woocommerce-Price-amount,
body.woocommerce-order-received.woocommerce-page .woocommerce-order .woocommerce-Price-amount bdi {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}

body.woocommerce-order-received.woocommerce-page .woocommerce-order-details .border-t.border-gray-200 .flex.justify-between.items-center {
  color: var(--color-primary) !important;
}

body.woocommerce-order-received.woocommerce-page .woocommerce-order-details .border-t.border-gray-200 .flex.justify-between.items-center .woocommerce-Price-amount {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}

/* White copy — notices, section title, summary stat cards */
body.woocommerce-order-received.woocommerce-page .woocommerce-notice,
body.woocommerce-order-received.woocommerce-page .woocommerce-notice--success,
body.woocommerce-order-received.woocommerce-page .woocommerce-order-details__title,
body.woocommerce-order-received.woocommerce-page .woocommerce-order-details__title .material-symbols-outlined {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.woocommerce-order-received.woocommerce-page .woocommerce-order .grid .text-gray-900,
body.woocommerce-order-received.woocommerce-page .woocommerce-order .grid .text-gray-500 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Cart — match order line item panel (woocommerce-table__line-item uses bg-gray-50 + rounded-xl + p-4) */
body.woocommerce-cart .ncs-cart-item {
  background-color: var(--color-gray-50) !important;
  border-radius: 0.75rem;
  padding: 1rem;
  box-sizing: border-box;
}

/* Empty cart CTA — gold button needs dark ink (body a { color: primary } hides label on gold bg) */
body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta,
body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta .material-symbols-outlined,
body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta span {
  color: #0e0b06 !important;
  -webkit-text-fill-color: #0e0b06 !important;
}

body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta:hover,
body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta:hover .material-symbols-outlined,
body.woocommerce-cart .nera-cart-empty-state a.perla-cart-empty-cta:hover span {
  color: #0e0b06 !important;
  -webkit-text-fill-color: #0e0b06 !important;
}

/* =========================================================================
   Instant Wins — StatsBar (child Vue): legacy gray utilities → readable on dark card
   ========================================================================= */

body .instant-wins-stats-bar-card .text-gray-900 {
  color: #fff !important;
}

body .instant-wins-stats-bar-card .text-gray-600 {
  color: rgba(255, 255, 255, 0.75) !important;
}

body .instant-wins-stats-bar-card .border-gray-200,
body .instant-wins-stats-bar-card .border-t.border-gray-200 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body .instant-wins-stats-bar-card .bg-gray-100 {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* =========================================================================
   My Account — edit address / edit account: match checkout billing fields
   (see nera-competitions-standard frontend/src/main.css .woocommerce-checkout
   .form-row rules). Forms use .perla-account-fields--checkout-match; wallet
   top-up mirrors the same rules via .perla-wallet-fields--checkout-match.
   ========================================================================= */

/* Edit-address form — no outer frame; gold border on inner card (form-edit-address.php first div). */
body.woocommerce-account form.woocommerce-EditAddressForm.perla-account-fields--checkout-match {
  border: none !important;
  border-radius: 1rem;
  padding: 0 !important;
  box-sizing: border-box;
}

body.woocommerce-account form.woocommerce-EditAddressForm.perla-account-fields--checkout-match > div:first-child {
  border: 1px solid var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-sizing: border-box;
}

/* Wallet top-up wrapper — same gold frame (border / radius / padding). */
body.woocommerce-account .nera-wallet-dashboard .woo-wallet-form-wrapper {
  border: 1px solid var(--color-primary);
  border-radius: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  box-sizing: border-box;
}

/* Logged-in: beat woo-wallet / Tailwind utilities on wallet wrapper (same values as edit-address). */
body.woocommerce-account.logged-in .nera-wallet-dashboard .woo-wallet-form-wrapper {
  border: 1px solid var(--color-primary) !important;
  border-radius: 1rem !important;
  padding: clamp(1rem, 3vw, 1.5rem) !important;
  box-sizing: border-box !important;
}

/* Account UI cards — gold frame (matches edit-address / edit-account detail cards) */
body.woocommerce-account form.woocommerce-EditAccountForm .perla-account-fields-card-frame,
body.woocommerce-account .nera-account-orders .perla-account-fields-card-frame,
body.woocommerce-account .nera-account-dashboard .perla-account-fields-card-frame {
  border: 1px solid var(--color-primary);
  border-radius: 1rem;
  box-sizing: border-box;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row {
  margin-bottom: 0;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row label .required {
  color: var(--color-danger);
  margin-left: 0.125rem;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='text'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='email'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='tel'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='number'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='password'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input[type='url'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row select,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row textarea {
  width: 100%;
  min-height: 3rem;
  height: auto;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-200);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  outline: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row textarea {
  min-height: 6rem;
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input::placeholder,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row textarea::placeholder {
  color: var(--color-gray-400);
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row input:focus,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row select:focus,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-invalid label {
  color: var(--color-danger);
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-invalid input,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-invalid select,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-invalid textarea {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 35%, transparent);
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-validated input,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-validated select,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .form-row.woocommerce-validated textarea {
  border-color: var(--color-success);
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  border-radius: 0.25rem;
  border: 1px solid var(--color-gray-300);
  accent-color: var(--color-primary);
  cursor: pointer;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container .select2-selection--single {
  height: 3rem !important;
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  display: flex;
  align-items: center;
  height: 100%;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container .select2-selection--single .select2-selection__arrow {
  height: 3rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container--focus .select2-selection--single,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  outline: none;
}

/* Select2 chevron (<b role="presentation">) — match checkout/cart white stroke (WC core uses black SVG). */
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .select2-container .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  border: none !important;
}

/* Checkout / cart — country & state rows (e.g. .address-field.update_totals_on_change) */
body.woocommerce-checkout .form-row.address-field .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-checkout .form-row.address-field .select2-container .select2-selection--single .select2-selection__arrow b,
body.woocommerce-cart .form-row.address-field .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-cart .form-row.address-field .select2-container .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  border: none !important;
}

/* WooCommerce layout floats — full width cells in CSS grid (names + address fields). */
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .grid > .form-row {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Password field: keep room for .show-password-input (our input padding was overriding WC layout). */
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .password-input input[type='password'],
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .password-input input[type='text'] {
  padding-right: 2.75rem !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .password-input input[type='password'],
body.woocommerce-checkout .woocommerce-billing-fields .password-input input[type='text'] {
  padding-right: 2.75rem !important;
}

/* Show / hide password — WC layout uses black SVG; flip to light for dark cards. */
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .show-password-input {
  color: #fff !important;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .show-password-input::before,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .show-password-input.display-password::before {
  filter: brightness(0) invert(1) !important;
}

/* Login tab (#panel-login) — same show/hide toggle treatment as Password Change Card */
#panel-login .show-password-input {
  color: #fff !important;
}

#panel-login .show-password-input::before,
#panel-login .show-password-input.display-password::before {
  filter: brightness(0) invert(1) !important;
}

/* Register form — same show/hide toggle as Password Change Card / panel-login */
#nera-register-form .show-password-input {
  color: #fff !important;
}

#nera-register-form .show-password-input::before,
#nera-register-form .show-password-input.display-password::before {
  filter: brightness(0) invert(1) !important;
}

/* WC core password meter on edit account: keep in DOM for wc-password-strength-meter.js
   (submit guard). Visual UX matches #nera-register-form via #nera-edit-account-password-strength. */
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .woocommerce-password-strength,
body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .woocommerce-password-hint {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.woocommerce-account form:is(.perla-account-fields--checkout-match, .perla-wallet-fields--checkout-match) .password-input {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* =========================================================================
   Terms & Conditions — section 1 minimum-sales emphasis (text only, no panel fill)
   ========================================================================= */
body .site-main article .prose .perla-terms-emphasis-callout {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .site-main article .prose .perla-terms-emphasis-callout .perla-prize-disclosure__terms-title {
  margin-top: 0;
}

body .site-main article .prose .perla-terms-emphasis-callout .perla-prize-disclosure__terms-title strong {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

body .site-main article .prose .perla-terms-emphasis-callout .perla-prize-disclosure__terms-p {
  color: var(--color-text-primary);
  color: color-mix(in srgb, var(--color-primary) 28%, var(--color-text-primary));
  font-weight: 600;
  line-height: 1.65;
}

body .site-main article .prose .perla-prize-disclosure__terms-title {
  margin-top: 0;
}

body .site-main article .prose .perla-prize-disclosure__terms-title strong {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

body .site-main article .prose .perla-prize-disclosure__terms-p {
  color: var(--color-text-secondary);
}

/* Terms & Privacy policy pages — vertical rhythm after lists / before following clauses */
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose > ul.wp-block-list,
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose ul.wp-block-list {
  margin-bottom: 1.25rem;
}

:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose > ul.wp-block-list + p,
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose ul.wp-block-list + p {
  margin-top: 1.35rem;
}

:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose .wp-block-list + .wp-block-paragraph,
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose ul.wp-block-list + .wp-block-paragraph {
  margin-top: 1.35rem;
}

/* Wrapper div (some WP versions) around list block */
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose div.wp-block-list:has(ul) {
  margin-bottom: 1.25rem;
}

:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose div.wp-block-list:has(ul) + p,
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose div.wp-block-list:has(ul) + .wp-block-paragraph {
  margin-top: 1.35rem;
}

/* Nested lists: extra space before the next top-level block */
:is(body.perla-wc-terms-page, body.perla-wc-privacy-page) .site-main article .prose li > ul.wp-block-list {
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   Lottery ticket picker (moved from parent nera-competitions-standard main.css)
   ========================================================================== */
/* ==========================================================================
   Nera Ticket Picker — Dialog variant
   Explicit CSS (not @apply-only) ensures grid layout works regardless of build.
   ========================================================================== */

/* ── Shared: count badge ────────────────────────────────────────── */
.nera-ticket-picker__count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nera-ticket-picker__count-badge[data-has-selection="true"] {
  background: var(--color-primary);
  color: #fff;
}

/* ── Trigger button ─────────────────────────────────────────────── */
.nera-ticket-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-primary) 12%);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  text-align: left;
}

.nera-ticket-trigger:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-primary) 22%);
  transform: translateY(-1px);
}

.nera-ticket-trigger:active {
  transform: translateY(0);
}

.nera-ticket-trigger__icon {
  color: var(--color-primary);
  font-size: 20px !important;
}

.nera-ticket-trigger__arrow {
  color: var(--color-primary);
  font-size: 18px !important;
  transition: transform 0.15s;
}

.nera-ticket-trigger:hover .nera-ticket-trigger__arrow {
  transform: translateX(3px);
}

/* ── Dialog shell ───────────────────────────────────────────────── */
/* Width: Tailwind `sm:max-w-lg` on this node is not in the parent bundle (child PHP
   is outside @source). Constrain here so desktop stays a compact modal (~max-w-lg). */
.nera-ticket-dialog {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90svh;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .nera-ticket-dialog {
    border-radius: 20px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
    max-height: 85svh;
    max-width: min(32rem, calc(100vw - 2rem));
  }
}

/* Drag handle on mobile */
.nera-ticket-dialog::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .nera-ticket-dialog::before {
    display: none;
  }
}

/* ── Dialog header ──────────────────────────────────────────────── */
.nera-ticket-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  flex-shrink: 0;
}

.nera-ticket-dialog__header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nera-ticket-dialog__header-icon .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 18px !important;
}

.nera-ticket-dialog__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.nera-ticket-dialog__close:hover {
  background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  color: var(--color-text-primary);
}

.nera-ticket-dialog__close .material-symbols-outlined {
  font-size: 20px !important;
}

/* ── Dialog body ────────────────────────────────────────────────── */
.nera-ticket-dialog__body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 12px;
  min-height: 0;
}

.nera-ticket-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* ── Range select (ticket dialog): primary/yellow wrap ring; flat select; room for leading icon ─ */
.nera-range-select-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: 1.5px solid var(--color-primary);
  box-shadow: none;
  border-radius: 999px;
  padding: 0 !important;
  gap: 0 !important;
}

.nera-range-select-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: none;
}

.nera-range-select-wrap select.nera-range-select {
  font-family: var(--font-body, inherit);
  border-radius: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff;
  color-scheme: dark;
  width: 100%;
  max-width: 100%;
  /* Parent `.nera-range-select { padding: 10px 0 }` zeros horizontal padding — force insets for icon + chevron. */
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  padding-left: 3rem !important;
  padding-right: 2.5rem !important;
  min-height: 2.5rem;
  box-sizing: border-box;
  transition: color 0.2s ease;
}

.nera-range-select-wrap select.nera-range-select:hover,
.nera-range-select-wrap select.nera-range-select:focus,
.nera-range-select-wrap select.nera-range-select:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Readable OS option list (matches categories-competitions archive selects). */
.nera-range-select-wrap select.nera-range-select option {
  background-color: #f4f0fc;
  color: #140f22;
}

.nera-range-select-wrap:focus-within .nera-range-select__chevron {
  color: var(--color-text-secondary);
}

/* ── Tab pill (hidden from view, kept for plugin DOM needs) ─────── */
.lty-lottery-ticket-tab {
  display: none !important;
}

/* ── Ticket grid scroll area (dialog) ───────────────────────────── */
.nera-ticket-picker__dialog-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  border: 1.5px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--color-surface) 70%, #0f0f12 30%);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 40%, transparent) transparent;
}

.nera-ticket-picker__dialog-grid::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

.nera-ticket-picker__dialog-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 2px;
}

/* ── Ticket number grid ─────────────────────────────────────────── */
.nera-ticket-grid__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 7px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Ticket cell base ───────────────────────────────────────────── */
.lty-ticket,
.nera-ticket-grid__cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  margin: 0 !important;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.lty-ticket:hover:not(.lty-booked-ticket):not(.lty-processing-ticket):not(.lty-reserved-ticket) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── Ticket state variants ──────────────────────────────────────── */

.lty-selected-ticket {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

.lty-booked-ticket {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  text-decoration: line-through;
}

.lty-processing-ticket {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #93c5fd !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.lty-reserved-ticket {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #f59e0b !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.lty-hidden-ticket {
  display: none !important;
}

/* ── View more button ───────────────────────────────────────────── */
.lty-toggle-view-button {
  @apply mt-3;
}

.lty-toggle-lottery-tickets {
  @apply block w-full py-2 text-center text-xs font-semibold text-primary
         border border-primary/20 rounded-lg bg-surface
         hover:bg-primary/5 transition-colors no-underline;
}

/* ── Legend ─────────────────────────────────────────────────────── */
.nera-ticket-picker__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 2px;
}

.nera-ticket-picker__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.nera-ticket-picker__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid #e2e8f0;
  display: inline-block;
  flex-shrink: 0;
}

.nera-ticket-picker__legend-item--available .nera-ticket-picker__legend-dot {
  background: #fff;
  border-color: #cbd5e1;
}

.nera-ticket-picker__legend-item--selected .nera-ticket-picker__legend-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.nera-ticket-picker__legend-item--sold .nera-ticket-picker__legend-dot {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.nera-ticket-picker__legend-item--cart .nera-ticket-picker__legend-dot {
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* ── Dialog footer ──────────────────────────────────────────────── */
.nera-ticket-dialog__footer {
  padding: 12px 18px 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  flex-shrink: 0;
  background: var(--color-surface);
}

.nera-ticket-dialog__confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.nera-ticket-dialog__confirm-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.nera-ticket-dialog__confirm-count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Strip plugin-injected margins ─────────────────────────────── */
.lty-lottery-ticket-container {
  margin: 0 !important;
}

.lty-lottery-ticket-panel,
.lty-lottery-ticket-wrapper {
  @apply m-0;
}

/* ── Lucky-dip / search wrappers ────────────────────────────────── */
.lty-lucky-dip-wrapper,
.lty-manual-ticket-search-wrapper {
  @apply mb-2 flex-shrink-0;
}

/* =========================================================================
   Giveaway entry list page — strip inherits canvas; cards without filled shell
   (main uses .nera-entry-list-listing from entry-list-listing-template.php).
   ========================================================================= */

body main.nera-entry-list-listing section.perla-entry-list-strip {
  background: transparent;
}

body main.nera-entry-list-listing #categories-competitions .comp-card {
  background: transparent !important;
  box-shadow: none !important;
}

body main.nera-entry-list-listing #categories-competitions .comp-card:hover {
  transform: none;
  box-shadow: none !important;
  border-color: rgba(201, 168, 76, 0.45);
}

body main.nera-entry-list-listing #categories-competitions .comp-card::before {
  display: none !important;
}

body main.nera-entry-list-listing #categories-competitions .comp-card-img {
  background: transparent !important;
}