/* ── HEALTH PACKAGE CATALOGUE & SINGLE PAGE STYLES ─────────────── */
/* Reuses design tokens from partials/site-head.php (--p-ink, --p-amber, etc.) */

.ph-hero, .ph-single-hero {
  background: var(--p-night);
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid oklch(100% 0 0 / 0.07);
}
.ph-hero h1, .ph-single-hero h1 { color: oklch(97.5% 0.006 250); margin-bottom: 12px; }
.ph-hero .lead, .ph-single-name-cn { color: oklch(100% 0 0 / 0.60); font-size: 16px; }
.ph-single-name-cn { margin-top: 4px; }

.ph-hero .page-breadcrumb, .ph-single-hero .page-breadcrumb { color: oklch(97.5% 0.006 250); margin-bottom: 16px; font-size: 13px; }
.ph-hero .page-breadcrumb a, .ph-single-hero .page-breadcrumb a { color: oklch(97.5% 0.006 250); }

/* Hero package image (single package page) — added post-brief per Task 7
   code-review fix; matches the rounded-corner language of .ph-card and
   sits within the dark .ph-single-hero section above the title. */
.ph-single-hero-image {
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 6px;
}

.ph-single-hero-price {
  font-family: var(--p-serif); font-size: 40px; color: var(--p-amber);
  margin-bottom: 8px;
}
.ph-single-hero-cities {
  font-size: 14px; color: oklch(100% 0 0 / 0.55); margin-bottom: 20px;
}
.ph-single-hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin-bottom: 24px; padding: 0;
}
.ph-single-hero-trust li {
  font-size: 13px; font-weight: 600; color: oklch(100% 0 0 / 0.85);
  padding-left: 20px; position: relative;
}
.ph-single-hero-trust li::before {
  content: '\2713'; position: absolute; left: 0; color: var(--p-amber); font-weight: 700;
}
.ph-single-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ph-single-hero-microcopy { font-size: 13px; color: oklch(100% 0 0 / 0.50); }
.ph-single-hero-microcopy a { color: oklch(100% 0 0 / 0.75); text-decoration: underline; }

/* ── CATALOGUE SECTION WRAPPER ─────────────────────────────────── */
.ph-catalogue { background: var(--p-paper); }

/* ── FILTER BAR ─────────────────────────────────────────────────── */
.ph-filter-bar { margin-bottom: 32px; }
.ph-filter-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ph-filter-group { display: flex; flex-direction: column; gap: 4px; }
.ph-filter-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-3); }
.ph-filter-group select {
  padding: 8px 12px; border: 1px solid var(--p-rule); border-radius: 4px;
  font-size: 14px; color: var(--p-ink); background: var(--p-paper); min-width: 160px;
}
.ph-filter-count { margin-left: auto; font-size: 13px; color: var(--p-ink-3); }
.ph-filter-type-groups, .ph-filter-price-options {
  border: 1px solid var(--p-rule); border-radius: 4px;
  background: var(--p-paper); padding: 8px 12px;
}
.ph-filter-type-groups { display: flex; gap: 20px; flex-wrap: wrap; }
.ph-filter-type-subgroup { border: none; padding: 0; margin: 0; }
.ph-filter-type-subgroup legend { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ink-3); margin-bottom: 4px; padding: 0; }
.ph-filter-checkbox, .ph-filter-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--p-ink-2); margin-bottom: 4px; cursor: pointer; }
.ph-filter-price-options { display: flex; flex-direction: column; gap: 2px; }

/* ── GRID / CARD ────────────────────────────────────────────────── */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ph-card {
  background: var(--p-paper); border: 1px solid var(--p-rule); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.ph-card:hover { box-shadow: 0 8px 32px oklch(17% 0.009 250 / 0.10); transform: translateY(-2px); }
.ph-card-media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--p-paper-3); }
.ph-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-card-badge {
  position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--p-amber-bg); color: var(--p-amber-d); border: 1px solid var(--p-amber-line);
}
/* Badge variants (class is built dynamically as ph-card-badge-featured /
   ph-card-badge-bestseller from the lowercased badge label). Both reuse
   the same amber tokens as the base .ph-card-badge; kept as no-op
   selectors so intent is explicit if the two ever need to diverge. */
.ph-card-badge-featured, .ph-card-badge-bestseller { /* inherits .ph-card-badge styling */ }
.ph-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ph-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; background: var(--p-paper-3); color: var(--p-ink-2);
}
/* Tag variants (category/city/provider) share the base .ph-tag look;
   declared so every class emitted by package-card.php has an explicit rule. */
.ph-tag-category, .ph-tag-city, .ph-tag-provider { /* inherits .ph-tag styling */ }
.ph-tag-nationwide { background: var(--p-amber-bg); color: var(--p-amber-d); border: 1px solid var(--p-amber-line); }
.ph-card-name { font-family: var(--p-serif); font-size: 19px; font-weight: 400; line-height: 1.25; }
.ph-card-name a { color: var(--p-ink); }
.ph-card-price { font-family: var(--p-serif); font-size: 22px; color: var(--p-amber-d); }
.ph-card-excerpt {
  font-size: 13px; color: var(--p-ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-card-cta { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--p-amber-d); }

.ph-empty { text-align: center; padding: 64px 24px; color: var(--p-ink-3); }
.ph-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ph-pagination a, .ph-pagination span {
  padding: 8px 14px; border: 1px solid var(--p-rule); border-radius: 4px; font-size: 13px; color: var(--p-ink-2);
}
.ph-pagination .current { background: var(--p-amber-bg); border-color: var(--p-amber-line); color: var(--p-amber-d); }

/* ── SINGLE PAGE ────────────────────────────────────────────────── */
.ph-single-info-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.ph-single-price { font-family: var(--p-serif); font-size: 32px; color: var(--p-amber-d); }
.ph-single-meta { font-size: 13px; color: var(--p-ink-3); margin-top: 4px; }
.ph-single-suitable { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ph-single-suitable li { font-size: 14px; color: var(--p-ink-2); }

/* .ph-single-price (old price-in-info-block rule) is superseded by
   .ph-single-hero-price above — Task 4 removed the markup that used it,
   so no CSS cleanup is needed here; the old rule is simply unused now
   and left in place rather than risk deleting a rule another page might
   reference (none do, but removing dead CSS is not this task's job). */

.ph-card-related { max-width: none; }
.ph-card-related .ph-card-body { padding: 14px; gap: 6px; }
.ph-card-related .ph-card-name { font-size: 16px; }
.ph-card-related .ph-card-price { font-size: 18px; }

.ph-single-tests-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.ph-single-tests-list li { font-size: 14px; color: var(--p-ink-2); padding-left: 20px; position: relative; }
.ph-single-tests-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--p-amber); font-weight: 700; }
.ph-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.ph-gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.ph-visit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.ph-visit-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--p-rule);
  border-radius: 6px; text-decoration: none; transition: border-color .15s;
}
.ph-visit-card:hover { border-color: var(--p-amber-line); }
.ph-visit-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; }
.ph-visit-name { font-weight: 600; color: var(--p-ink); }
.ph-visit-note { font-size: 12px; color: var(--p-ink-3); }
.ph-visit-link { font-size: 13px; font-weight: 600; color: var(--p-amber-d); }

/* Single-page section wrappers — these sit on <section> elements that
   already get their vertical rhythm from the global .sec / .sec-sm
   utility classes in site-head.php; the alternating paper-2 background
   here simply separates stacked sections visually, matching the
   paper/paper-2 banding convention used elsewhere on the site. */
.ph-single-info { background: var(--p-paper); }
.ph-single-tests { background: var(--p-paper-2); }
.ph-single-description { background: var(--p-paper); }
.ph-single-gallery { background: var(--p-paper-2); }
.ph-single-visit { background: var(--p-paper); }
.ph-single-cta { background: var(--p-amber-bg); border-top: 1px solid var(--p-amber-line); }
.ph-single-need-help { background: var(--p-paper-2); }
.ph-single-related { background: var(--p-paper); }
.ph-single-why { background: var(--p-paper); }

/* ── FAQ ────────────────────────────────────────────────────────── */
.ph-faq { background: var(--p-paper-2); }
.ph-faq-list { max-width: 760px; margin: 24px auto 0; border: 1px solid var(--p-rule); border-radius: 6px; overflow: hidden; }
.ph-faq-item { border-bottom: 1px solid var(--p-rule); }
.ph-faq-item:last-child { border-bottom: none; }
.ph-faq-q {
  width: 100%; text-align: left; background: var(--p-paper); padding: 16px 18px;
  font-size: 14px; font-weight: 600; color: var(--p-ink); cursor: pointer; border: none;
}
.ph-faq-q[aria-expanded="true"] { background: var(--p-amber-bg); }
.ph-faq-a { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.ph-faq-a.open { max-height: 300px; padding: 0 18px 16px; }
.ph-faq-a p { font-size: 13px; color: var(--p-ink-2); line-height: 1.7; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ph-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-single-info-grid { grid-template-columns: 1fr; }
  .ph-single-tests-list { grid-template-columns: 1fr; }
  .ph-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ph-grid { grid-template-columns: 1fr; }
  .ph-filter-form { flex-direction: column; align-items: stretch; }
  .ph-filter-group select { min-width: 0; width: 100%; }
  .ph-filter-type-groups { flex-direction: column; gap: 12px; }
  .ph-visit-grid { grid-template-columns: 1fr; }
  .ph-single-hero-image { max-width: 100%; }
}

/* ── SINGLE PACKAGE PAGE ONLY: CHATY SUPPRESSION ─────────────────────── */
/* Follows the identical pattern already established in
   page/destinations/template-destinations.php. This file
   (assets/health-package.css) is loaded by archive-health_package.php,
   the three taxonomy-*.php templates, AND single-health_package.php —
   so this rule cannot live in the shared file without also hiding Chaty
   on the archive/taxonomy pages, which must keep Chaty visible. This
   selector is therefore scoped with a body class that only
   single-health_package.php's own <body> carries (added in Task 6),
   not a bare global selector. */
body.ph-single-package [id*="chaty"], body.ph-single-package [class*="chaty"] {
  display: none !important;
}

/* ── STICKY MOBILE CTA (single package page only) ────────────────────── */
.ph-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: -100px; z-index: 150;
  background: var(--p-night); border-top: 1px solid oklch(100% 0 0 / 0.12);
  padding: 14px var(--pad); display: none; align-items: center; justify-content: center; gap: 16px;
  transition: bottom .25s ease-out; box-shadow: 0 -8px 24px oklch(17% 0.009 250 / 0.18);
}
.ph-sticky-cta.ph-sticky-cta-visible { bottom: 0; }
@media (max-width: 640px) {
  .ph-sticky-cta { display: flex; }
}

/* ── CONTENT INTELLIGENCE (blog post recommendation block) ──────── */
.ci-section { border-top: 1px solid var(--p-rule); }
.ci-heading { font-family: var(--p-serif); font-size: clamp(22px, 2.8vw, 32px); font-weight: 400; color: var(--p-ink); margin-bottom: 8px; }
.ci-intro { font-size: 15px; color: var(--p-ink-2); line-height: 1.7; margin-bottom: 24px; max-width: 640px; }
.ci-package-grid { margin-bottom: 40px; }
.ci-subheading { font-family: var(--p-serif); font-size: 20px; font-weight: 400; color: var(--p-ink); margin: 32px 0 12px; }
.ci-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.ci-tag-list li a {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--p-rule); font-size: 13px; color: var(--p-ink-2);
  transition: border-color .15s, color .15s;
}
.ci-tag-list li a:hover { border-color: var(--p-amber-line); color: var(--p-amber-d); }
.ci-tag-list-plain li {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--p-paper-2); font-size: 13px; color: var(--p-ink-2);
}
.ci-faq-item { border-bottom: 1px solid var(--p-rule); }
.ci-faq-item:first-of-type { border-top: 1px solid var(--p-rule); }
.ci-faq-item summary {
  cursor: pointer; padding: 16px 4px; font-weight: 600; font-size: 15px;
  color: var(--p-ink); list-style: none;
}
.ci-faq-item summary::-webkit-details-marker { display: none; }
.ci-faq-item p { padding: 0 4px 16px; font-size: 15px; color: var(--p-ink-2); line-height: 1.75; }

/* ============================================================
   PKG-CARD  ·  Private Bank Ledger card (faithful port of
   china-care/card-system/index.html · Stream C — the "version
   prototype"). Self-contained tokens so it never leaks into or
   depends on the global --p-* / tokens.css. Charcoal primary CTA
   (amber on hover), .tag pills, ¥ + ~US$ price, decorative bookmark.
   Reversible: delete this block to revert.
   ============================================================ */
.pkg-card{
  /* --- self-contained tokens (Private Bank Ledger DNA) --- */
  --ivory-2:#EFE8DB;
  --card:#FFFDF9;
  --line:#E4DACB;
  --line-strong:#CDBE9F;
  --charcoal:#2B2622;
  --charcoal-soft:#5C544B;
  --muted:#8A8178;
  --amber:#C8912F;
  --amber-soft:#FBEEDD;
  --amber-rgb:200,145,47;
  --ivory-rgb:247,243,236;
  --color-charcoal:var(--charcoal);
  --color-accent:#C8912F;
  --color-on-accent:#FFFFFF;
  --color-surface:var(--card);
  --font-serif:"DM Serif Display",Georgia,"Times New Roman","Songti SC",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(43,38,34,.05),0 8px 24px rgba(43,38,34,.07);
  --shadow-hover:0 4px 10px rgba(43,38,34,.09),0 18px 40px rgba(200,145,47,.14);
  --transition-fast:.15s ease;
  --transition-slow:.5s cubic-bezier(.2,.7,.2,1);
  --space-sm:8px;
  /* per-variant knobs (overridden by modifiers) */
  --hero-ratio:1.5;
  --pad:22px;
  --title:19px;
  --gap:16px;
  /* base card */
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.pkg-card:hover{
  border-color:var(--amber);
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
}

/* --- hero (image block) --- */
.pkg-hero{
  position:relative;
  aspect-ratio:var(--hero-ratio);
  background:var(--ivory-2);
  overflow:hidden;
}
.pkg-hero-link{display:block;width:100%;height:100%;}
.pkg-hero img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--transition-slow);
}
.pkg-hero img.crop-exec{object-position:50% 38%;}     /* person 70% / space 30% */
.pkg-hero img.crop-report{object-position:50% 55%;}   /* person 50% / desk 50%  */
.pkg-hero img.crop-senior{object-position:50% 30%;}   /* person 80% / space 20% */
.pkg-hero img.crop-airport{object-position:50% 45%;}  /* person 60% / space 40% */
.pkg-hero img.crop-generic{object-position:50% 45%;}
.pkg-card:hover .pkg-hero img{transform:scale(1.045);}

.pkg-hero .badge-row{position:absolute;top:14px;left:14px;display:flex;gap:7px;flex-wrap:wrap;z-index:2;}
.hero-badge{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;
  background:rgba(247,243,236,.92);color:var(--charcoal);
  backdrop-filter:blur(2px);
}
.hero-badge.amber{background:rgba(200,145,47,.94);color:#fff;}

/* bookmark — interactive save toggle (click handler ported from card-system) */
.pkg-bookmark{
  position:absolute;top:14px;right:14px;z-index:3;
  width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(247,243,236,.92);border:1px solid rgba(43,38,34,.10);
  color:var(--charcoal);backdrop-filter:blur(2px);
  transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);
}
.pkg-bookmark svg{width:17px;height:17px;}
.pkg-bookmark:hover{color:var(--amber);border-color:var(--amber);transform:scale(1.06);}
.pkg-bookmark.saved{color:#fff;background:var(--amber);border-color:var(--amber);}
.pkg-bookmark.saved svg{color:#fff;}

/* --- body --- */
.pkg-body{padding:calc(var(--pad) + 10px) var(--pad) var(--pad);display:flex;flex-direction:column;gap:var(--gap);flex:1;}

/* title */
.pkg-title{font-family:var(--font-serif);font-weight:600;font-size:var(--title);line-height:1.25;letter-spacing:.2px;margin:0;color:var(--charcoal);}
.pkg-title a{color:var(--charcoal);text-decoration:none;}
.pkg-title a:hover{color:var(--amber);}

/* subtitle (prototype .pkg-sub) */
.pkg-sub{
  margin:0;font-size:13px;color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* tags -> text pills (prototype .tag-pill look, scoped to the card) */
.pkg-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);}
.pkg-card .tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;width:auto;height:auto;
  background:var(--ivory-2);color:var(--charcoal-soft);border:1px solid var(--line);
  cursor:default;transition:border-color var(--transition-fast),color var(--transition-fast);
}
.pkg-card .tag:hover{border-color:var(--amber);color:var(--amber);}
.pkg-card .tag.tag-accent{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-soft);}

/* price (serif, prominent; ¥ + ~US$ secondary) */
.pkg-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.pkg-price .amt{font-family:var(--font-serif);font-size:25px;font-weight:600;color:var(--charcoal);letter-spacing:.2px;}
.pkg-price .amt .cur{font-size:16px;margin-right:1px;color:var(--amber);}
.pkg-price .usd{font-size:11.5px;color:var(--muted);letter-spacing:.02em;}
.pkg-price .usd b{color:var(--charcoal-soft);font-weight:600;font-family:var(--font-serif);}

/* CTA: charcoal -> amber on card hover (DNA) */
.pkg-card .btn{margin-top:auto;font-family:var(--font-sans);}
.pkg-card .btn--primary{background:var(--color-charcoal);color:#fff;border-color:var(--color-charcoal);}
.pkg-card .btn--primary:hover{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 6px 18px rgba(200,145,47,.28);}
.pkg-card .btn--block{display:flex;width:100%;}

/* --- VARIANT MODIFIERS --- */
/* A · Archive — 16:10 hero (the workhorse) */
.pkg-card--a{--hero-ratio:1.6;--pad:18px;--title:18px;--gap:13px;}
.pkg-card--a .pkg-price .amt{font-size:25px;}
/* B · Featured — 75% hero (homepage, larger/wider) */
.pkg-card--b{--hero-ratio:1.18;--pad:24px;--title:22px;--gap:16px;}
.pkg-card--b .pkg-price .amt{font-size:31px;}
/* C · Related — 50% hero, image + name + price only */
.pkg-card--c{--hero-ratio:1.95;--pad:16px;--title:16px;--gap:11px;}
.pkg-card--c .pkg-sub{display:none;}
.pkg-card--c .pkg-tags{display:none;}
.pkg-card--c .pkg-price .amt{font-size:19px;}

/* --- archive grid (caps each card at 320px, centres the row) --- */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:22px;justify-content:center;}
.pkg-grid > .pkg-card{max-width:320px;}

/* responsive */
@media (max-width:640px){
  .pkg-card--c{--hero-ratio:1.6;}
  .pkg-grid{grid-template-columns:1fr;}
}


/* ===== Filter bar (Private Bank Ledger reskin, server-driven) ===== */
.filterbar{
  --fb-card:#FFFDF9; --fb-line:#E4DACB; --fb-line-strong:#CDBE9F;
  --fb-charcoal:#2B2622; --fb-charcoal-soft:#5C544B; --fb-muted:#8A8178;
  --fb-amber:#C8912F; --fb-amber-soft:#FBEEDD; --fb-ivory:#F7F2EA;
  --fb-radius:10px; --fb-shadow:0 2px 8px rgba(0,0,0,.04); --fb-shadow-hover:0 8px 24px rgba(0,0,0,.1);
  background:var(--fb-card);
  border:1px solid var(--fb-line);
  border-radius:var(--fb-radius);
  padding:22px 24px;
  box-shadow:var(--fb-shadow);
  margin-bottom:26px;
}
.fbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;}
.fgroup{display:flex;flex-direction:column;gap:10px;flex:1 1 220px;min-width:200px;}
.flabel{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fb-charcoal);}
.flabel .fmode{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fb-amber);background:var(--fb-amber-soft);padding:2px 7px;border-radius:999px;}
.dropdown{position:relative;}
.dd-trigger{display:flex;align-items:center;gap:10px;width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--fb-charcoal);background:var(--fb-ivory);border:1px solid var(--fb-line-strong);padding:11px 15px;border-radius:10px;cursor:pointer;text-align:left;transition:border-color .18s ease,box-shadow .18s ease;}
.dd-trigger .dd-cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-trigger:hover{border-color:var(--fb-amber);}
.dd-caret{width:16px;height:16px;color:var(--fb-charcoal-soft);flex:none;transition:transform .2s ease,color .18s ease;}
.dropdown.open .dd-trigger{border-color:var(--fb-amber);box-shadow:0 0 0 3px var(--fb-amber-soft);}
.dropdown.open .dd-caret{transform:rotate(180deg);color:var(--fb-amber);}
.dd-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--fb-card);border:1px solid var(--fb-line-strong);border-radius:12px;box-shadow:var(--fb-shadow-hover);padding:6px;max-height:320px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.dropdown.open .dd-panel{opacity:1;visibility:visible;transform:translateY(0);}
.dd-group + .dd-group{border-top:1px solid var(--fb-line);margin-top:2px;}
.dd-ghead{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--fb-muted);padding:11px 12px 6px;}
.dd-opt{display:flex;align-items:center;gap:10px;width:100%;font-size:14px;color:var(--fb-charcoal-soft);background:none;border:none;border-radius:8px;cursor:pointer;padding:10px 12px;text-align:left;transition:background .15s ease,color .15s ease;}
.dd-opt:hover{background:var(--fb-ivory);color:var(--fb-charcoal);}
.dd-opt.is-on{color:var(--fb-charcoal);font-weight:600;background:var(--fb-amber-soft);}
.dd-opt .dd-name{flex:1;}
.dd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dd-tick{width:16px;height:16px;color:var(--fb-amber);flex:none;opacity:0;transition:opacity .15s ease;}
.dd-opt.is-on .dd-tick{opacity:1;}
.dd-opt.mul{display:flex;align-items:center;gap:10px;}
.dd-box{width:17px;height:17px;border:1.5px solid var(--fb-line-strong);border-radius:5px;flex:none;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease;}
.dd-box svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .15s ease;}
.dd-opt.mul.is-on .dd-box{background:var(--fb-amber);border-color:var(--fb-amber);}
.dd-opt.mul.is-on .dd-box svg{opacity:1;}
.fmeta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap;}
.fmeta #resultCount{font-size:13px;color:var(--fb-charcoal-soft);}
.fmeta #resultCount b{color:var(--fb-charcoal);font-weight:600;}
.fclear{font-size:12.5px;font-weight:600;color:var(--fb-amber);background:none;border:none;cursor:pointer;padding:4px 2px;text-decoration:none;transition:color .18s ease;}
.fclear:hover{color:var(--fb-charcoal);}
@media (max-width:768px){
  .fbar{gap:14px;}
  .fgroup{flex:1 1 100%;min-width:0;}
}

/* ============================================================
   Single Package (普通版) — Private Bank Ledger visual upgrade
   Scoped under body.ph-single-package. Self-contained tokens so it
   mirrors the New Design detail page's look without sharing its CSS
   file. The two detail templates keep distinct content structure but
   a unified brand visual. Reversible: delete this block to revert.
   ============================================================ */
.ph-single-package{
  --pbl-amber:#C8912F; --pbl-amber-soft:#EFE2CC; --pbl-charcoal:#2B2622;
  --pbl-ivory:#F7F3EC; --pbl-line:#E4DDD0; --pbl-surface:#FBF8F2;
  --pbl-muted:#7A7163; --pbl-radius:12px; --pbl-pill:999px;
  --pbl-shadow:0 10px 34px rgba(43,38,34,.08);
  --pbl-serif:Georgia,'Times New Roman',serif;
  background:var(--pbl-ivory); color:var(--pbl-charcoal);
}
.ph-single-package .wrap{max-width:1080px;}

/* hero -> light Private Bank Ledger */
.ph-single-package .ph-single-hero{
  background:linear-gradient(180deg,#ffffff 0%,var(--pbl-surface) 100%);
  border-bottom:1px solid var(--pbl-line); padding:46px 0 36px;
}
.ph-single-package .ph-single-hero .page-breadcrumb,
.ph-single-package .ph-single-hero .page-breadcrumb a{color:var(--pbl-muted);}
.ph-single-package .ph-single-hero-image{
  width:100%; height:320px; object-fit:cover; display:block;
  border-radius:var(--pbl-radius); border:1px solid var(--pbl-line);
  margin-bottom:22px; box-shadow:var(--pbl-shadow);
}
.ph-single-package .ph-single-hero h1{
  font-family:var(--pbl-serif); font-weight:400; font-size:36px; line-height:1.14;
  color:var(--pbl-charcoal); margin:6px 0 14px;
}
.ph-single-package .ph-single-hero-cities{font-size:13px; color:var(--pbl-muted);}
.ph-single-package .ph-single-hero-price{font-size:19px; font-weight:700; color:var(--pbl-amber); margin-bottom:14px;}
.ph-single-package .ph-single-hero-trust{list-style:none; display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:0 0 18px;}
.ph-single-package .ph-single-hero-trust li{position:relative; padding-left:24px; font-size:14px; color:var(--pbl-muted);}
.ph-single-package .ph-single-hero-trust li::before{content:""; position:absolute; left:0; top:2px; width:15px; height:15px; border-radius:50%; background:var(--pbl-amber);}
.ph-single-package .ph-single-hero-trust li::after{content:""; position:absolute; left:5px; top:5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.ph-single-package .ph-single-hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.ph-single-package .ph-single-hero-microcopy{font-size:13px; color:var(--pbl-muted);}
.ph-single-package .ph-single-hero-microcopy a{color:var(--pbl-amber); text-decoration:underline;}

/* section headings -> serif + amber rule */
.ph-single-package .sec-sm{padding:38px 0;}
.ph-single-package .sec-sm h2{
  font-family:var(--pbl-serif); font-weight:400; font-size:26px; color:var(--pbl-charcoal);
  margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--pbl-amber); display:inline-block;
}

/* info / best-for */
.ph-single-package .ph-single-info-grid{display:grid; grid-template-columns:1fr 2fr; gap:32px;}
.ph-single-package .ph-single-meta{font-size:13px; color:var(--pbl-muted); margin-top:4px;}
.ph-single-package .ph-single-suitable{list-style:none; display:flex; flex-direction:column; gap:6px; margin:8px 0 0; padding:0;}
.ph-single-package .ph-single-suitable li{font-size:14px; color:var(--pbl-charcoal);}

/* tests list -> soft cards */
.ph-single-package .ph-single-tests-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:16px 0 0; padding:0;}
.ph-single-package .ph-single-tests-list li{
  font-size:14px; color:var(--pbl-charcoal); position:relative;
  background:var(--pbl-surface); border:1px solid var(--pbl-line);
  border-radius:8px; padding:10px 10px 10px 32px;
}
.ph-single-package .ph-single-tests-list li::before{content:'\2713'; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--pbl-amber); font-weight:700;}
.ph-single-package .article-body{color:var(--pbl-charcoal); line-height:1.8;}
.ph-single-package .lead{color:var(--pbl-muted); font-size:16px;}

/* gallery */
.ph-single-package .ph-gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.ph-single-package .ph-gallery-grid img{width:100%; height:180px; object-fit:cover; border-radius:var(--pbl-radius); border:1px solid var(--pbl-line);}

/* provider visit cards */
.ph-single-package .ph-visit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.ph-single-package .ph-visit-card{
  display:block; background:var(--pbl-surface); border:1px solid var(--pbl-line);
  border-radius:var(--pbl-radius); padding:18px; text-decoration:none; color:var(--pbl-charcoal);
  box-shadow:var(--pbl-shadow); transition:transform .2s ease,border-color .2s ease;
}
.ph-single-package .ph-visit-card:hover{transform:translateY(-3px); border-color:var(--pbl-amber);}
.ph-single-package .ph-visit-card img{width:100%; height:120px; object-fit:cover; border-radius:8px; margin-bottom:12px;}
.ph-single-package .ph-visit-name{display:block; font-weight:600; font-size:15px;}
.ph-single-package .ph-visit-note{display:block; font-size:13px; color:var(--pbl-muted); margin:4px 0;}
.ph-single-package .ph-visit-link{display:block; font-size:13px; color:var(--pbl-amber); font-weight:600;}

/* related grid */
.ph-single-package .ph-related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}

/* surfaces for need-help / why / cta */
.ph-single-package .ph-single-need-help,
.ph-single-package .ph-single-why,
.ph-single-package .ph-single-cta{background:var(--pbl-surface);}
.ph-single-package .ph-single-why-body{color:var(--pbl-charcoal); line-height:1.8;}
.ph-single-package .ph-single-why-loop{font-size:14px; color:var(--pbl-muted); margin-top:10px;}
.ph-single-package .ph-single-why-loop a{color:var(--pbl-amber);}

/* buttons */
.ph-single-package .btn-amber{
  background:var(--pbl-amber); color:#fff; border:none; border-radius:var(--pbl-pill);
  padding:12px 22px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.ph-single-package .btn-ghost-w{
  border:1px solid var(--pbl-line); color:var(--pbl-charcoal); border-radius:var(--pbl-pill);
  padding:12px 22px; font-weight:600; text-decoration:none; background:transparent;
}

/* sticky cta — keep show/hide behaviour intact */
.ph-single-package .ph-sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90; text-align:center; padding:12px;
  background:var(--pbl-charcoal); box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.ph-single-package .ph-sticky-cta.ph-sticky-cta-visible{display:block;}
.ph-single-package .ph-sticky-cta .btn-amber{border-radius:8px;}

/* responsive */
@media (max-width:768px){
  .ph-single-package .ph-single-info-grid{grid-template-columns:1fr;}
  .ph-single-package .ph-single-tests-list{grid-template-columns:1fr;}
  .ph-single-package .ph-single-hero h1{font-size:28px;}
}