/*
 * Plantjai reference pages v1
 * Scoped to: pet-friendly curated guide + White Fusion product 4652.
 */

body.pj-curated-guide--pet,
body.pj-specimen-page--white-fusion {
  --pj-ref-black: #0b0d0c;
  --pj-ref-panel: #111411;
  --pj-ref-bone: #f1eee4;
  --pj-ref-muted: #a7aaa2;
  --pj-ref-acid: #c9ff3d;
  --pj-ref-blue: #315dff;
  --pj-ref-line: rgba(241, 238, 228, .17);
  --pj-ref-ink: #121512;
}

/* Pet-friendly guide: dark laboratory frame, readable commerce surfaces. */
body.pj-curated-guide--pet .main-page-wrapper {
  background:
    radial-gradient(circle at 82% 7%, rgba(49, 93, 255, .16), transparent 28%),
    var(--pj-ref-black) !important;
}

body.pj-curated-guide--pet .wd-content-area.site-content {
  padding-top: clamp(20px, 3.5vw, 44px) !important;
}

body.pj-curated-guide--pet .pj-guide-hub {
  color: var(--pj-ref-bone);
}

body.pj-curated-guide--pet .pj-guide-hub__hero--pet {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid var(--pj-ref-line);
  border-radius: 0;
  background:
    linear-gradient(120deg, rgba(11, 13, 12, .98), rgba(17, 20, 17, .9)),
    radial-gradient(circle at 100% 0%, rgba(201, 255, 61, .18), transparent 45%);
  box-shadow: none;
}

body.pj-curated-guide--pet .pj-guide-hub__hero--pet::after {
  position: absolute;
  right: -7%;
  bottom: -42%;
  width: clamp(220px, 36vw, 480px);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 255, 61, .28);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 28px rgba(201, 255, 61, .025),
    0 0 80px rgba(49, 93, 255, .14);
  pointer-events: none;
}

body.pj-curated-guide--pet .pj-guide-hub__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0;
  text-align: left;
}

body.pj-curated-guide--pet .pj-guide-hub__kicker,
body.pj-curated-guide--pet .pj-pet-lab__kicker,
body.pj-curated-guide--pet .pj-pet-faq__kicker {
  color: var(--pj-ref-acid) !important;
  font-family: "IBM Plex Mono", Menlo, monospace !important;
  font-size: 10px;
  letter-spacing: .2em;
}

body.pj-curated-guide--pet .pj-guide-hub__deck {
  max-width: 780px;
  margin-bottom: 18px;
  color: var(--pj-ref-bone) !important;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
  font-size: clamp(2.75rem, 6.4vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
}

body.pj-curated-guide--pet .pj-guide-hub__lead {
  max-width: 680px;
  margin: 0 0 18px;
  color: rgba(241, 238, 228, .8);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

body.pj-curated-guide--pet .pj-guide-hub__proof {
  margin: 0 0 15px;
  color: var(--pj-ref-bone);
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
}

body.pj-curated-guide--pet .pj-guide-hub__badges {
  justify-content: flex-start;
}

body.pj-curated-guide--pet .pj-guide-hub__badges li {
  border-color: var(--pj-ref-line);
  border-radius: 0;
  background: rgba(241, 238, 228, .04);
  color: var(--pj-ref-bone);
}

body.pj-curated-guide--pet .pj-guide-hub__hero-actions {
  justify-content: flex-start;
}

body.pj-curated-guide--pet .pj-guide-hub__btn {
  min-height: 48px;
  border-radius: 0;
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

body.pj-curated-guide--pet .pj-guide-hub__btn--primary {
  border-color: var(--pj-ref-acid);
  background: var(--pj-ref-acid);
  box-shadow: none;
  color: var(--pj-ref-black) !important;
}

body.pj-curated-guide--pet .pj-guide-hub__btn--wa {
  border-color: var(--pj-ref-bone);
  background: transparent;
  color: var(--pj-ref-bone) !important;
}

body.pj-curated-guide--pet .pj-guide-hub__btn--ghost {
  border-color: var(--pj-ref-line);
  color: var(--pj-ref-muted) !important;
}

body.pj-curated-guide--pet .pj-guide-hub__note {
  color: var(--pj-ref-muted);
}

body.pj-curated-guide--pet .pj-guide-hub__jump {
  justify-content: flex-start;
  margin-bottom: 34px;
  padding: 0;
}

body.pj-curated-guide--pet .pj-guide-hub__jump-link {
  min-height: 44px;
  border-color: var(--pj-ref-line);
  border-radius: 0;
  background: var(--pj-ref-panel);
  color: var(--pj-ref-bone);
}

body.pj-curated-guide--pet .pj-guide-hub__jump-link:hover,
body.pj-curated-guide--pet .pj-guide-hub__jump-link:focus-visible {
  border-color: var(--pj-ref-acid);
  background: var(--pj-ref-acid);
  color: var(--pj-ref-black);
}

.pj-pet-lab,
.pj-pet-faq {
  margin: 0 0 clamp(44px, 7vw, 84px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--pj-ref-line);
  background: var(--pj-ref-panel);
}

.pj-pet-lab__head,
.pj-pet-faq__head {
  max-width: 760px;
  margin-bottom: 26px;
}

.pj-pet-lab__head h2,
.pj-pet-faq__head h2 {
  margin: 0;
  color: var(--pj-ref-bone) !important;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
  font-size: clamp(1.7rem, 3.3vw, 2.7rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.pj-pet-lab__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--pj-ref-line);
}

.pj-pet-lab__card {
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  background: var(--pj-ref-black);
}

.pj-pet-lab__code {
  display: block;
  margin-bottom: 26px;
  color: var(--pj-ref-acid);
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: .18em;
}

.pj-pet-lab__card h3 {
  margin: 0 0 10px;
  color: var(--pj-ref-bone) !important;
  font-size: 1.08rem;
}

.pj-pet-lab__card p {
  margin: 0;
  color: var(--pj-ref-muted);
  font-size: .92rem;
  line-height: 1.7;
}

body.pj-curated-guide--pet .pj-guide-section__head {
  text-align: left;
}

body.pj-curated-guide--pet .pj-guide-section__title,
body.pj-curated-guide--pet .pj-guide-hub__tips-title {
  color: var(--pj-ref-bone) !important;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
}

body.pj-curated-guide--pet .pj-guide-section__title {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
}

body.pj-curated-guide--pet .pj-guide-section__subtitle {
  color: var(--pj-ref-muted);
}

body.pj-curated-guide--pet .pj-guide-hub__tip {
  border-color: var(--pj-ref-line);
  border-radius: 0;
  background: var(--pj-ref-panel);
}

body.pj-curated-guide--pet .pj-guide-hub__tip-num {
  color: var(--pj-ref-acid);
  font-family: "IBM Plex Mono", Menlo, monospace;
}

body.pj-curated-guide--pet .pj-guide-hub__tip-title {
  color: var(--pj-ref-bone);
  font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
}

body.pj-curated-guide--pet .pj-guide-hub__tip-body p {
  color: var(--pj-ref-muted);
}

body.pj-curated-guide--pet .pj-guide-hub__convert {
  border-color: var(--pj-ref-acid);
  border-radius: 0;
  background: var(--pj-ref-acid);
}

body.pj-curated-guide--pet .pj-guide-hub__convert-text {
  color: var(--pj-ref-black);
  font-weight: 600;
}

body.pj-curated-guide--pet .pj-guide-hub__convert .pj-guide-hub__btn--wa {
  border-color: var(--pj-ref-black);
  background: var(--pj-ref-black);
  color: var(--pj-ref-bone) !important;
}

body.pj-curated-guide--pet .pj-guide-section .wd-product {
  border: 1px solid rgba(11, 13, 12, .14);
  background: var(--pj-ref-bone);
}

body.pj-curated-guide--pet .pj-guide-section .wd-product .wd-add-btn a.add-to-cart-loop,
body.pj-curated-guide--pet .pj-guide-section .wd-product .wd-add-btn a.button {
  border-color: var(--pj-ref-black) !important;
  background: var(--pj-ref-black) !important;
  color: var(--pj-ref-bone) !important;
}

.pj-pet-faq__list {
  border-top: 1px solid var(--pj-ref-line);
}

.pj-pet-faq__item {
  border-bottom: 1px solid var(--pj-ref-line);
}

.pj-pet-faq__item summary {
  position: relative;
  min-height: 58px;
  padding: 18px 44px 18px 0;
  color: var(--pj-ref-bone);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

.pj-pet-faq__item summary::-webkit-details-marker {
  display: none;
}

.pj-pet-faq__item summary::after {
  position: absolute;
  top: 18px;
  right: 2px;
  color: var(--pj-ref-acid);
  content: "+";
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 20px;
}

.pj-pet-faq__item[open] summary::after {
  content: "−";
}

.pj-pet-faq__item p {
  max-width: 760px;
  margin: 0;
  padding: 0 44px 20px 0;
  color: var(--pj-ref-muted);
  line-height: 1.75;
}

body.pj-curated-guide--pet :where(a, summary):focus-visible {
  outline: 3px solid var(--pj-ref-acid);
  outline-offset: 3px;
}

/* White Fusion: commerce-first specimen page. */
body.pj-specimen-page--white-fusion .main-page-wrapper {
  background:
    radial-gradient(circle at 12% 2%, rgba(201, 255, 61, .1), transparent 22%),
    radial-gradient(circle at 88% 13%, rgba(49, 93, 255, .13), transparent 26%),
    var(--pj-ref-black) !important;
}

body.pj-specimen-page--white-fusion .single-breadcrumbs-wrapper {
  border-bottom: 1px solid var(--pj-ref-line);
  background: var(--pj-ref-black) !important;
}

body.pj-specimen-page--white-fusion .single-breadcrumbs-wrapper,
body.pj-specimen-page--white-fusion .single-breadcrumbs-wrapper a {
  color: var(--pj-ref-muted) !important;
}

body.pj-specimen-page--white-fusion .summary .single-breadcrumbs-wrapper .wd-last,
body.pj-specimen-page--white-fusion .summary .single-breadcrumbs-wrapper [aria-current="page"] {
  color: var(--pj-ref-bone) !important;
}

body.pj-specimen-page--white-fusion .product-image-summary-wrap {
  position: relative;
  border: 0 !important;
  border-top: 4px solid var(--pj-ref-acid) !important;
  border-radius: 0 !important;
  background: var(--pj-ref-bone) !important;
  box-shadow: none !important;
}

body.pj-specimen-page--white-fusion .product-image-summary-wrap::before {
  position: absolute;
  z-index: 3;
  top: -4px;
  right: 0;
  padding: 8px 12px;
  background: var(--pj-ref-acid);
  color: var(--pj-ref-black);
  content: "LIVE SPECIMEN";
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

body.pj-specimen-page--white-fusion .woocommerce-product-gallery {
  border: 1px solid rgba(11, 13, 12, .22);
  background: #fff;
}

body.pj-specimen-page--white-fusion .summary .pj-product-title__en {
  color: var(--pj-ref-blue) !important;
}

body.pj-specimen-page--white-fusion .summary .pj-product-title__zh {
  color: var(--pj-ref-ink) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

.pj-wf-observation {
  margin: 4px 0 16px;
  padding: 14px 15px;
  border-left: 4px solid var(--pj-ref-blue);
  background: rgba(49, 93, 255, .07);
}

.pj-wf-observation__kicker {
  margin: 0 0 10px !important;
  color: var(--pj-ref-blue) !important;
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .16em;
}

.pj-wf-observation__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
}

.pj-wf-observation__facts li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--pj-ref-ink);
  font-size: 11px;
}

.pj-wf-observation__facts strong {
  color: var(--pj-ref-blue);
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 9px;
  letter-spacing: .08em;
}

.pj-wf-observation__note {
  margin: 0 !important;
  color: #50564f !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

body.pj-specimen-page--white-fusion .summary .pj-care-spec {
  border-color: var(--pj-ref-line);
  background: var(--pj-ref-panel);
}

body.pj-specimen-page--white-fusion .summary .pj-care-spec__title,
body.pj-specimen-page--white-fusion .summary .pj-care-spec__row dd,
body.pj-specimen-page--white-fusion .summary .pj-care-spec__icon {
  color: var(--pj-ref-bone) !important;
}

body.pj-specimen-page--white-fusion .summary .pj-care-spec__kicker,
body.pj-specimen-page--white-fusion .summary .pj-care-spec__row dt,
body.pj-specimen-page--white-fusion .summary .pj-care-spec__note {
  color: var(--pj-ref-muted) !important;
}

body.pj-specimen-page--white-fusion .summary .pj-care-spec__row,
body.pj-specimen-page--white-fusion .summary .pj-care-spec__note {
  border-color: var(--pj-ref-line);
}

body.pj-specimen-page--white-fusion .single_add_to_cart_button {
  border-color: var(--pj-ref-acid) !important;
  background: var(--pj-ref-acid) !important;
  color: var(--pj-ref-black) !important;
}

body.pj-specimen-page--white-fusion .summary .pj-whatsapp-cta,
body.pj-specimen-page--white-fusion .summary a[href*="wa.me"] {
  border-radius: 0 !important;
}

.pj-wf-field {
  margin: 0 0 24px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--pj-ref-line);
  background: var(--pj-ref-panel);
  color: var(--pj-ref-bone);
}

.pj-wf-field__head {
  max-width: 820px;
  margin-bottom: 30px;
}

.pj-wf-field__kicker {
  margin: 0 0 10px;
  color: var(--pj-ref-acid);
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: .2em;
}

.pj-wf-field__head h2 {
  margin: 0 0 12px;
  color: var(--pj-ref-bone) !important;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}

.pj-wf-field__head > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--pj-ref-muted);
  line-height: 1.7;
}

.pj-wf-field__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 28px;
  padding: 1px;
  list-style: none;
  background: var(--pj-ref-line);
}

.pj-wf-field__grid li {
  padding: clamp(20px, 3vw, 32px);
  background: var(--pj-ref-black);
}

.pj-wf-field__grid span {
  display: block;
  margin-bottom: 24px;
  color: var(--pj-ref-blue);
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 9px;
  letter-spacing: .14em;
}

.pj-wf-field__grid h3 {
  margin: 0 0 10px;
  color: var(--pj-ref-bone) !important;
  font-size: 1.08rem;
}

.pj-wf-field__grid p {
  margin: 0;
  color: var(--pj-ref-muted);
  font-size: .92rem;
  line-height: 1.7;
}

.pj-wf-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pj-wf-field__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--pj-ref-line);
  color: var(--pj-ref-bone) !important;
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-decoration: none !important;
}

.pj-wf-field__actions .pj-wf-field__primary {
  border-color: var(--pj-ref-acid);
  background: var(--pj-ref-acid);
  color: var(--pj-ref-black) !important;
}

body.pj-specimen-page--white-fusion .woocommerce-tabs,
body.pj-specimen-page--white-fusion .wd-accordion.wd-style-tabs,
body.pj-specimen-page--white-fusion .related.products {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--pj-ref-bone) !important;
  box-shadow: none !important;
}

body.pj-specimen-page--white-fusion :where(a, button, summary):focus-visible {
  outline: 3px solid var(--pj-ref-acid);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  body.pj-curated-guide--pet .pj-guide-hub__hero--pet {
    padding: 28px 20px;
  }

  body.pj-curated-guide--pet .pj-guide-hub__deck {
    font-size: clamp(2.65rem, 14vw, 4rem);
  }

  body.pj-curated-guide--pet .pj-guide-hub__hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.pj-curated-guide--pet .pj-guide-hub__hero-actions .pj-guide-hub__btn {
    display: flex !important;
    flex: initial !important;
    width: 100%;
    min-height: 48px;
    white-space: normal !important;
    text-align: center;
  }

  .pj-pet-lab,
  .pj-pet-faq,
  .pj-wf-field {
    padding: 22px 16px;
  }

  .pj-pet-lab__grid,
  .pj-wf-field__grid {
    grid-template-columns: 1fr;
  }

  body.pj-curated-guide--pet .pj-guide-hub__sticky {
    border: 1px solid var(--pj-ref-line);
    border-radius: 0;
    background: rgba(11, 13, 12, .96);
  }

  body.pj-curated-guide--pet .pj-guide-hub__sticky-shop {
    border-radius: 0;
    background: var(--pj-ref-acid);
    color: var(--pj-ref-black) !important;
  }

  body.pj-curated-guide--pet .pj-guide-hub__sticky-wa {
    border-radius: 0;
    background: var(--pj-ref-blue);
  }

  body.pj-specimen-page--white-fusion .product-image-summary-wrap {
    padding: 14px !important;
  }

  body.pj-specimen-page--white-fusion .summary .pj-product-title__zh {
    font-size: clamp(1.85rem, 9.5vw, 2.45rem) !important;
  }

  .pj-wf-observation__facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pj-wf-field__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pj-curated-guide--pet *,
  body.pj-specimen-page--white-fusion * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
