/* Bundlesandkits product page: only what the product page adds. Tokens and shared components live in styles.css.
   Same rules: one centred column, flat fills, colour-blocked bands, no resting shadows, no hairlines (dark-red gradient tokens only)
   *

/* HERO */
.p-hero{
  --cw:clamp(190px, 21vw, 280px);   /* cover width */
  padding:clamp(28px, 4vw, 48px) 0 0;text-align:center;overflow:hidden
}
.p-copy{display:grid;gap:22px;justify-items:center;max-width:1080px;margin:0 auto}
.p-copy h1{font-size:clamp(2rem, 6.4vw, 5.4rem);line-height:.98;max-width:15em}
.p-copy h1.long{font-size:clamp(1.35rem, 5.5vw, 4.6rem)}
.p-copy .lead{max-width:40ch}
.p-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 14px}
.p-price .price{font-family:var(--font-display);font-size:var(--fs-stat);letter-spacing:-.03em;line-height:1}
.p-price s{color:var(--muted);font-weight:700;font-size:var(--fs-lead)}
.p-save:empty{display:none}
.p-rating{font-size:var(--fs-small);font-weight:500;color:var(--muted)}
.p-rating b{color:var(--ink);font-weight:800}
.p-stage{max-width:1040px;margin:40px auto 0;background:var(--ink);padding:clamp(28px, 5vw, 56px) 16px;display:grid;place-items:center}
.p-stage:has(.t-ebook){background:var(--accent)} /* ink ebook covers sit on red; red course and white toolkit covers on ink */
.p-cover{width:var(--cw);max-width:100%}
.p-cover .cover{padding:24px 22px 20px}
.p-cover .ct-type{font-size:var(--fs-body)}
.p-cover .ct-title{font-size:clamp(1.2rem, 1.8vw, 1.6rem)} /* cover art stays below headline size */

/* WHAT'S INSIDE: one quiet list on the red band */
.inside-list{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:6px;text-align:left}
.inside-list li{background:var(--card);color:var(--ink);padding:16px 24px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:var(--fs-lead);line-height:1.35}
.inside-list li::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-8' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.inside-list li.extra{background:var(--ink);color:var(--card)}
.inside-list li.extra::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-8' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* WHO IT'S FOR: two blocks, side by side, inside the centred column */
.fit{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:16px;text-align:left}
.fit-col{padding:clamp(24px, 3.4vw, 44px);display:grid;gap:20px;align-content:start}
.fit-col h3{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.03em}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fit-col li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:baseline;font-weight:600;font-size:var(--fs-lead);line-height:1.4}
.fit-col li::before{content:"";width:14px;height:14px;border-radius:50%;transform:translateY(1px)}
.fit-yes{background:var(--ink);color:var(--card)}
.fit-yes li::before{background:var(--accent)}
.fit-no{background:var(--tint)}
.fit-no li::before{background:var(--card);border:3px solid var(--ink);box-sizing:border-box}

/* REVIEWS without a written review: the rating alone */
.rating-big{display:grid;gap:16px;justify-items:center;text-align:center;max-width:640px;margin:0 auto;font-weight:600}
.rating-num{font-family:var(--font-display);font-size:var(--fs-stat);font-weight:800;letter-spacing:-.035em;line-height:1}
.rating-num span{font-size:.5em;color:var(--muted)}
.rating-big .rstars i{width:22px;height:22px}
/* one sample review: the homepage card, centred under the rating line */
#reviews .agg{margin:-16px 0 28px}
#reviews .quotes-one{grid-template-columns:minmax(0, 520px);justify-content:center}

/* PRICE: this product against All-Access */
.offer{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:16px;color:var(--ink)}
.offer-col{padding:clamp(24px, 3.4vw, 40px);display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;justify-items:center;align-items:center;text-align:center} /* shared rows: titles, prices, text and buttons line up across both columns */
.offer-col h3{font-size:var(--fs-lead);max-width:22ch}
.offer-one{background:var(--card)}
.offer-all{background:var(--accent) var(--grad-red);color:var(--card)} /* taste-skill-ignore: client-requested gradient */
.offer-all .offer-price s{color:var(--card)}
.offer-price{display:flex;align-items:baseline;gap:12px}
.offer-price b{font-family:var(--font-display);font-size:var(--fs-stat);line-height:1;letter-spacing:-.04em}
.offer-price s{color:var(--muted);font-weight:700;font-size:var(--fs-lead)}
.offer-col .btn{width:100%;align-self:end}
.offer-col p:not(.offer-price){max-width:34ch}

/* RELATED: minimal rows (title link, one meta line, price + Add), same as the collection list */
.rel-list{max-width:760px;margin:0 auto;display:grid;gap:6px}
.rel{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:16px 24px;background:var(--tint);text-align:left;transition:background-color 150ms ease}
.rel-main{display:grid;gap:2px;min-width:0}
.rel-link{font-weight:800;font-size:var(--fs-lead);line-height:1.25;color:var(--ink);text-decoration:none}
.rel-meta{color:var(--muted);font-weight:500;font-size:var(--fs-small)}
.rel-buy{display:flex;align-items:center;gap:14px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.rel:hover{background:var(--tint-2)}.rel-link:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}}

/* FAQ on the tint band */
/* WP: all CSS loads globally, so scope by the tint band (the product FAQ) instead of #faq, which the homepage FAQ also uses */
.band-tint .faq details,.band-tint .faq details[open]{background:var(--card)}

/* sticky bar: this product */
.sticky p{min-width:0}
.sticky .btn{white-space:nowrap;flex:none}

@media (max-width:760px){

  .p-copy .row{width:100%}
  .p-copy .row .btn{width:100%;white-space:normal;text-align:center}

  .fit,.offer{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr;gap:10px;padding:16px}
  .rel-buy{justify-content:space-between}
  .inside-list li{padding:14px 18px}
  .sticky b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}