/* PermanentKits 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-stage-photo{background:transparent;padding:clamp(12px, 2vw, 28px) 0 0}
.p-cover{width:var(--cw);max-width:100%}
.p-cover .cover{padding:24px 22px 20px}
.p-cover .cover.has-img{padding:0;background:transparent;border:0;border-radius:12px;overflow:hidden}
.p-cover .cover.has-img img{border-radius:12px}
.p-cover-photo{width:min(100%,560px);max-width:100%}
.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 */

/* Product photo gallery (featured + gallery images) */
.p-gallery{position:relative;width:100%}
.p-gallery-frame{position:relative;width:100%;overflow:hidden;background:transparent;border-radius:12px}
.p-gallery-slide{margin:0;display:none}
.p-gallery-slide.is-active{display:block}
.p-gallery-slide img{display:block;width:100%;height:auto;max-height:min(72vh,720px);object-fit:contain;background:transparent;border-radius:12px}
.p-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:var(--card);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color 150ms ease,color 150ms ease,transform 150ms var(--ease-out)}
.p-gallery-prev{left:max(8px, env(safe-area-inset-left))}
.p-gallery-next{right:max(8px, env(safe-area-inset-right))}
.p-gallery-nav:hover{background:var(--ink);color:var(--card)}
.p-gallery-nav:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.p-gallery-count{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:4px 12px;border-radius:999px;background:rgba(23,23,23,.78);color:var(--card);font-size:var(--fs-small);font-weight:800;letter-spacing:.02em;pointer-events:none}

/* WHAT'S INSIDE: product description card, or quiet checklist, on the red band */
.pk-product-desc{max-width:720px;margin:0 auto;padding:clamp(24px,3.2vw,40px);background:var(--card);color:var(--ink);text-align:left;font-weight:600;font-size:var(--fs-lead);line-height:1.5}
.pk-product-desc>*+*{margin-top:1em}
.pk-product-desc :is(h1,h2,h3,h4){font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0}
.pk-product-desc h1{font-size:clamp(1.6rem,2.4vw,2rem)}
.pk-product-desc h2{font-size:clamp(1.35rem,2vw,1.65rem)}
.pk-product-desc h3{font-size:1.25rem}
.pk-product-desc p{margin:0}
.pk-product-desc :is(ul,ol){margin:0;padding-left:1.25em;display:grid;gap:.55em}
.pk-product-desc li{font-weight:600}
.pk-product-desc a{color:var(--accent)}
.inside-list{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:6px;text-align:left}
.inside-list--extra{margin-top:6px}
.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 */
.pk-fit-head{margin-bottom:28px}
.pk-fit-head h2{white-space:normal}
.fit{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;align-items:stretch;justify-content:center}
.fit--one,.fit:has(> .fit-col:only-child){grid-template-columns:1fr;max-width:640px;width:100%}
.fit-col{padding:clamp(24px, 3.4vw, 44px);display:grid;gap:20px;align-content:start;border-radius:12px;min-width:0}
.fit-col h3{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.03em;margin:0}
.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);color:var(--ink)}
.fit-no li::before{background:var(--card);border:3px solid var(--ink);box-sizing:border-box}
/* Avoid white flash / white-on-white if a parent link hover bleeds into fit cards */
.fit-col a{color:inherit}
@media (hover:hover) and (pointer:fine){
  .fit-yes:hover,.fit-no:hover{filter:none;background-color:inherit;color:inherit}
  .fit-yes:hover{background:var(--ink);color:var(--card)}
  .fit-no:hover{background:var(--tint);color:var(--ink)}
}

/* 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}
}