/* ============================================================
   Prism: home skin. Banners, section heads, the view-more card,
   the custom block, products on show and their tags, the winner
   ticker and the quick-look dialogs. Loaded on every page, since
   the listing pages reuse these pieces. Scoped "html body …" so it
   outranks page and component CSS printed later.
   ============================================================ */

/* ── The banner frame ──
   A banner is a large white card on a soft shadow, its colour (the one
   the admin picked) carried by a thin rule along its top edge and the
   small prism before its label. Pointed at, the card lifts a little. */
html body .psm-bframe {
  --psm-tone: var(--psm-t1);
  position: relative; display: block;
  padding: 0;
  border-radius: 26px;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow);
  margin: 10px 4px 6px;
  overflow: hidden;
  container-type: inline-size;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
html body .psm-bframe::before { content: ''; position: absolute; z-index: 3; inset-inline: 0; top: 0; height: 3px; background: var(--psm-tone); pointer-events: none; }
html body .psm-bframe--slim { border-radius: 22px; }
html body .psm-bframe > .psm-bnr {
  position: relative;
  border-radius: inherit !important;
  border: 0 !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
  overflow: hidden;
}
html body a.psm-bframe:hover, html body a.psm-bframe:focus-visible, html body .psm-bframe:focus-within { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--rule), var(--shadow-lift); }
html body .psm-bframe > .psm-bnr::before { display: none !important; }
html body .psm-bnr :is(.bpc-accent-strip, .bpc-mystery-strip) { display: none; }
@media (prefers-reduced-motion: reduce) { html body .psm-bframe { transition: none; transform: none !important; } }

/* Banner text in the theme's type, whichever style; the banner's colour
   shown as a small prism before the label */
html body .psm-bnr [data-bnr-title] { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -.03em !important; font-variation-settings: normal !important; line-height: 1.02 !important; overflow-wrap: break-word; hyphens: manual; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .psm-bnr [data-bnr-title] { letter-spacing: 0 !important; line-height: 1.18 !important; }
html body .psm-bnr [data-bnr-label], html body .psm-bnr .ed-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--psm-accent-text) !important; letter-spacing: .08em !important; font-family: var(--font-ui); font-weight: 600;
}
html body .psm-bnr [data-bnr-label]::before {
  content: ''; flex-shrink: 0; width: 11px; height: 11px;
  background: currentColor;
  -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat;
}
html body .psm-bnr .bnr-sub { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
html body .psm-bnr .bnr-chip:not(.is-urgent):not(.is-ended) { color: var(--psm-accent-text); background: var(--psm-accent-soft); border-radius: 999px; font-weight: 600; font-family: var(--font-ui); }
html body .psm-bnr .bnr-chip.is-urgent { color: #ffffff; background: var(--psm-live); border-radius: 999px; font-weight: 600; font-family: var(--font-ui); }
html.dark body .psm-bnr .bnr-chip.is-urgent { color: #1a0405; }
html body .psm-bnr .bnr-stat { color: var(--ink); font-weight: 600; font-family: var(--font-num); }

/* Product layout: the cut-out product sits on a soft round well at the
   card's far side, a wash of the accent behind it. The card is an
   inline-size container, so the well keeps clear of the text. */
html body .psm-bnr {
  --plate: min(32cqw, 12rem); --plate-x: 5cqw;
  --psm-disc: radial-gradient(closest-side, #ffffff 0 60%, #eef0f3 61% 100%, rgba(238, 240, 243, 0) 100.5%);
  --psm-halo: radial-gradient(closest-side, var(--psm-accent-soft), rgba(255, 255, 255, 0));
  --psm-ground: var(--paper-2);
}
html.dark body .psm-bnr {
  --psm-disc: radial-gradient(closest-side, #1f2331 0 60%, #1b1e2b 61% 100%, rgba(27, 30, 43, 0) 100.5%);
  --psm-ground: var(--paper-2);
}
html body .psm-bnr[data-bnr-layout="product"] {
  background:
    var(--bnr-image) right calc(var(--plate-x) + var(--plate) * .17) center / auto min(calc(var(--plate) * .66), calc(var(--plate) * .66 / var(--bnr-ar, 1))) no-repeat,
    var(--psm-disc) right var(--plate-x) center / var(--plate) var(--plate) no-repeat,
    var(--psm-halo) right calc(var(--plate-x) - var(--plate) * .25) center / calc(var(--plate) * 1.5) calc(var(--plate) * 1.5) no-repeat,
    var(--psm-ground) !important;
}
html body .psm-bnr[data-bnr-layout="product"] [data-bnr-text] [data-bnr-title],
html body .psm-bnr[data-bnr-layout="product"] [data-bnr-text] .bnr-stat { color: var(--ink) !important; }
html body .psm-bnr[data-bnr-layout="product"] [data-bnr-text] :is(.bnr-sub, .bnr-live, .ed-status) { color: var(--ink-soft) !important; }
@media (min-width: 640px) { html body .psm-bnr[data-bnr-layout="product"] [data-bnr-text]:not([data-bnr-row]) { max-width: calc(100cqw - var(--plate) - var(--plate-x) - 3rem); } }
@media (min-width: 640px) {
  html[dir="rtl"] body .psm-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) left calc(var(--plate-x) + var(--plate) * .17) center / auto min(calc(var(--plate) * .66), calc(var(--plate) * .66 / var(--bnr-ar, 1))) no-repeat,
      var(--psm-disc) left var(--plate-x) center / var(--plate) var(--plate) no-repeat,
      var(--psm-halo) left calc(var(--plate-x) - var(--plate) * .25) center / calc(var(--plate) * 1.5) calc(var(--plate) * 1.5) no-repeat,
      var(--psm-ground) !important;
  }
  html[dir="rtl"] body .psm-bnr[data-bnr-layout="cover"] {
    background: linear-gradient(270deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .08) 74%, rgba(255, 255, 255, 0) 100%), var(--bnr-image) center / cover no-repeat, #ffffff !important;
  }
  html.dark[dir="rtl"] body .psm-bnr[data-bnr-layout="cover"] {
    background: linear-gradient(270deg, rgba(22, 25, 37, .97) 0%, rgba(22, 25, 37, .86) 38%, rgba(22, 25, 37, .1) 74%, rgba(22, 25, 37, 0) 100%), var(--bnr-image) center / cover no-repeat, #161925 !important;
  }
}
/* Phones: the well in a band across the top, the words below */
@media (max-width: 639px) {
  html body .psm-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) center 1.1rem / auto 4.6rem no-repeat,
      var(--psm-disc) center .5rem / 5.8rem 5.8rem no-repeat,
      var(--psm-halo) center 0 / 10rem 7rem no-repeat,
      var(--psm-ground) !important;
  }
  html body .psm-bnr:is([data-bnr-layout="product"], [data-bnr-layout="cover"]) [data-bnr-text] { padding-top: 7.4rem !important; }
}

/* Cover layout: the photo seen through a wash of white */
html body .psm-bnr[data-bnr-layout="cover"] {
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .08) 74%, rgba(255, 255, 255, 0) 100%), var(--bnr-image) center / cover no-repeat, #ffffff !important;
}
html.dark body .psm-bnr[data-bnr-layout="cover"] {
  background: linear-gradient(90deg, rgba(22, 25, 37, .97) 0%, rgba(22, 25, 37, .86) 38%, rgba(22, 25, 37, .1) 74%, rgba(22, 25, 37, 0) 100%), var(--bnr-image) center / cover no-repeat, #161925 !important;
}
html body .psm-bnr[data-bnr-layout="cover"] [data-bnr-text] [data-bnr-title],
html body .psm-bnr[data-bnr-layout="cover"] [data-bnr-text] .bnr-stat { color: var(--ink) !important; }
html body .psm-bnr[data-bnr-layout="cover"] [data-bnr-text] :is(.bnr-sub, .bnr-live, .ed-status) { color: var(--ink-soft) !important; }
@media (max-width: 639px) {
  html body .psm-bnr[data-bnr-layout="cover"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 5rem, rgba(255, 255, 255, .97) 8rem, #ffffff 9.4rem), var(--bnr-image) center top / cover no-repeat, #ffffff !important;
  }
  html.dark body .psm-bnr[data-bnr-layout="cover"] {
    background: linear-gradient(180deg, rgba(22, 25, 37, 0) 0, rgba(22, 25, 37, .2) 5rem, rgba(22, 25, 37, .96) 8rem, #161925 9.4rem), var(--bnr-image) center top / cover no-repeat, #161925 !important;
  }
}

/* The theme's own plain card (no image): the prism and its beam drawn
   into its corner */
html body .psm-bnr[data-bnr-layout="none"], html body .psm-bnr:not([data-bnr-layout]) {
  background: var(--art-refraction) right 18px bottom 12px / 120px 90px no-repeat, var(--psm-ground) !important;
}
html[dir="rtl"] body .psm-bnr:is([data-bnr-layout="none"], :not([data-bnr-layout])) { background-position: left 18px bottom 12px, 0 0 !important; }

/* Swiper dots: small grey dots; the one showing runs out into a short
   bar of the accent */
html body .banner-carousel-swiper .swiper-pagination-bullet {
  width: 7px; height: 7px; border-radius: 99px;
  background: #b9bdcb !important; opacity: 1;
  transition: width .35s cubic-bezier(.2, .8, .3, 1), background-color .3s ease;
}
html.dark body .banner-carousel-swiper .swiper-pagination-bullet { background: #3a3f52 !important; }
html body .banner-carousel-swiper .swiper-pagination-bullet-active,
html body .banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active { width: 26px; background: var(--psm-accent) !important; }
/* Arrows: round white buttons on a soft shadow */
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next) {
  width: 44px; height: 44px; margin-top: -22px;
  border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next):hover { box-shadow: var(--shadow-lift); }
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next):active { transform: scale(.95); }
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next)::after { font-size: 13px; font-weight: 900; }
html[dir="rtl"] body .psm-bnr :is(.ed-btn-primary, [data-bnr-text] a) svg { transform: scaleX(-1); }

/* ── Section heads ──
   Every section on the homepage and the listing pages prints its own
   head (eyebrow, display title, view-all link, a rule under it). Here
   the rule is a single hairline with a short bar of the accent at its
   start, the title is set large in the display face and its full stop
   is a small prism. The scroll-reveal fade is dropped: the heads are
   there from the first paint. */
html body .reveal { opacity: 1; transform: none; }
html body :is(.reveal, .psm-shell__head):has(> .min-w-0 > h2, > div > h2, > h2) {
  position: relative;
  border-bottom: 0 !important;
  padding-bottom: 1.1rem !important;
}
html body :is(.reveal, .psm-shell__head):has(> .min-w-0 > h2, > div > h2, > h2)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background:
    linear-gradient(var(--psm-accent), var(--psm-accent)) 0 0 / 44px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 1px / 100% 1px no-repeat;
}
html[dir="rtl"] body :is(.reveal, .psm-shell__head):has(> .min-w-0 > h2, > div > h2, > h2)::after {
  background:
    linear-gradient(var(--psm-accent), var(--psm-accent)) 100% 0 / 44px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 1px / 100% 1px no-repeat;
}
html body :is(.reveal, .psm-shell__head) h2.font-display, html body .psm-shell__title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--ink);
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body :is(.reveal, .psm-shell__head) h2.font-display { letter-spacing: 0 !important; }
/* A small prism for the full stop, whichever markup prints it */
html body :is(.reveal, .psm-shell__head) h2.font-display > .display-italic,
html body #px-spa-content h2.font-display > .display-italic,
html body #px-spa-content h2.font-display > span > .display-italic,
html body .psm-stop {
  display: inline-block; width: .32em; height: .3em; margin-inline-start: .1em; vertical-align: .02em;
  background: var(--psm-accent);
  -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat;
  color: transparent !important; overflow: hidden; font-size: inherit; line-height: 0;
}
/* The asterisk dividers between sections become the prism set in a
   hairline */
html body .w-full[aria-hidden="true"] > .flex > span.font-display {
  width: 16px; height: 14px; flex-shrink: 0;
  background: var(--ink-soft); opacity: .7;
  -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat;
}
html body .w-full[aria-hidden="true"] > .flex > span.font-display > svg { visibility: hidden; }
html body .w-full[aria-hidden="true"] > .flex > .h-px { height: 1px !important; background: var(--rule) !important; }

/* section-shell.php */
html body .psm-shell { position: relative; padding: 3.5rem 1.5rem; background: transparent; }
html body .psm-shell__head { position: relative; margin-bottom: 2rem; }
html body .psm-shell__title { margin: 0; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.04; overflow-wrap: break-word; }

/* ── View-more card: the end of the row, a sunk card with the prism and
   its beam, the label and an ink button ── */
html body .psm-vm {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  min-height: 22rem; padding: 2rem 1.4rem;
  text-align: center; color: var(--ink);
  background: radial-gradient(80% 60% at 50% 20%, var(--psm-accent-soft), transparent 75%), var(--paper-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
html body .psm-vm:hover, html body .psm-vm:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); outline: none; }
html body .psm-vm:focus-visible { box-shadow: 0 0 0 3px var(--psm-focus), var(--shadow-lift); }
html body .psm-vm .psm-art { width: 170px; height: auto; transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
html body .psm-vm:hover .psm-art, html body .psm-vm:focus-visible .psm-art { transform: translateX(4px); }
html[dir="rtl"] body .psm-vm .psm-art { transform: scaleX(-1); }
html[dir="rtl"] body .psm-vm:hover .psm-art, html[dir="rtl"] body .psm-vm:focus-visible .psm-art { transform: scaleX(-1) translateX(4px); }
html body .psm-vm__sheet { display: flex; flex-direction: column; align-items: center; gap: .35rem; max-width: 100%; }
html body .psm-vm__label { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 1.5rem; line-height: 1.08; overflow-wrap: break-word; color: var(--ink); }
html body .psm-vm__desc { font-size: .9rem; color: var(--ink-soft); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .psm-vm__label { letter-spacing: 0; font-size: 1.3rem; }
html body .psm-vm__go {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 1.2rem; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--paper-2); background: var(--ink);
  transition: gap .3s ease;
}
html body .psm-vm:hover .psm-vm__go, html body .psm-vm:focus-visible .psm-vm__go { gap: .8rem; }
html[dir="rtl"] body .psm-vm__go svg { transform: scaleX(-1); }

/* ── Custom block (home/section-custom.php) ── */
html body .hcb { border-radius: var(--radius); position: relative; isolation: isolate; overflow: hidden; }
html body .hcb--card { background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html body .hcb--brand { background: var(--psm-panel); color: var(--psm-on-panel); }
html body .hcb--brand :is(h2, h3, p, .hcb__title) { color: var(--psm-on-panel); }
html body .hcb__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
html body .hcb__img, html body .hcb img { border-radius: 16px; }

/* ── A product on show ──
   The photo on a card sits on a soft grey well, lit faintly from above;
   pointed at, it rises a touch. */
html body .psm-shot {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--psm-well);
}
html body .psm-shot__pad {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: min(80%, 13rem); aspect-ratio: 1;
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
html body .psm-shot__pad::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 18, 28, .16), rgba(16, 18, 28, 0)); }
html.dark body .psm-shot__pad::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
html body .psm-shot__pad img { position: relative; width: 82%; height: 82%; object-fit: contain; }
html body .psm-shot > .absolute { z-index: 3; }
html body :is(a, article, div):hover > .psm-shot .psm-shot__pad,
html body :is(a, article, div):focus-within > .psm-shot .psm-shot__pad { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { html body :is(a, article, div):is(:hover, :focus-within) > .psm-shot .psm-shot__pad { transform: none; } }

/* Notes on a product: small tags (theme.css draws them) */
html body .psm-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
html body .psm-veil { background: color-mix(in srgb, #ffffff 62%, transparent); }
html.dark body .psm-veil { background: rgba(13, 15, 23, .6); }
html body .psm-stars-row { color: var(--px-star); gap: 1px; }
html body .psm-free { color: var(--psm-good) !important; }

/* ── Winner ticker: white cards in a line, each with the prize in a soft
   well, the winner's name and what it was worth ── */
html body .psm-wt__head { position: relative; }
html body .psm-wt .wt-wrap { padding: 14px 0 20px; }
html body .psm-wt .wt-card {
  position: relative; overflow: visible;
  width: 300px; margin: 0 8px; gap: 14px; padding: 14px;
  border-radius: 20px; background: var(--paper-2); border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
html body .psm-wt .wt-card:hover, html body .psm-wt .wt-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
html body .psm-wt .wt-tile { width: 64px; height: 64px; }
html body .psm-wt .wt-tile-frame { border-radius: 16px; border: 0; padding: 0; background: var(--psm-well); display: flex; align-items: center; justify-content: center; overflow: hidden; }
html body .psm-wt .wt-tile-img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
html body .psm-wt .wt-card:hover .wt-tile-img { transform: none; }
html body .psm-wt .wt-tile-fallback { color: var(--ink-soft); font-size: 22px; width: 100%; height: 100%; display: grid; place-items: center; }
html body .psm-wt .wt-ava { width: 26px; height: 26px; border: 0; box-shadow: 0 0 0 2px var(--paper-2); }
html body .psm-wt .wt-ava-init { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--psm-on-accent); background: var(--psm-accent); }
html body .psm-wt .wt-src-pill { padding: .22rem .6rem; border-radius: 999px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--psm-accent-text); background: var(--psm-accent-soft); border: 0; box-shadow: none; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .psm-wt .wt-src-pill { letter-spacing: 0; font-size: 11px; }
html body .psm-wt .wt-time-pill { color: var(--ink-soft); font-size: 12px; font-family: var(--font-num); font-weight: 500; }
html body .psm-wt .wt-wname { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
html body .psm-wt .wt-iname { color: var(--ink-soft); }
html body .psm-wt :is(.wt-val-currency, .wt-val-coins) { color: var(--ink) !important; font-family: var(--font-num); font-weight: 600; font-size: 1rem; white-space: nowrap; overflow-wrap: normal; }
html body .psm-wt .wt-track { position: relative; z-index: 1; }
html body .psm-wt .wt-wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { html body .psm-wt .wt-track { animation-duration: 600s; } }
/* Each prize's source, by the tone the kernel gives it, never its name:
   steps of the accent and neutrals, so the strip stays one family */
html body .wt-src-dot[data-tone] { background: var(--src) !important; }
html body :is(.wt-src-dot, .wnc)[data-tone="amber"]   { --src: var(--theme-500); }
html body :is(.wt-src-dot, .wnc)[data-tone="blue"]    { --src: var(--theme-700); }
html body :is(.wt-src-dot, .wnc)[data-tone="violet"]  { --src: var(--theme-900); }
html body :is(.wt-src-dot, .wnc)[data-tone="green"]   { --src: #0f7a4b; }
html body :is(.wt-src-dot, .wnc)[data-tone="teal"]    { --src: #33507a; }
html body :is(.wt-src-dot, .wnc)[data-tone="rose"]    { --src: var(--theme-600); }
html body :is(.wt-src-dot, .wnc)[data-tone="orange"]  { --src: var(--theme-400); }
html body :is(.wt-src-dot, .wnc)[data-tone="slate"]   { --src: #5a6072; }
html body :is(.wt-src-dot, .wnc)[data-tone="neutral"] { --src: #11131c; }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="amber"]   { --src: var(--theme-300); }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="blue"]    { --src: var(--theme-400); }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="violet"]  { --src: var(--theme-200); }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="green"]   { --src: #5fd6a0; }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="teal"]    { --src: #9db8ea; }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="rose"]    { --src: var(--theme-500); }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="orange"]  { --src: var(--theme-300); }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="slate"]   { --src: #a2a8ba; }
html.dark body :is(.wt-src-dot, .wnc)[data-tone="neutral"] { --src: #eef0f6; }
html body .wnc[data-tone] { --wnc-src: var(--src); --wnc-grad: linear-gradient(135deg, color-mix(in srgb, var(--src) 70%, #fff), var(--src)); }

/* ── Quick-look dialogs ──
   The products' quick-look and quick-buy dialogs on the homepage mark
   their overlay .px-quick-modal and their panel .px-quick-panel: the
   white card raised over a frosted page. */
html body .px-quick-modal { background-color: rgba(10, 12, 24, .42) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.dark body .px-quick-modal { background-color: rgba(4, 5, 10, .68) !important; }
html body .px-quick-modal > .absolute.inset-0 { background: transparent !important; }
html body .px-quick-panel,
html body .fixed.inset-0[id$="Modal"] > div:not(.absolute):not([class*="bg-black"]):is(.rounded-2xl, .rounded-3xl, [class*="rounded-"]) {
  position: relative; overflow: hidden;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 26px !important;
  box-shadow: 0 34px 90px -30px rgba(16, 18, 28, .55) !important;
}
html.dark body :is(.px-quick-panel, .fixed.inset-0[id$="Modal"] > div:not(.absolute):not([class*="bg-black"]):is(.rounded-2xl, .rounded-3xl, [class*="rounded-"])) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 34px 90px -24px rgba(0, 0, 0, .95) !important; }
html body :is(.px-quick-panel, .fixed.inset-0[id$="Modal"]) :is(h2, h3).font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
html body .fixed.inset-0[id$="Modal"] > .absolute.inset-0 { background: rgba(10, 12, 24, .42) !important; backdrop-filter: blur(8px); }
html.dark body .fixed.inset-0[id$="Modal"] > .absolute.inset-0 { background: rgba(4, 5, 10, .68) !important; }

/* The listing pages print the same head as the homepage sections with
   the display full stop, sometimes without .reveal: the same rule */
html body #px-spa-content div.border-b:has(> div h2.font-display .display-italic):not(.reveal) { position: relative; border-bottom: 0 !important; }
html body #px-spa-content div.border-b:has(> div h2.font-display .display-italic):not(.reveal)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background:
    linear-gradient(var(--psm-accent), var(--psm-accent)) 0 0 / 44px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 1px / 100% 1px no-repeat;
}
html[dir="rtl"] body #px-spa-content div.border-b:has(> div h2.font-display .display-italic):not(.reveal)::after {
  background:
    linear-gradient(var(--psm-accent), var(--psm-accent)) 100% 0 / 44px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 1px / 100% 1px no-repeat;
}

/* Home stats in the hero lift on hover instead of fading (home.css) */
html body .hero-stat-link:hover { opacity: 1 !important; }

/* Prize names on the plugins' cards come from the database in any
   script; each heading finds its own direction */
html[dir="rtl"] body :is([class*="ed-card-"], .wnc, .wishlist-item) :is(h2, h3, h4) { unicode-bidi: plaintext; }
html body .psm-off { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--psm-bad); }
/* Plan cards: the rate in the mono face */
html body .psm-inv__rate { font-family: var(--font-num) !important; font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 600 !important; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* Banners in the plugins' own styles (the kernel markup, without .psm-bnr):
   the same round well under a cut-out product and the same wash of white
   over a cover photo, in place of the stock dark card. */
html body [data-bnr-card]:not(.psm-bnr) {
  --plate: 10rem; --plate-x: 1.6rem; border-radius: 22px;
  --psm-disc: radial-gradient(closest-side, #ffffff 0 60%, #eef0f3 61% 100%, rgba(238, 240, 243, 0) 100.5%);
  --psm-ground: var(--paper-2);
}
html.dark body [data-bnr-card]:not(.psm-bnr) { --psm-disc: radial-gradient(closest-side, #1f2331 0 60%, #1b1e2b 61% 100%, rgba(27, 30, 43, 0) 100.5%); }
html body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="product"] {
  background:
    var(--bnr-image) right calc(var(--plate-x) + var(--plate) * .17) center / auto min(calc(var(--plate) * .66), calc(var(--plate) * .66 / var(--bnr-ar, 1))) no-repeat,
    var(--psm-disc) right var(--plate-x) center / var(--plate) var(--plate) no-repeat,
    var(--psm-ground) !important;
}
html body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] {
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .08) 74%, rgba(255, 255, 255, 0) 100%), var(--bnr-image) center / cover no-repeat, #ffffff !important;
}
html.dark body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] {
  background: linear-gradient(90deg, rgba(22, 25, 37, .97) 0%, rgba(22, 25, 37, .86) 38%, rgba(22, 25, 37, .1) 74%, rgba(22, 25, 37, 0) 100%), var(--bnr-image) center / cover no-repeat, #161925 !important;
}
@media (min-width: 640px) {
  html[dir="rtl"] body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="product"] {
    background:
      var(--bnr-image) left calc(var(--plate-x) + var(--plate) * .17) center / auto min(calc(var(--plate) * .66), calc(var(--plate) * .66 / var(--bnr-ar, 1))) no-repeat,
      var(--psm-disc) left var(--plate-x) center / var(--plate) var(--plate) no-repeat,
      var(--psm-ground) !important;
  }
  html[dir="rtl"] body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] { background: linear-gradient(270deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .08) 74%, rgba(255, 255, 255, 0) 100%), var(--bnr-image) center / cover no-repeat, #ffffff !important; }
  html.dark[dir="rtl"] body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] { background: linear-gradient(270deg, rgba(22, 25, 37, .97) 0%, rgba(22, 25, 37, .86) 38%, rgba(22, 25, 37, .1) 74%, rgba(22, 25, 37, 0) 100%), var(--bnr-image) center / cover no-repeat, #161925 !important; }
}
@media (max-width: 639px) {
  html body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="product"] {
    background: var(--bnr-image) center 1.1rem / auto 4.6rem no-repeat, var(--psm-disc) center .5rem / 5.8rem 5.8rem no-repeat, var(--psm-ground) !important;
  }
  html body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 5rem, rgba(255, 255, 255, .97) 8rem, #ffffff 9.4rem), var(--bnr-image) center top / cover no-repeat, #ffffff !important; }
  html.dark body [data-bnr-card]:not(.psm-bnr)[data-bnr-layout="cover"] { background: linear-gradient(180deg, rgba(22, 25, 37, 0) 0, rgba(22, 25, 37, .2) 5rem, rgba(22, 25, 37, .96) 8rem, #161925 9.4rem), var(--bnr-image) center top / cover no-repeat, #161925 !important; }
  html body [data-bnr-card]:not(.psm-bnr):is([data-bnr-layout="product"], [data-bnr-layout="cover"]) [data-bnr-text] { padding-top: 7.4rem !important; }
}
html body [data-bnr-card]:not(.psm-bnr):is([data-bnr-layout="product"], [data-bnr-layout="cover"]) [data-bnr-text] :is([data-bnr-title], .bnr-stat) { color: var(--ink) !important; }
html body [data-bnr-card]:not(.psm-bnr):is([data-bnr-layout="product"], [data-bnr-layout="cover"]) [data-bnr-text] :is(.bnr-sub, .bnr-live, .ed-status) { color: var(--ink-soft) !important; }
html body [data-bnr-card]:not(.psm-bnr):is([data-bnr-layout="product"], [data-bnr-layout="cover"]) :is([data-bnr-label], [data-bnr-text] .ed-eyebrow) { color: var(--psm-accent-text) !important; }
html body [data-bnr-card]:not(.psm-bnr):is([data-bnr-layout="product"], [data-bnr-layout="cover"]) .bnr-chip:not(.is-urgent):not(.is-ended) { color: var(--psm-accent-text); background: var(--psm-accent-soft); border-radius: 999px; }
html body [data-bnr-card]:not(.psm-bnr) [data-bnr-title] { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -.03em; font-variation-settings: normal !important; }
/* Stock yellow accent words inside headings take the accent */
html body :is(h1, h2) .text-yellow-400 { color: var(--psm-accent-text) !important; }

/* ── A box on sale (the box plugin's card for this theme): the board's
   ink card, the box's picture on a soft round well in the middle, its
   name, and the price on a small white pill beside the button. Pointed
   at, the card lifts and the picture rises. ── */
html body .ed-card-mystery.psm-mb {
  position: relative; overflow: hidden;
  background: var(--psm-panel);
  border: 0; border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(16, 18, 28, .6);
  color: var(--psm-on-panel);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
html body .ed-card-mystery.psm-mb::before { content: none; }
html body .ed-card-mystery.psm-mb:hover, html body .ed-card-mystery.psm-mb:focus-visible { transform: translateY(-3px); outline: none; box-shadow: 0 26px 50px -22px rgba(16, 18, 28, .7); }
html body .ed-card-mystery.psm-mb:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--psm-focus); }
html.dark body .ed-card-mystery.psm-mb { box-shadow: none; }
html body .psm-mb__track { display: none; }
html body .psm-mb__body { padding: 6px 18px 18px; }
html body .psm-mb__window {
  position: relative; margin: 14px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--psm-on-panel) 16%, transparent), transparent 75%), color-mix(in srgb, var(--psm-on-panel) 6%, var(--psm-panel));
}
html body .psm-mb__space { position: absolute; left: 24%; right: 24%; bottom: 8%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); }
html.dark body .psm-mb__space { background: radial-gradient(closest-side, rgba(16, 18, 28, .2), rgba(16, 18, 28, 0)); }
html body .psm-mb__img { position: relative; max-width: 80%; max-height: 74%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
html body .ed-card-mystery.psm-mb:is(:hover, :focus-visible) .psm-mb__img { transform: translateY(-6px); }
html body .psm-mb__kind { display: inline-flex; align-self: flex-start; margin: 0 0 .5rem; padding: 0; color: var(--psm-on-panel-soft); font: 700 11.5px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .psm-mb__kind { letter-spacing: 0; font-size: 12px; }
html body .psm-mb__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 4.2vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--psm-on-panel); overflow-wrap: normal; word-break: normal; hyphens: manual; }
html body .psm-mb__desc { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--psm-on-panel-soft); }
html body .psm-mb__price { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .8rem; margin-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--psm-on-panel) 14%, transparent); }
html body .psm-mb__price-label { font: 600 11.5px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--psm-on-panel-soft); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .psm-mb__price-label { letter-spacing: 0; font-size: 12px; }
html body .psm-mb__tag {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .45rem .8rem;
  font: 600 1.1rem/1 var(--font-num); color: var(--psm-panel);
  background: var(--psm-on-panel);
  border-radius: 10px;
  white-space: nowrap;
}
html body .psm-mb__unit { font: 600 .72rem/1 var(--font-ui); color: var(--psm-on-panel-soft); }
html body .psm-mb__tag .psm-mb__unit { color: color-mix(in srgb, var(--psm-panel) 70%, transparent); }
html body .psm-mb__cta { justify-content: center; }
@media (prefers-reduced-motion: reduce) { html body .ed-card-mystery.psm-mb:hover, html body .ed-card-mystery.psm-mb:is(:hover, :focus-visible) .psm-mb__img { transform: none; } }

/* Phones: a page's section head lets its "view all" link drop under the
   title, so a long one-word title (Live-Auktionen) keeps the whole row
   rather than breaking at its hyphen */
@media (max-width: 479px) {
  html body .flex.flex-row.items-end.justify-between:has(> .min-w-0.flex-1 > h2.text-fit) { flex-wrap: wrap; }
  html body .flex.flex-row.items-end.justify-between > .min-w-0.flex-1:has(> h2.text-fit) { flex-basis: 100%; }
}