/* ============================================================
   Pet & Aviary — home skin: the homepage sections and the pieces
   they share with listing pages (banners, section heads, rails,
   view-more card, winner ticker, custom block, the quick-look
   modals, shop / mystery-box / plan cards).
   Every rule is scoped "html body …" so it outranks page and component
   CSS printed later in <body>.
   ============================================================ */

/* ── The shop window ──
   Banners (components/banner_carousel.php) hang in a wooden frame, its
   mitred corners lighter where the light catches them, and a kraft tag
   is tied to the top corner on twine with the set's print stamped on. */
html body .pa-frame {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 30%),
    repeating-linear-gradient(92deg, rgba(110, 69, 31, .12) 0 2px, transparent 2px 9px),
    var(--wood);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(58, 40, 24, .25), 0 3px 0 #8f5b2c, 0 18px 28px -18px rgba(58, 40, 24, .55);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease;
}
html.dark body .pa-frame { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 3px 0 #3d2610, 0 0 40px -14px rgba(245, 185, 92, .35); }
html body .pa-frame:hover, html body .pa-frame:focus-within { transform: translateY(-3px); }
html body .pa-frame--slim { padding: 9px; }
html body .pa-frame > .pa-bnr {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
  transform: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(58, 40, 24, .25), 0 0 0 2px rgba(58, 40, 24, .4) !important;
}
html body .pa-frame > .pa-bnr::before { display: none !important; }
/* The tag on the frame's corner, swinging a little on hover */
html body .pa-frame__tag {
  position: absolute; z-index: 4; pointer-events: none;
  top: -6px; inset-inline-end: 36px; width: 34px; height: 48px;
  background: radial-gradient(circle at 50% 9px, var(--wood) 0 3px, transparent 3.5px), var(--fibre), linear-gradient(180deg, var(--tag), var(--tag-2));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  border-radius: 3px 3px 7px 7px;
  transform: rotate(-6deg); transform-origin: 50% -6px;
  transition: transform .5s cubic-bezier(.3, 1.6, .4, 1);
  display: grid; place-items: center; padding-top: 12px;
}
html body .pa-frame__tag .pa-stamp-mark { width: 16px; height: 16px; color: #6b4424; opacity: .85; }
html body .pa-frame:hover .pa-frame__tag { transform: rotate(5deg); }
@media (prefers-reduced-motion: reduce) { html body .pa-frame { transition: none; } html body .pa-frame:hover { transform: none; } }

/* Banner text in the shop's type, whichever style */
html body .pa-bnr [data-bnr-title] { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; font-variation-settings: normal !important; line-height: 1.15 !important; }
html body .pa-bnr [data-bnr-label], html body .pa-bnr .ed-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--pa-acc, var(--pa-c1)) !important;
}
html body .pa-bnr [data-bnr-text] .ed-eyebrow::before {
  content: ''; flex-shrink: 0; width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: var(--pa-stamp) center / contain no-repeat; mask: var(--pa-stamp) center / contain no-repeat;
}
html body .pa-bnr .bnr-chip:not(.is-urgent):not(.is-ended) { color: var(--tag-ink); background: var(--tag); border-radius: 999px; font-family: var(--font-ui); font-weight: 600; }
html body .pa-bnr .bnr-chip.is-urgent { color: #fff; background: #d9503a; border-radius: 999px; }

/* Product layout: the cut-out product on a shelf against the pegboard,
   a wash of the banner's ink behind it */
html body .pa-bnr[data-bnr-layout="product"] {
  --bnr-text: #33241a; --bnr-text-soft: #5a4331;
  background:
    var(--bnr-image) right 11% bottom 25% / auto min(52%, calc(var(--bnr-room, 34cqw) / var(--bnr-ar, 1))) no-repeat,
    linear-gradient(180deg, #e2ad72 0 3px, #c18a52 3px 70%, #9b6634 70%) right 5% bottom 18% / 32% 14px no-repeat,
    radial-gradient(ellipse 30% 42% at 80% 62%, color-mix(in srgb, var(--pa-acc, var(--pa-c1)) 22%, transparent), transparent 70%),
    radial-gradient(circle, rgba(92, 62, 32, .28) 0 1.8px, transparent 2.3px) 12px 12px / 22px 22px,
    linear-gradient(180deg, #fbf3e3, #f3e4cb) !important;
}
html.dark body .pa-bnr[data-bnr-layout="product"] {
  --bnr-text: #f6ead8; --bnr-text-soft: rgba(246, 234, 216, .82);
  background:
    var(--bnr-image) right 11% bottom 25% / auto min(52%, calc(var(--bnr-room, 34cqw) / var(--bnr-ar, 1))) no-repeat,
    linear-gradient(180deg, #c48f58 0 2px, #8a5a2f 2px 70%, #5f3b1b 70%) right 5% bottom 18% / 32% 14px no-repeat,
    radial-gradient(ellipse 32% 50% at 80% 55%, rgba(245, 185, 92, .26), transparent 70%),
    radial-gradient(circle, rgba(0, 0, 0, .5) 0 1.8px, transparent 2.3px) 12px 12px / 22px 22px,
    linear-gradient(180deg, #2c2017, #1f160f) !important;
}
html body .pa-bnr[data-bnr-layout="product"] [data-bnr-text] [data-bnr-title],
html body .pa-bnr[data-bnr-layout="product"] [data-bnr-text] .bnr-stat { color: var(--bnr-text) !important; }
html body .pa-bnr[data-bnr-layout="product"] [data-bnr-text] :is(.bnr-sub, .bnr-live, .ed-status) { color: var(--bnr-text-soft) !important; }
html body .pa-bnr[data-bnr-layout="product"] [data-bnr-text] { position: relative; z-index: 1; }
@media (min-width: 640px) {
  html[dir="rtl"] body .pa-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) left 11% bottom 25% / auto min(52%, calc(var(--bnr-room, 34cqw) / var(--bnr-ar, 1))) no-repeat,
      linear-gradient(180deg, #e2ad72 0 3px, #c18a52 3px 70%, #9b6634 70%) left 5% bottom 18% / 32% 14px no-repeat,
      radial-gradient(ellipse 30% 42% at 20% 62%, color-mix(in srgb, var(--pa-acc, var(--pa-c1)) 22%, transparent), transparent 70%),
      radial-gradient(circle, rgba(92, 62, 32, .28) 0 1.8px, transparent 2.3px) 12px 12px / 22px 22px,
      linear-gradient(180deg, #fbf3e3, #f3e4cb) !important;
  }
  html.dark[dir="rtl"] body .pa-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) left 11% bottom 25% / auto min(52%, calc(var(--bnr-room, 34cqw) / var(--bnr-ar, 1))) no-repeat,
      linear-gradient(180deg, #c48f58 0 2px, #8a5a2f 2px 70%, #5f3b1b 70%) left 5% bottom 18% / 32% 14px no-repeat,
      radial-gradient(ellipse 32% 50% at 20% 55%, rgba(245, 185, 92, .26), transparent 70%),
      radial-gradient(circle, rgba(0, 0, 0, .5) 0 1.8px, transparent 2.3px) 12px 12px / 22px 22px,
      linear-gradient(180deg, #2c2017, #1f160f) !important;
  }
  html[dir="rtl"] body .pa-bnr[data-bnr-layout="cover"] {
    background:
      linear-gradient(270deg, rgba(251, 243, 227, .97) 0%, rgba(251, 243, 227, .86) 38%, rgba(251, 243, 227, .1) 72%, rgba(251, 243, 227, 0) 100%),
      var(--bnr-image) center / cover no-repeat,
      #f3e4cb !important;
  }
  html.dark[dir="rtl"] body .pa-bnr[data-bnr-layout="cover"] {
    background:
      linear-gradient(270deg, rgba(25, 18, 13, .96) 0%, rgba(25, 18, 13, .82) 38%, rgba(25, 18, 13, .12) 72%, rgba(25, 18, 13, 0) 100%),
      var(--bnr-image) center / cover no-repeat,
      #19120d !important;
  }
}
@media (max-width: 639px) {
  html body .pa-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) center .8rem / auto 5.2rem no-repeat,
      linear-gradient(180deg, #e2ad72 0 3px, #c18a52 3px 70%, #9b6634 70%) center 6.1rem / 9rem 12px no-repeat,
      radial-gradient(circle, rgba(92, 62, 32, .28) 0 1.8px, transparent 2.3px) 12px 12px / 22px 22px,
      linear-gradient(180deg, #f3e4cb 0 7.4rem, var(--paper-2) 7.4rem) !important;
  }
  html.dark body .pa-bnr[data-bnr-layout="product"] {
    background:
      var(--bnr-image) center .8rem / auto 5.2rem no-repeat,
      linear-gradient(180deg, #c48f58 0 2px, #8a5a2f 2px 70%, #5f3b1b 70%) center 6.1rem / 9rem 12px no-repeat,
      radial-gradient(60% 6rem at 50% 3rem, rgba(245, 185, 92, .25), transparent 70%),
      linear-gradient(180deg, #2c2017 0 7.4rem, var(--paper-2) 7.4rem) !important;
  }
}

/* Cover layout: the photo behind the window, the shop's paper over the
   side the words are on (warm walnut after closing) */
html body .pa-bnr[data-bnr-layout="cover"] {
  --bnr-text: #33241a;
  background:
    linear-gradient(90deg, rgba(251, 243, 227, .97) 0%, rgba(251, 243, 227, .86) 38%, rgba(251, 243, 227, .1) 72%, rgba(251, 243, 227, 0) 100%),
    var(--bnr-image) center / cover no-repeat,
    #f3e4cb !important;
}
html.dark body .pa-bnr[data-bnr-layout="cover"] {
  background:
    linear-gradient(90deg, rgba(25, 18, 13, .96) 0%, rgba(25, 18, 13, .82) 38%, rgba(25, 18, 13, .12) 72%, rgba(25, 18, 13, 0) 100%),
    var(--bnr-image) center / cover no-repeat,
    #19120d !important;
}
html body .pa-bnr[data-bnr-layout="cover"] [data-bnr-text] [data-bnr-title] { color: var(--ink) !important; }
html body .pa-bnr[data-bnr-layout="cover"] [data-bnr-text] :is(.bnr-sub, .bnr-live, .ed-status, .bnr-stat) { color: var(--ink-2) !important; }
@media (max-width: 639px) {
  html body .pa-bnr[data-bnr-layout="cover"] {
    background:
      linear-gradient(180deg, rgba(251, 243, 227, 0) 0, rgba(251, 243, 227, .2) 5rem, rgba(251, 243, 227, .96) 8.5rem, #fbf3e3 10rem),
      var(--bnr-image) center top / var(--bnr-phone-size, contain) no-repeat,
      #fbf3e3 !important;
  }
  html.dark body .pa-bnr[data-bnr-layout="cover"] {
    background:
      linear-gradient(180deg, rgba(25, 18, 13, 0) 0, rgba(25, 18, 13, .2) 5rem, rgba(25, 18, 13, .95) 8.5rem, #19120d 10rem),
      var(--bnr-image) center top / var(--bnr-phone-size, contain) no-repeat,
      #19120d !important;
  }
}

/* The theme's own plain card (no image): kraft paper with the set's
   print stamped faintly across it */
html body .pa-bnr[data-bnr-layout="none"], html body .pa-bnr:not([data-bnr-layout]) {
  background: var(--fibre), var(--paper-2) !important;
}

/* Swiper dots: little tags; the one showing is teal and longer */
html body .banner-carousel-swiper .swiper-pagination-bullet {
  width: 9px; height: 9px; border-radius: 999px; margin: 0 4px !important;
  background: var(--kraft-2); opacity: .55;
}
html body .banner-carousel-swiper .swiper-pagination-bullet-active { width: 24px; opacity: 1; background: var(--theme-600); }
html body .banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active { background: var(--theme-600) !important; }
/* Arrows on enamel buttons */
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next) {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 3px 0 var(--btn-lip), 0 8px 12px -6px rgba(12, 77, 76, .5);
  color: var(--btn-ink) !important;
}
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next):active { transform: translateY(3px); }
html body .banner-carousel-swiper :is(.swiper-button-prev, .swiper-button-next)::after { font-size: 13px; font-weight: 900; }
html[dir="rtl"] body .pa-bnr :is(.ed-btn-primary, [data-bnr-text] a) svg { transform: scaleX(-1); }

/* ── Section heads ──
   The kernel's homepage sections (and section-shell.php) open with a
   small eyebrow, a big title and a rule. Here the title is in the slab
   with the set's print for its full stop, and the rule is a length of
   twine with a kraft tag hung from it. home.css hides .reveal until it
   scrolls in; the heads stay visible and the twine draws itself out. */
html body .reveal { opacity: 1; transform: none; }
html body :is(.reveal, .pa-shell__head):has(> .min-w-0 > h2, > div > h2, > h2) {
  position: relative;
  border-bottom: 0 !important;
  padding-bottom: 2.1rem !important;
}
html body :is(.reveal, .pa-shell__head):has(> .min-w-0 > h2, > div > h2, > h2)::after {
  content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 14px; height: 3px; border-radius: 2px;
  background: var(--twine);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent);
}
html body :is(.reveal, .pa-shell__head):has(> .min-w-0 > h2, > div > h2, > h2)::before {
  content: ''; position: absolute; inset-inline-start: 46px; bottom: -6px; width: 18px; height: 24px;
  background: radial-gradient(circle at 50% 6px, var(--paper) 0 2.2px, transparent 2.6px), var(--fibre), linear-gradient(180deg, var(--tag), var(--tag-2));
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px);
  border-radius: 2px 2px 4px 4px;
  transform: rotate(-8deg); transform-origin: 50% -4px;
}
[dir="rtl"] body :is(.reveal, .pa-shell__head):has(> .min-w-0 > h2, > div > h2, > h2)::after { -webkit-mask: linear-gradient(270deg, #000 60%, transparent); mask: linear-gradient(270deg, #000 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html body .reveal.in:has(> .min-w-0 > h2)::after { animation: pa-draw 1s ease both; }
  html[dir="rtl"] body .reveal.in:has(> .min-w-0 > h2)::after { animation-name: pa-draw-rtl; }
  html body .reveal.in:has(> .min-w-0 > h2)::before { animation: pa-hang .8s cubic-bezier(.3, 1.6, .4, 1) .5s both; }
}
@keyframes pa-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pa-draw-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
html body :is(.reveal, .pa-shell__head) h2.font-display, html body .pa-shell__title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.12 !important;
}
/* The set's print for the full stop, whichever markup prints it */
html body :is(.reveal, .pa-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 .pa-stop {
  display: inline-block; width: .5em; height: .5em; margin-inline-start: .12em;
  font-size: inherit; color: transparent !important; overflow: hidden; vertical-align: baseline;
  background: var(--pa-coral);
  -webkit-mask: var(--pa-stamp) center / contain no-repeat; mask: var(--pa-stamp) center / contain no-repeat;
  transform: rotate(-12deg);
}
/* The asterisk dividers between sections become the set's print between
   two lengths of twine */
html body .w-full[aria-hidden="true"] > .flex > span.font-display {
  width: 22px; height: 22px; margin: 0 12px;
  background: var(--pa-kraft);
  -webkit-mask: var(--pa-stamp) center / contain no-repeat; mask: var(--pa-stamp) 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: 3px; border-radius: 2px; background: var(--twine) !important; opacity: .85; }

/* section-shell.php */
html body .pa-shell { position: relative; padding: 3rem 1.5rem; background: transparent; }
@media (min-width: 640px) { html body .pa-shell { padding: 4rem 1.5rem; } }
html body .pa-shell__head { position: relative; margin-bottom: 2rem; }
html body .pa-shell__title { margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.8rem); color: var(--ink); overflow-wrap: anywhere; }

/* ── View-more card: the kraft bag with the set's animal peeking out of
   it, and an enamel button to look at the rest ── */
html body .pa-vm {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  min-height: 100%; padding: 2.5rem 1.25rem 2.3rem;
  text-align: center; text-decoration: none;
  background: var(--pegboard);
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease;
}
html body .pa-vm::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--plank); z-index: -1; }
html body .pa-vm:hover, html body .pa-vm:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); }
html body .pa-vm .pa-art { width: 150px; height: auto; }
html body .pa-vm__label { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
html body .pa-vm__go {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 4px 0 var(--btn-lip);
  color: var(--btn-ink);
  transition: transform .12s ease;
}
html body .pa-vm:active .pa-vm__go { transform: translateY(3px); }
html[dir="rtl"] body .pa-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); box-shadow: var(--shadow); padding-top: 2.3rem; border: 1.5px solid var(--rule-soft); }
html body .hcb--card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--kraft); -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 4px no-repeat, var(--crimp); mask: linear-gradient(#000, #000) 0 0 / 100% 4px no-repeat, var(--crimp);
  transform: scaleY(-1);
}
html body .hcb--brand { background: radial-gradient(70% 60% at 25% 15%, rgba(255, 255, 255, .07), transparent 65%), var(--chalk); color: var(--chalk-ink); box-shadow: 0 0 0 8px var(--wood), 0 0 0 10px #6e451f, var(--shadow-md); margin: 10px; }
html body .hcb__title { font-family: var(--font-display); font-weight: 800; }
html body .hcb--brand .hcb__title { font-family: var(--font-hand); font-weight: 400; }
html body .hcb__img, html body .hcb img { border-radius: 12px; }

/* ── A product on the shelf ──
   The stage behind product pictures on cards: a bay of the pegboard wall
   with a plank the product stands on, its shadow on the wood. The wall's
   tint turns card by card through the shop's inks. */
html body .pa-stage {
  --tint: var(--pa-teal-soft);
  position: relative;
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 14px), #e2ad72 calc(100% - 14px) calc(100% - 11px), #c18a52 calc(100% - 11px) calc(100% - 4px), #9b6634 calc(100% - 4px)),
    radial-gradient(circle, rgba(92, 62, 32, .22) 0 1.8px, transparent 2.3px) 11px 11px / 22px 22px,
    linear-gradient(180deg, var(--tint), var(--tint)),
    linear-gradient(180deg, #fbf3e3, #f3e4cb) !important;
  border-color: transparent !important;
}
html.dark body .pa-stage {
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 14px), #c48f58 calc(100% - 14px) calc(100% - 12px), #8a5a2f calc(100% - 12px) calc(100% - 4px), #5f3b1b calc(100% - 4px)),
    radial-gradient(circle, rgba(0, 0, 0, .45) 0 1.8px, transparent 2.3px) 11px 11px / 22px 22px,
    radial-gradient(70% 60% at 50% 20%, rgba(245, 185, 92, .2), transparent 70%),
    linear-gradient(180deg, #2c2017, #1f160f) !important;
}
html body :is(.grid, .flex, .swiper-wrapper) > :nth-child(3n+2) .pa-stage { --tint: var(--pa-coral-soft); }
html body :is(.grid, .flex, .swiper-wrapper) > :nth-child(3n+3) .pa-stage { --tint: var(--pa-canary-soft); }
html body .pa-stage img { position: relative; z-index: 1; filter: drop-shadow(0 8px 6px rgba(58, 40, 24, .25)); padding-bottom: 12% !important; }
html.dark body .pa-stage img { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .55)); }
html body .pa-stage > .absolute { z-index: 3; }

/* Notes on a product: kraft tags (theme.css .pa-tag) in the shop's inks */
html body .pa-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
html body .pa-tag--teal { --tag: #1f8f8b; --tag-2: #177775; --tag-ink: #ffffff; }
html body .pa-tag--coral { --tag: #ec6446; --tag-2: #d9503a; --tag-ink: #ffffff; }
html body .pa-tag--leaf { --tag: #4f9655; --tag-2: #3f8547; --tag-ink: #ffffff; }
html body .pa-tag--canary { --tag: #f6cd57; --tag-2: #ecbc3a; --tag-ink: #33241a; }
html body .pa-tag--chalk { --tag: #3a4740; --tag-2: #2f3b35; --tag-ink: #f3f0e6; font-size: 12px; padding-block: .4rem; }
html body :is(.pa-tag--teal, .pa-tag--coral, .pa-tag--leaf, .pa-tag--chalk) { background-image: radial-gradient(circle at 9px 50%, var(--tag-hole) 0 2.6px, transparent 3px), linear-gradient(180deg, var(--tag), var(--tag-2)); }
html[dir="rtl"] body :is(.pa-tag--teal, .pa-tag--coral, .pa-tag--leaf, .pa-tag--chalk) { background-image: radial-gradient(circle at calc(100% - 9px) 50%, var(--tag-hole) 0 2.6px, transparent 3px), linear-gradient(180deg, var(--tag), var(--tag-2)); }
html body .pa-sc__veil { background: color-mix(in srgb, #fbf5ea 50%, transparent); }
html.dark body .pa-sc__veil { background: rgba(25, 18, 13, .55); }
html body .pa-stars { color: #d79c22; gap: 1px; }
html body .pa-free { color: var(--pa-leaf) !important; }
html body .pa-off {
  display: inline-block;
  padding: .14rem .5rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: #ffffff; background: #d9503a;
  border-radius: 999px;
}

/* Shop card */
html body .pa-sc { border-radius: var(--radius) !important; overflow: hidden; }
html body .pa-sc h3 { font-size: 1.08rem; font-weight: 600; }
html body .pa-sc .ed-price, html body .pa-sc .font-display.text-lg { color: var(--theme-600); font-family: var(--font-display) !important; font-weight: 800 !important; overflow-wrap: normal; }

/* Mystery box card: the box on the shelf, its price under a length of
   twine */
html body .pa-mb { border-radius: var(--radius) !important; overflow: hidden; }
html body .pa-mb .pa-stage { border-bottom: 0 !important; --tint: var(--pa-canary-soft); }
html body .pa-piped-line { border-top: 0; background: var(--twine) 0 0 / 100% 3px no-repeat; padding-top: calc(.75rem + 3px) !important; }

/* Investment plans: price cards with a band of ink along the top and the
   rate in the slab; the featured plan is chalked on the board. */
html body .pa-inv.ed-plan {
  background: linear-gradient(var(--pa-c4), var(--pa-c4)) 0 0 / 100% 6px no-repeat, var(--paper-2);
  padding-top: 2rem;
}
html body :is(.grid, .flex) > :nth-child(3n+2) > .pa-inv.ed-plan, html body :is(.grid, .flex) > .pa-inv.ed-plan:nth-child(3n+2) { background: linear-gradient(var(--pa-c1), var(--pa-c1)) 0 0 / 100% 6px no-repeat, var(--paper-2); }
html body :is(.grid, .flex) > :nth-child(3n+3) > .pa-inv.ed-plan, html body :is(.grid, .flex) > .pa-inv.ed-plan:nth-child(3n+3) { background: linear-gradient(var(--pa-c2), var(--pa-c2)) 0 0 / 100% 6px no-repeat, var(--paper-2); }
html body .pa-inv.ed-plan-featured { padding-top: 2rem; }
html body .pa-inv__rate {
  display: inline-block;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: clamp(2.3rem, 6vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--pa-c1);
  overflow-wrap: normal;
}
html body .pa-inv.ed-plan-featured .pa-inv__rate { color: #f6d77e; font-family: var(--font-hand) !important; font-weight: 400 !important; font-size: clamp(2.6rem, 6.5vw, 3.2rem); }

/* ── Winner ticker (components/home/winner-ticker.php): the shop's
   happy-customer board. The day's winners scroll along a pegboard strip
   on a plank, each entry a kraft tag on twine with the prize in an
   enamel bowl. The core markup has no hook of its own, so it is found by
   its track. ── */
html body div:has(> .wt-wrap) > .max-w-7xl { border-bottom: 0 !important; }
html body div:has(> .wt-wrap) > .max-w-7xl .relative.flex.h-1\.5 > span { background: #e4573d !important; }
html body .wt-wrap {
  position: relative;
  padding: 22px 0 26px;
  -webkit-mask-image: none !important; mask-image: none !important;
  background:
    linear-gradient(180deg, transparent calc(100% - 12px), #e2ad72 calc(100% - 12px) calc(100% - 9px), #c18a52 calc(100% - 9px) calc(100% - 3px), #9b6634 calc(100% - 3px)),
    var(--pegboard);
}
html.dark body .wt-wrap { background: linear-gradient(180deg, transparent calc(100% - 12px), #c48f58 calc(100% - 12px) calc(100% - 10px), #8a5a2f calc(100% - 10px) calc(100% - 3px), #5f3b1b calc(100% - 3px)), var(--pegboard); }
html body .wt-wrap .wt-card {
  position: relative;
  border-radius: 8px 8px 14px 14px;
  background: var(--fibre), linear-gradient(180deg, var(--tag), var(--tag-2));
  border: 0;
  color: var(--tag-ink);
  box-shadow: 0 8px 12px -8px rgba(58, 40, 24, .5);
  transition: transform .45s cubic-bezier(.3, 1.6, .4, 1);
  transform-origin: 50% -10px;
}
html body .wt-wrap .wt-card :is(.wt-wname, .wt-item, p, span:not(.wt-src-pill)) { color: var(--tag-ink); }
html body .wt-wrap .wt-card:hover { transform: rotate(-2deg); }
html body .wt-wrap .wt-card .wt-src-pill { border-radius: 999px; font-weight: 600; }
html body .wt-wrap .wt-tile-frame {
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 35% 30%, #ffffff, #fbf6ea 60%);
  box-shadow: inset 0 0 0 3px #1f7f7c, 0 2px 0 rgba(58, 40, 24, .25);
}
html body .wt-wrap .wt-tile-img { object-fit: contain; transform: scale(.68); }
html body .wt-wrap .wt-ava { box-shadow: 0 0 0 2px #fffaf0, 0 0 0 4px var(--theme-500); }
html body .wt-wrap .wt-wname { font-family: var(--font-display); font-weight: 800; }
html body .wt-wrap :is(.wt-val-currency, .wt-val-coins) { color: #2f6e35 !important; font-family: var(--font-display); font-weight: 800; }

/* ── Quick-look modals ──
   The quick-view dialogs (.px-quick-modal / .px-quick-panel): paper under
   a crimped kraft top. The two panels padded on their own (.p-7, .p-8)
   start their text below the band; the bid picture's frame ships in its
   plugin's stylesheet for the dialog. */
html body .px-quick-modal > .px-quick-panel {
  position: relative;
  background: var(--paper-2) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-md) !important;
  padding-top: 1.8rem;
  overflow: hidden;
}
html body .px-quick-modal > .px-quick-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 3; pointer-events: none;
  background: var(--kraft); -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 4px no-repeat, var(--crimp); mask: linear-gradient(#000, #000) 0 0 / 100% 4px no-repeat, var(--crimp);
  transform: scaleY(-1);
}
html body .px-quick-modal > .px-quick-panel:is(.p-7, .p-8) { padding-top: 2.3rem !important; }
/* The id keeps these over system.css's page-title headings. */
html :is(#px-spa-content, body) .px-quick-panel :is(h2, h3).font-display { font-family: var(--font-display); font-weight: 800; }
html body .px-quick-modal > .absolute.inset-0 { background: rgba(43, 29, 18, .62) !important; }
html body .px-quick-modal > .px-quick-panel > .relative.flex.h-52 { margin-top: 1rem; border-bottom: 0 !important; }

/* The listing pages print the same kind of head inside their own views:
   the same title, the set's print for a full stop and twine for a rule. */
html body #px-spa-content h2.font-display:is(:has(> .display-italic), :has(> span > .display-italic)) {
  font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.015em !important; line-height: 1.15;
}
html body #px-spa-content div.border-b:has(> div h2.font-display .display-italic):not(.reveal) {
  position: relative; border-bottom-color: transparent !important; padding-bottom: 1.8rem !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: 8px; height: 3px; border-radius: 2px;
  background: var(--twine);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent);
}
[dir="rtl"] body #px-spa-content div.border-b:has(> div h2.font-display .display-italic):not(.reveal)::after { -webkit-mask: linear-gradient(270deg, #000 60%, transparent); mask: linear-gradient(270deg, #000 60%, transparent); }

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

/* The add-ons' card variants (plugins/<p>/…/pet-aviary/) are printed with
   the footer; search.php never includes the footer, so the cards' paper
   is repeated here for that page. */
html body :is([class^="ed-card-"], [class*=" ed-card-"]):not(.ed-card-mystery) {
  position: relative;
  background: var(--paper-2);
  border: 1.5px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Product and prize names on the plugins' cards come from the database
   with no dir; in Arabic and Urdu an English name keeps its own order. */
html[dir="rtl"] body :is([class^="ed-card-"], [class*=" ed-card-"], .wnc, .wishlist-item) :is(h2, h3, h4) { unicode-bidi: plaintext; }

/* The plans heading picks out its words in stock yellow-400, which has
   no contrast on the cream paper; by day they are coral. */
html body h2.font-display :is(.text-yellow-400, .text-amber-400) { color: var(--pa-coral); }
html.dark body h2.font-display :is(.text-yellow-400, .text-amber-400) { color: var(--pa-canary); }

/* Section titles run wide; on phones they step down a size and wrap
   between words, never inside one. */
html body :is(.reveal, .pa-shell__head) h2.font-display { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 639px) {
  html body :is(.reveal, .pa-shell__head) h2.font-display { font-size: clamp(1.55rem, 7.4vw, 2.1rem) !important; }
}