/* ————— Vitality Stacks commerce layer: /packs/, /packs/{slug}/, /quiz/ —————
   The September 2026 concept (design/concept/): white ground, sage panels, ink
   buttons, 12px cards, Montserrat. The Vitality Stacks theme
   (wordpress/vitality-stacks/style.css) owns the shared vocabulary — .wrap,
   .btn, .card, .cards, .panel, .chip, .call, .faq, .ticks, .paths, .path-card,
   .shop-head, .demo, .ph, .end — and the plugin's templates use those classes
   directly. This sheet adds only the commerce components (product page, buy
   box, contents list, trust strip, pack cards) and the .vs-* classes that
   assets/consultation.js renders. The theme loads the fonts once; this sheet
   never loads them. See docs/design-concept-adoption.md. */

/* =========================================================================
   1. Tokens — the same block as the theme's style.css :root, duplicated so
   the plugin's routes render in the right palette even without the theme.
   ========================================================================= */
:root{
  --white:#FFFFFF;
  --sage:#F1F4F0;
  --sage-2:#E6ECE7;
  --line:#DDE3DF;
  --ink:#0F2A22;
  --slate:#54655F;
  --mute:#8E9B96;
  --green:#1E6B58;
  --green-deep:#12463A;
  --glow:#4FD1A5;
  --amber-bg:#FBF3E4;
  --amber:#B7791F;
  --max:1280px;
  --col:680px;
}

/* =========================================================================
   2. .vs-* compatibility — the classes consultation.js renders (buttons,
   eyebrow, price, note) drawn as the theme's .btn-ink / .kick / .fine.
   ========================================================================= */
.vs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;line-height:1.2;background:var(--ink);color:#fff;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.vs-btn:hover{background:var(--green-deep);color:#fff}
.vs-btn-lg{padding:17px 30px;font-size:16px}
.vs-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.vs-btn-ghost:hover{background:var(--ink);color:#fff}
.vs-btn-block{display:flex;width:100%}
.vs-btn[disabled],.vs-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.vs-btn[disabled]:hover,.vs-btn[aria-disabled="true"]:hover{background:var(--ink)}

.vs-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green);margin:0 0 14px}
.vs-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.vs-note{font-size:14px;color:var(--slate);line-height:1.55}
.vs-price{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:52px;font-weight:600;letter-spacing:-0.03em;line-height:1;color:var(--ink)}
.vs-per{font-size:15px;color:var(--slate);font-weight:500}

/* =========================================================================
   3. Page furniture shared by the three commerce routes
   ========================================================================= */
.crumb{font-size:14px;color:var(--mute);padding:28px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;color:var(--line)}

/* A text link beside the ink button in a .row ("Build your own"). */
.row .txt{font-size:15px;font-weight:600;padding:0 6px;color:var(--ink)}
.row .txt:hover{color:var(--green)}

/* The hero's banner inside the column (the theme's front-page hero image is full-bleed). */
.hero-img.inset .ph{border-radius:24px}
.hero-img.inset .ph.contain img{padding:6%}

/* Two-column hero: copy left, photograph right. Stacks under 900px, where a
   side-by-side would leave the headline too narrow to read. The photo covers a
   4:5 column because the shots are 4:5 — contain would letterbox it back into
   the sage, which is what it was doing before. */
.hero.hero-two .hero-media{margin-top:36px}
.hero.hero-two .hero-media .ph{border-radius:24px;aspect-ratio:4/5;max-width:420px}
@media (min-width:900px){
  .hero.hero-two>.wrap{display:grid;grid-template-columns:1fr minmax(300px,0.8fr);gap:64px;align-items:center}
  .hero.hero-two .hero-copy{min-width:0}
  .hero.hero-two .hero-copy h1{max-width:16ch}
  .hero.hero-two .hero-media{margin-top:0}
  .hero.hero-two .hero-media .ph{max-width:none}
}

/* Trust strip: the facts we can state, as a sage rule between sections. */
.strip{background:var(--sage);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero+.strip{margin-top:64px}
.strip ul{list-style:none;margin:0;padding:20px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-size:14px;font-weight:600;color:var(--ink)}
.strip li{display:flex;align-items:center;gap:9px}
.strip li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* Section rhythm on commerce pages: the theme's 112px is for marketing pages. */
section.tight{padding:80px 0}
.shop-head.sub h2{font-size:clamp(26px,3vw,38px)}
.shop-head+.cards{margin-top:0}
.cards+.shop-head{margin-top:72px}

/* FAQ outside an article body. */
.faq-block{max-width:var(--col)}
.faq-block .faq{margin-top:0;border-top:0}
.faq-block .faq h2{margin-bottom:14px}
.faq-block .faq details:first-of-type{border-top:1px solid var(--line)}
.faq-block .fine{margin-top:24px;line-height:1.6}
.faq-block .fine a{color:var(--green);font-weight:600}

/* Bordered card (no image): the situation-specific consultations. */
.card.boxed{border:1.5px solid var(--line);border-radius:16px;padding:24px;transition:border-color .15s}
.card.boxed:hover{border-color:var(--ink)}
.card.boxed p{margin-bottom:0}

/* Pack card (templates/partials/pack-card.php): the concept .card with the
   pack shot in the sage slot and a count / price line under the copy. */
.pack-card .ph.contain img{padding:8%}
.pack-card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:14px;color:var(--slate)}
.pack-card .meta b{font-weight:600;color:var(--ink)}
.pack-card .meta span{font-weight:600;color:var(--green)}

/* Two-path grid with only the consultation card (no published featured pack). */
.paths.one{grid-template-columns:minmax(0,720px)}

/* =========================================================================
   4. Product page (/packs/{slug}/) — root is .pdp, not .product: the theme
   owns .product for the front-page formulary card and prints after this sheet.
   ========================================================================= */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:start;padding:36px 0 96px}
.pdp-main>.kick{margin-top:40px}
.pdp-hero .ph{aspect-ratio:4/3;border-radius:22px}
.pdp-hero-note{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted,#6b7168);text-align:center}
.pdp h1{font-size:clamp(38px,4.6vw,60px);max-width:16ch;margin:0 0 18px}
.pdp .lead{margin-bottom:14px}
.pdp .positioning{font-size:17px;color:var(--slate);line-height:1.6;max-width:60ch}
.pdp h2{font-size:clamp(26px,2.6vw,32px);letter-spacing:-0.015em;line-height:1.15;margin:56px 0 20px}
.pdp .ticks{margin-top:0}
.pdp .steps{list-style:none;margin:0;padding:0}
.pdp .steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.pdp .steps li:last-child{border-bottom:1px solid var(--line)}
.pdp .steps .n{font-size:13px;font-weight:700;color:var(--green);margin-top:3px;min-width:22px}
.pdp .call{margin:44px 0 0}
.pdp .call .btn{margin-top:14px}
.pdp .fine{margin-top:16px;line-height:1.6;max-width:60ch}

/* Contents list — the concept's .item idiom (design/concept/build.html). */
.list{display:grid;gap:10px}
.item{border:1.5px solid var(--line);border-radius:16px;background:#fff}
.item .top{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px 18px}
.item .pill{width:56px;height:44px;background:var(--sage);border-radius:10px;display:grid;place-items:center}
.item h3{font-size:17px;letter-spacing:-0.01em;margin:0;font-weight:600}
.item h3 a:hover{color:var(--green)}
.item .sub{font-size:13px;color:var(--slate);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.item .sub em{font-style:normal;color:var(--mute)}
.item .right{display:flex;align-items:center;gap:14px}
.item .dose{font-size:14px;font-weight:600;white-space:nowrap;color:var(--ink)}
.list-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 0;font-size:15px;font-weight:600;flex-wrap:wrap}
.list-total span{color:var(--slate);font-weight:500}

/* Buy box: a sage panel, sticky beside the product. */
.buybox{position:sticky;top:92px;background:var(--sage);border:0;border-radius:22px;padding:30px}
.buybox .price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.buybox .price b{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:56px;font-weight:600;letter-spacing:-0.03em;line-height:1}
.buybox .price span{font-size:15px;color:var(--slate);font-weight:500}
.buybox .pending{font-size:19px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.buybox .rate{font-size:14px;color:var(--slate);line-height:1.55;margin-bottom:22px}
.buybox .rate strong{color:var(--ink);font-weight:600}
.buybox .btn{width:100%}
.buybox .alt{display:block;text-align:center;font-size:14px;color:var(--green);font-weight:600;margin-top:12px}
.buybox .alt:hover{color:var(--ink)}
.buybox .vsp-buy .btn + .btn,.buybox .vsp-buy .vsp-msg + .btn{margin-top:10px}
.buybox .vsp-soon{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px}
.buybox .vsp-soon-h{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin:0 0 6px}
.buybox .vsp-soon-text{font-size:14px;color:var(--slate);line-height:1.55;margin:0 0 14px}
.buybox .ticks{margin-top:22px}
.buybox .ticks li{font-size:14px;padding:11px 0}
.buybox .aside{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.buybox .aside h3{font-size:15px;margin-bottom:8px}
.buybox .aside p{font-size:14px;color:var(--slate);line-height:1.55;margin:0 0 10px}
.buybox .aside p:last-child{margin-bottom:0}
.buybox .aside .note{padding-left:12px;border-left:2px solid var(--green)}
.buybox .aside.quiet h3{color:var(--slate)}

/* =========================================================================
   5. Responsive
   ========================================================================= */
/* body.vs-commerce (VS_Learn_Assets::body_class) outranks the theme's own
   .cards rule, whichever sheet prints first. */
@media (max-width:1024px){
  .pdp{grid-template-columns:minmax(0,1fr) 360px;gap:40px}
  body.vs-commerce .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;padding:24px 0 72px}
  .buybox{position:static}
  .pdp h2{margin-top:44px}
  .item .top{grid-template-columns:44px 1fr;gap:12px}
  .item .pill{width:44px;height:36px}
  .item .right{grid-column:1/-1;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
  .strip ul{gap:10px 24px;padding:16px 0}
  .hero+.strip{margin-top:40px}
  section.tight{padding:56px 0}
  body.vs-commerce .cards{grid-template-columns:1fr}
  .cards+.shop-head{margin-top:48px}
  .paths.one{grid-template-columns:1fr}
}