/* ------------------------------------------------------------------
   The Creative Podcast: digital product page (PDP)
   Commerce layout for the `product` post type. Black, red and white.
   Product artwork carries its own violet brand, so every screenshot is
   framed on a neutral surface and never bleeds into the page chrome.
   ------------------------------------------------------------------ */

.tcp-pdp{
  background:var(--tcp-bg);
  color:var(--tcp-ink);
  font-family:var(--tcp-body);
  padding:0 0 clamp(64px,8vw,112px);
}
.tcp-pdp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.tcp-pdp h1,.tcp-pdp h2,.tcp-pdp h3{font-family:var(--tcp-display);letter-spacing:-.02em;margin:0}

/* ---------- breadcrumb ---------- */
.tcp-pdp-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:28px 0 0;font-size:13px;color:var(--tcp-muted);
}
.tcp-pdp-crumbs a{color:var(--tcp-muted);text-decoration:none}
.tcp-pdp-crumbs a:hover{color:var(--tcp-red)}
.tcp-pdp-crumbs span[aria-hidden]{opacity:.45}
.tcp-pdp-crumbs strong{color:var(--tcp-ink);font-weight:500}

/* ---------- top: gallery + buy box ---------- */
.tcp-pdp-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:clamp(32px,4vw,64px);
  align-items:start;
  padding:clamp(24px,3vw,40px) 0 clamp(56px,7vw,96px);
}

/* gallery */
.tcp-pdp-stage{
  position:relative;
  background:var(--tcp-bg-alt);
  border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);
  overflow:hidden;
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
}
.tcp-pdp-stage img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity .25s var(--tcp-ease);
}
.tcp-pdp-stage.is-swapping img{opacity:0}
.tcp-pdp-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--tcp-red);color:#fff;
  font-family:var(--tcp-display);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--tcp-pill);
}
.tcp-pdp-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.tcp-pdp-thumb{
  width:88px;height:88px;padding:0;flex:0 0 auto;cursor:pointer;
  background:var(--tcp-bg-alt)!important;
  border:1px solid var(--tcp-line);
  border-radius:14px;overflow:hidden;
  transition:border-color .2s var(--tcp-ease),transform .2s var(--tcp-ease);
  box-shadow:none!important;
}
.tcp-pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tcp-pdp-thumb:hover{transform:translateY(-2px);border-color:#c9c9c9}
.tcp-pdp-thumb.is-on{border-color:var(--tcp-red);box-shadow:0 0 0 2px var(--tcp-red-tint)!important}
.tcp-pdp-thumb:focus-visible{outline:2px solid var(--tcp-red);outline-offset:2px}

/* buy box */
.tcp-pdp-buy{position:sticky;top:96px}
.tcp-pdp-eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tcp-muted);
}
.tcp-pdp-ver{
  background:var(--tcp-ink);color:#fff;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--tcp-pill);font-size:11px;
}
.tcp-pdp-title{font-size:clamp(34px,4.4vw,50px);line-height:1.04;font-weight:700}
.tcp-pdp-sub{
  margin:16px 0 0;color:var(--tcp-muted);
  font-size:16px;line-height:1.65;max-width:46ch;
}
.tcp-pdp-price{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--tcp-line);
}
.tcp-pdp-amount{
  font-family:var(--tcp-display);font-weight:700;
  font-size:40px;line-height:1;color:var(--tcp-ink);
}
.tcp-pdp-note{font-size:14px;color:var(--tcp-muted)}

.tcp-pdp-actions{display:flex;flex-direction:column;gap:10px;margin:22px 0 0}
.tcp-pdp-cta,.tcp-pdp-cta2{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 28px;border-radius:var(--tcp-pill);
  font-family:var(--tcp-display);font-weight:600;font-size:16px;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease),box-shadow .2s var(--tcp-ease);
}
.tcp-pdp-cta{background:var(--tcp-red);color:#fff;box-shadow:var(--tcp-shadow)}
.tcp-pdp-cta:hover{background:var(--tcp-red-h);color:#fff;transform:translateY(-2px);box-shadow:var(--tcp-shadow-lift)}
.tcp-pdp-cta2{background:transparent;color:var(--tcp-ink);border-color:var(--tcp-ink)}
.tcp-pdp-cta2:hover{background:var(--tcp-ink);color:#fff;transform:translateY(-2px)}
.tcp-pdp-cta svg,.tcp-pdp-cta2 svg{width:18px;height:18px;flex:0 0 auto}
.tcp-pdp-cta:focus-visible,.tcp-pdp-cta2:focus-visible{outline:2px solid var(--tcp-ink);outline-offset:3px}

/* pending state: honest about a file that is not on the server yet */
.tcp-pdp-cta.is-pending{background:var(--tcp-soft);color:var(--tcp-muted);box-shadow:none;cursor:not-allowed}
.tcp-pdp-cta.is-pending:hover{background:var(--tcp-soft);color:var(--tcp-muted);transform:none;box-shadow:none}
.tcp-pdp-pending-note{margin:10px 0 0;font-size:13px;color:var(--tcp-muted);text-align:center}

.tcp-pdp-trust{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.tcp-pdp-trust li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--tcp-muted);line-height:1.5;
}
.tcp-pdp-trust svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--tcp-red)}

.tcp-pdp-specs{
  margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--tcp-line);
  display:grid;gap:0;
}
.tcp-pdp-specs>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--tcp-line);
}
.tcp-pdp-specs>div:last-child{border-bottom:0}
.tcp-pdp-specs dt{font-size:13px;color:var(--tcp-muted);margin:0}
.tcp-pdp-specs dd{font-size:14px;font-weight:500;color:var(--tcp-ink);margin:0;text-align:right}

/* ---------- sections ---------- */
.tcp-pdp-sec{padding:clamp(48px,6vw,80px) 0 0;border-top:1px solid var(--tcp-line)}
.tcp-pdp-sec+.tcp-pdp-sec{margin-top:clamp(48px,6vw,80px)}
.tcp-pdp-h{font-size:clamp(26px,3vw,36px);line-height:1.1;font-weight:700}
.tcp-pdp-lede{margin:14px 0 0;color:var(--tcp-muted);font-size:16px;line-height:1.7;max-width:62ch}

/* three tools */
.tcp-pdp-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.tcp-pdp-tool{
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);padding:28px 26px 30px;
  box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-pdp-tool:hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}
.tcp-pdp-toolnum{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--tcp-red-tint);color:var(--tcp-red);
  font-family:var(--tcp-display);font-weight:700;font-size:15px;
}
.tcp-pdp-tool h3{margin:18px 0 0;font-size:21px;font-weight:700}
.tcp-pdp-tool p{margin:10px 0 0;color:var(--tcp-muted);font-size:15px;line-height:1.65}

/* what you get + install */
.tcp-pdp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:start}
.tcp-pdp-split .tcp-pdp-h{font-size:clamp(22px,2.4vw,28px)}

.tcp-pdp-check{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.tcp-pdp-check li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6}
.tcp-pdp-check svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:var(--tcp-red)}

.tcp-pdp-steps{list-style:none;counter-reset:s;margin:26px 0 0;padding:0;display:grid;gap:16px}
.tcp-pdp-steps li{
  counter-increment:s;position:relative;padding-left:44px;
  font-size:15px;line-height:1.6;color:var(--tcp-muted);
}
.tcp-pdp-steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tcp-ink);color:#fff;
  font-family:var(--tcp-display);font-weight:600;font-size:12px;
}
.tcp-pdp-steps b{color:var(--tcp-ink);font-weight:600}
.tcp-pdp-steps code{
  background:var(--tcp-bg-alt);border:1px solid var(--tcp-line);
  border-radius:6px;padding:2px 7px;font-size:13px;color:var(--tcp-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* faq */
.tcp-pdp-faq{margin-top:32px;border-top:1px solid var(--tcp-line);max-width:860px}
.tcp-pdp-faq details{border-bottom:1px solid var(--tcp-line)}
.tcp-pdp-faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--tcp-display);font-weight:600;font-size:17px;color:var(--tcp-ink);
}
.tcp-pdp-faq summary::-webkit-details-marker{display:none}
.tcp-pdp-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--tcp-red);border-bottom:2px solid var(--tcp-red);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .25s var(--tcp-ease);
}
.tcp-pdp-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.tcp-pdp-faq summary:focus-visible{outline:2px solid var(--tcp-red);outline-offset:-2px}
.tcp-pdp-faq p{margin:0 0 24px;color:var(--tcp-muted);font-size:15px;line-height:1.7;max-width:66ch}

/* closing band */
.tcp-pdp-band{
  background:var(--tcp-ink);color:#fff;
  margin-top:clamp(56px,7vw,96px);
  padding:clamp(48px,6vw,80px) 0;
}
.tcp-pdp-band-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.tcp-pdp-band h2{font-size:clamp(24px,3vw,34px);line-height:1.15;font-weight:700;color:#fff;max-width:20ch}
.tcp-pdp-band p{margin:12px 0 0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:48ch}
.tcp-pdp-band .tcp-pdp-cta{width:auto;min-width:230px}
.tcp-pdp-band .tcp-pdp-cta2{width:auto;min-width:230px;color:#fff;border-color:rgba(255,255,255,.4)}
.tcp-pdp-band .tcp-pdp-cta2:hover{background:#fff;color:var(--tcp-ink);border-color:#fff}
.tcp-pdp-band-actions{display:flex;flex-direction:column;gap:10px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .tcp-pdp-top{grid-template-columns:1fr;gap:40px}
  .tcp-pdp-buy{position:static}
  .tcp-pdp-tools{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .tcp-pdp-wrap{padding:0 16px}
  .tcp-pdp-stage{aspect-ratio:16/9}
  .tcp-pdp-tools{grid-template-columns:1fr}
  .tcp-pdp-split{grid-template-columns:1fr}
  .tcp-pdp-thumb{width:72px;height:72px}
  .tcp-pdp-amount{font-size:34px}
  .tcp-pdp-band-in{flex-direction:column;align-items:flex-start}
  .tcp-pdp-band .tcp-pdp-cta,.tcp-pdp-band .tcp-pdp-cta2{width:100%}
  .tcp-pdp-band-actions{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .tcp-pdp *,.tcp-pdp *::before,.tcp-pdp *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
  .tcp-pdp-tool:hover,.tcp-pdp-cta:hover,.tcp-pdp-cta2:hover,.tcp-pdp-thumb:hover{transform:none}
}

/* ---------- video: click to play facade, so YouTube loads only on demand ---------- */
.tcp-pdp-video{
  position:relative;margin-top:34px;
  border:1px solid var(--tcp-line);border-radius:var(--tcp-card);
  overflow:hidden;background:var(--tcp-ink);aspect-ratio:16/9;
}
.tcp-pdp-video img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.74;
  transition:opacity .3s var(--tcp-ease),transform .5s var(--tcp-ease);
}
.tcp-pdp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tcp-pdp-playbtn{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;border:0;background:transparent!important;
  box-shadow:none!important;
}
.tcp-pdp-playbtn i{
  width:84px;height:84px;border-radius:50%;background:var(--tcp-red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(10,10,10,.55);
  transition:transform .25s var(--tcp-ease),background-color .2s var(--tcp-ease);
}
.tcp-pdp-playbtn svg{width:30px;height:30px;color:#fff;margin-left:5px}
.tcp-pdp-video:hover .tcp-pdp-playbtn i{transform:scale(1.08);background:var(--tcp-red-h)}
.tcp-pdp-video:hover img{opacity:.62;transform:scale(1.03)}
.tcp-pdp-playbtn:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.tcp-pdp-vcap{margin:14px 0 0;font-size:14px;color:var(--tcp-muted)}
@media (max-width:760px){.tcp-pdp-playbtn i{width:64px;height:64px}.tcp-pdp-playbtn svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){
  .tcp-pdp-video:hover img{transform:none}
  .tcp-pdp-video:hover .tcp-pdp-playbtn i{transform:none}
}
/* ---------- WooCommerce add to cart, restyled to the brand ----------
   Woo owns the markup and the behaviour; only the skin is ours. Astra
   styles bare <button> with its own global colour, so the button needs
   explicit values rather than inheriting. */
.tcp-pdp-cartwrap{margin:22px 0 0}
.tcp-pdp-cartwrap form.cart{margin:0;display:flex;flex-direction:column;gap:10px}
.tcp-pdp-cartwrap .quantity{display:flex;align-items:center;gap:10px}
.tcp-pdp-cartwrap .quantity input{
  width:88px;padding:12px 14px;border:1px solid var(--tcp-line);
  border-radius:var(--tcp-pill);text-align:center;font-family:var(--tcp-body);
}
.tcp-pdp-cartwrap .single_add_to_cart_button,
.tcp-pdp-cartwrap button.single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 28px;border-radius:var(--tcp-pill);
  font-family:var(--tcp-display);font-weight:600;font-size:16px;line-height:1;
  background:var(--tcp-red)!important;color:#fff!important;
  border:1px solid transparent!important;text-decoration:none;cursor:pointer;
  box-shadow:var(--tcp-shadow);
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease),box-shadow .2s var(--tcp-ease);
}
.tcp-pdp-cartwrap .single_add_to_cart_button:hover{
  background:var(--tcp-red-h)!important;color:#fff!important;
  transform:translateY(-2px);box-shadow:var(--tcp-shadow-lift);
}
.tcp-pdp-cartwrap .single_add_to_cart_button:focus-visible{outline:2px solid var(--tcp-ink);outline-offset:3px}
.tcp-pdp-cartwrap .single_add_to_cart_button.loading{opacity:.75}
.tcp-pdp-cartwrap .added_to_cart{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:15px 28px;border-radius:var(--tcp-pill);
  font-family:var(--tcp-display);font-weight:600;font-size:15px;
  background:transparent;color:var(--tcp-ink);border:1px solid var(--tcp-ink);
  text-decoration:none;
}
.tcp-pdp-cartwrap .added_to_cart:hover{background:var(--tcp-ink);color:#fff}

/* Woo notices inside the buy box */
.tcp-pdp-cartwrap .woocommerce-message,
.tcp-pdp-cartwrap .woocommerce-info,
.tcp-pdp-cartwrap .woocommerce-error{
  list-style:none;margin:0 0 14px;padding:14px 16px;
  border:1px solid var(--tcp-line);border-left:3px solid var(--tcp-red);
  border-radius:12px;background:var(--tcp-bg-alt);
  font-size:14px;line-height:1.5;color:var(--tcp-ink);
}
.tcp-pdp-cartwrap .woocommerce-message a,
.tcp-pdp-cartwrap .woocommerce-info a{color:var(--tcp-red);font-weight:600}

/* price, as Woo renders it */
.tcp-pdp-amount .woocommerce-Price-amount{
  font-family:var(--tcp-display);font-weight:700;font-size:40px;
  line-height:1;color:var(--tcp-ink);
}
.tcp-pdp-amount del{opacity:.45;font-size:24px;margin-right:8px}
.tcp-pdp-amount ins{text-decoration:none}

/* ---------- video thumbnail in the gallery strip ---------- */
.tcp-pdp-thumb.is-video{position:relative}
.tcp-pdp-thumb.is-video i{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.34);
}
.tcp-pdp-thumb.is-video i svg{
  width:26px;height:26px;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(10,10,10,.6));
}
.tcp-pdp-thumb.is-video.is-on i{background:rgba(10,10,10,.18)}

/* the stage doubles as a player, so it needs the play affordance */
.tcp-pdp-stage{cursor:default}
.tcp-pdp-stage[data-yt]{cursor:pointer}
.tcp-pdp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ==================================================================
   Challenge page
   Astra's boxed grey container stacked these lists down a narrow
   column. The layout is ours now: white ground, wide measure, and the
   sections side by side as cards.
   ================================================================== */
.tcp-chp-body .ast-separate-container,
.tcp-chp-body .site-content{background:var(--tcp-bg)!important}
.tcp-chp-body .ast-separate-container .ast-article-single,
.tcp-chp-body .ast-article-single{
  background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;
}
.tcp-chp-body .entry-header,
.tcp-chp-body .ast-single-post-order,
.tcp-chp-body .post-navigation{display:none!important}

.tcp-chp{background:var(--tcp-bg);color:var(--tcp-ink);font-family:var(--tcp-body);padding:0 0 clamp(56px,7vw,96px)}
.tcp-chp-wrap{max-width:1160px;margin:0 auto;padding:clamp(28px,4vw,48px) 24px 0}

.tcp-chp-head{max-width:820px}
.tcp-chp-eyebrow{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tcp-muted);
}
.tcp-chp-state{
  padding:5px 12px;border-radius:var(--tcp-pill);
  background:var(--tcp-soft);color:var(--tcp-muted);letter-spacing:.06em;
}
.tcp-chp-state.is-open{background:var(--tcp-red);color:#fff}
.tcp-chp-title{
  margin:14px 0 0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(40px,6.4vw,74px);line-height:1.02;letter-spacing:-.025em;
}
.tcp-chp-intro{
  margin:18px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.65;
  color:var(--tcp-muted);max-width:62ch;
}

/* video */
.tcp-chp-video{
  position:relative;margin:clamp(28px,3.5vw,44px) 0 0;
  border-radius:var(--tcp-card);overflow:hidden;
  background:var(--tcp-ink);aspect-ratio:16/9;cursor:pointer;
  border:1px solid var(--tcp-line);
}
.tcp-chp-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.78;transition:opacity .3s var(--tcp-ease)}
.tcp-chp-video:hover img{opacity:.64}
.tcp-chp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tcp-chp-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:transparent!important;border:0;box-shadow:none!important;cursor:pointer;padding:0;
}
.tcp-chp-play i{
  width:84px;height:84px;border-radius:50%;background:var(--tcp-red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(10,10,10,.55);
  transition:transform .25s var(--tcp-ease),background-color .2s var(--tcp-ease);
}
.tcp-chp-play svg{width:30px;height:30px;color:#fff;margin-left:5px}
.tcp-chp-video:hover .tcp-chp-play i{transform:scale(1.08);background:var(--tcp-red-h)}
.tcp-chp-play:focus-visible{outline:3px solid #fff;outline-offset:-8px}

/* the three cards */
.tcp-chp-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:clamp(32px,4vw,52px);align-items:stretch;
}
.tcp-chp-card{
  display:flex;flex-direction:column;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);padding:28px 26px 30px;
  box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-chp-card:hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}
.tcp-chp-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  background:var(--tcp-red-tint);color:var(--tcp-red);flex:0 0 auto;
}
.tcp-chp-ico svg{width:24px;height:24px}
.tcp-chp-cardh{
  margin:18px 0 0;font-family:var(--tcp-display);font-weight:700;
  font-size:21px;line-height:1.2;color:var(--tcp-ink);
}
.tcp-chp-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.tcp-chp-list li{
  position:relative;padding-left:22px;
  font-size:14.5px;line-height:1.6;color:var(--tcp-muted);
}
.tcp-chp-list:not(.is-num) li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--tcp-red);
}
.tcp-chp-list.is-num{counter-reset:r}
.tcp-chp-list.is-num li{counter-increment:r;padding-left:28px}
.tcp-chp-list.is-num li::before{
  content:counter(r);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tcp-ink);color:#fff;
  font-family:var(--tcp-display);font-weight:600;font-size:11px;
}
.tcp-chp-rest{margin-top:clamp(8px,2vw,20px)}

@media (max-width:960px){.tcp-chp-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .tcp-chp-wrap{padding-inline:16px}
  .tcp-chp-cards{grid-template-columns:1fr}
  .tcp-chp-play i{width:62px;height:62px}
  .tcp-chp-play svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .tcp-chp-card:hover{transform:none}
  .tcp-chp-video:hover .tcp-chp-play i{transform:none}
}
/* ==================================================================
   Challenge page, centred
   The head was left aligned inside a wide wrapper while the winners
   block below it was centred, so the page appeared to shift sideways
   halfway down. Everything is centred on one axis now.
   ================================================================== */
.tcp-chp-head{max-width:900px;margin-inline:auto;text-align:center}
.tcp-chp-eyebrow{justify-content:center}
.tcp-chp-intro{margin-inline:auto;text-align:center}
.tcp-chp-title{font-size:clamp(44px,7.4vw,86px);letter-spacing:-.03em}
.tcp-chp-rest{max-width:1160px;margin-inline:auto}

/* ---------- countdown ---------- */
.tcp-cd{margin:clamp(28px,3.6vw,44px) auto 0;text-align:center;max-width:720px}
.tcp-cd-h{
  margin:0 0 14px;font-family:var(--tcp-display);font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tcp-red);
}
.tcp-cd-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,16px);
}
.tcp-cd-cell{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--tcp-ink);border-radius:16px;
  padding:clamp(16px,2vw,24px) 8px clamp(12px,1.6vw,18px);
}
.tcp-cd-num{
  font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(34px,5vw,56px);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tcp-cd-lab{
  font-family:var(--tcp-display);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.tcp-cd-grid.is-over .tcp-cd-cell{background:var(--tcp-soft)}
.tcp-cd-grid.is-over .tcp-cd-num{color:var(--tcp-muted)}
.tcp-cd-grid.is-over .tcp-cd-lab{color:var(--tcp-muted)}
.tcp-cd-over{
  margin:14px 0 0;font-size:14px;font-weight:600;color:var(--tcp-red);
}
.tcp-cd-when{margin:12px 0 0;font-size:12.5px;color:var(--tcp-muted)}

/* ---------- the three cards, centred heads ---------- */
.tcp-chp-cards{margin-inline:auto;max-width:1160px}
.tcp-chp-card{align-items:center;text-align:center;padding:32px 26px 34px}
.tcp-chp-ico{width:54px;height:54px;border-radius:16px}
.tcp-chp-ico svg{width:27px;height:27px}
.tcp-chp-cardh{margin-top:20px;font-size:22px}
/* list text stays left aligned: centred bullets are hard to read */
.tcp-chp-list{text-align:left;width:100%;margin-top:18px}
.tcp-chp-card::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--tcp-red);margin:22px auto 0;order:-1;
  opacity:0;
}

@media (max-width:560px){
  .tcp-cd-grid{grid-template-columns:repeat(2,1fr)}
}
/* ---------- fix: page content sat off centre ----------
   Astra's .ast-container is display:flex for its content and sidebar layout.
   With no sidebar the single child still sized itself to its content rather
   than filling the row, so the inner wrapper had nothing to centre within and
   the whole page drifted left. Take the flex context away on these templates. */
.tcp-chp-body .ast-container,
.single-product .ast-container,
.post-type-archive-product .ast-container{display:block!important}

.tcp-chp,
.tcp-pdp{width:100%;flex:1 1 100%}
.tcp-chp-wrap,
.tcp-pdp-wrap{margin-left:auto;margin-right:auto}
/* One remaining column should run the full measure rather than sit in half
   a two column row with dead space beside it. */
.tcp-pdp-single{display:block}
.tcp-pdp-single .tcp-pdp-steps{max-width:80ch}
/* ---------- tool cards: feature image on top ---------- */
.tcp-pdp-tool{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tcp-pdp-toolimg{
  display:block;width:100%;aspect-ratio:4/5;
  background:var(--tcp-bg-alt);overflow:hidden;
}
.tcp-pdp-toolimg img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--tcp-ease);
}
.tcp-pdp-tool:hover .tcp-pdp-toolimg img{transform:scale(1.04)}
.tcp-pdp-tool .tcp-pdp-toolnum{margin:24px 26px 0}
.tcp-pdp-tool h3{margin:16px 26px 0}
.tcp-pdp-tool p{margin:10px 26px 28px}
@media (prefers-reduced-motion:reduce){
  .tcp-pdp-tool:hover .tcp-pdp-toolimg img{transform:none}
}
/* ==================================================================
   Product page, considered pass
   The buy column ran 276px longer than the gallery, leaving a hole
   under the images. The buy box now sticks while the page scrolls,
   the stage mats images instead of stranding them on white, and the
   media is sized to carry its own column.
   ================================================================== */

/* stage: a deliberate mat, not an accident.
   Gallery images are square and portrait, the video is 16:9, so nothing
   fills a single ratio. Contain on a tinted ground with inset padding
   reads as framing; cover would crop the titles out of the artwork. */
.tcp-pdp-stage{
  background:var(--tcp-bg-alt);
  border:1px solid var(--tcp-line);
  padding:clamp(14px,1.6vw,22px);
  box-sizing:border-box;
}
.tcp-pdp-stage img{
  object-fit:contain;
  border-radius:calc(var(--tcp-card) - 8px);
}
/* the player fills the mat completely */
.tcp-pdp-stage iframe{inset:0;width:100%;height:100%;border-radius:calc(var(--tcp-card) - 8px)}

/* thumbnails: larger, clearer selected state */
.tcp-pdp-thumbs{gap:14px;margin-top:16px}
.tcp-pdp-thumb{width:104px;height:104px;border-radius:16px}
.tcp-pdp-thumb.is-on{
  border-color:var(--tcp-red);
  box-shadow:0 0 0 3px var(--tcp-red-tint)!important;
}

/* buy box follows the scroll instead of leaving a hole below the gallery */
.tcp-pdp-top{align-items:start}
.tcp-pdp-buy{position:sticky;top:96px}

/* download count sits directly under the action */
.tcp-pdp-dlcount{
  margin:12px 0 0;text-align:center;
  font-size:13.5px;color:var(--tcp-muted);
}
.tcp-pdp-dlcount strong{
  font-family:var(--tcp-display);font-weight:700;
  color:var(--tcp-ink);font-size:15px;
}

/* ---------- comments on the product ---------- */
.tcp-pdp-reviews{max-width:860px}
.tcp-pdp-reviews .tcp-sp-comments{margin-top:26px}
.tcp-pdp-reviews .comment-reply-title,
.tcp-pdp-reviews .comments-title{
  font-family:var(--tcp-display);font-weight:700;
  font-size:20px;color:var(--tcp-ink);margin:0 0 20px;
}

@media (max-width:1040px){
  .tcp-pdp-buy{position:static}
}
@media (max-width:760px){
  .tcp-pdp-thumb{width:84px;height:84px}
}
/* ---------- how to install: steps beside the panels ---------- */
.tcp-pdp-installwrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,420px);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.tcp-pdp-installtxt{min-width:0}
.tcp-pdp-installtxt .tcp-pdp-steps{max-width:62ch}
.tcp-pdp-installimg img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 30px 50px rgba(10,10,10,.16));
}
@media (max-width:860px){
  .tcp-pdp-installwrap{grid-template-columns:1fr}
  .tcp-pdp-installimg{max-width:340px;margin-inline:auto}
}
/* the price it would have been, struck through beside Free */
.tcp-pdp-was{
  font-family:var(--tcp-display);font-weight:600;font-size:26px;
  color:var(--tcp-muted);text-decoration:line-through;
  text-decoration-thickness:2px;margin-right:4px;
}
.tcp-pdp-was .woocommerce-Price-amount{font-size:inherit;color:inherit;font-weight:inherit}
.tcp-shop-price.is-free s{color:var(--tcp-muted);font-weight:600;margin-right:6px}
.tcp-shop-price.is-free s .woocommerce-Price-amount{font-size:.75em;color:inherit}

/* ---------- frame matches the media ----------
   The stage had inset padding so pillarboxed images read as matted. The
   video is 16:9 and so is the stage, so that padding just made the frame
   bigger than the thing inside it. Media now fills the frame exactly. */
.tcp-pdp-stage{
  padding:0!important;
  border:0!important;
  background:var(--tcp-ink);
  overflow:hidden;
}
.tcp-pdp-stage img,
.tcp-pdp-stage iframe{
  border-radius:0!important;
  width:100%;height:100%;
}
.tcp-pdp-stage img{object-fit:cover}
/* ---------- comments centred ---------- */
.tcp-pdp-reviews{margin-inline:auto;text-align:center}
.tcp-pdp-reviews .tcp-pdp-h,
.tcp-pdp-reviews .tcp-pdp-lede{text-align:center;margin-inline:auto}
.tcp-pdp-reviews .tcp-sp-comments{text-align:left;margin-inline:auto;max-width:720px}
.tcp-pdp-reviews .woocommerce-noreviews,
.tcp-pdp-reviews .no-comments{text-align:center;color:var(--tcp-muted);font-size:15px}
.tcp-pdp-reviews .comment-respond{
  border:1px solid var(--tcp-line);border-radius:var(--tcp-card);
  padding:clamp(22px,3vw,34px);background:var(--tcp-bg);
}
.tcp-pdp-reviews .comment-reply-title{text-align:left}
/* ---------- comment label hidden ----------
   The textarea is the only large field in the form; a label above it
   states the obvious. The placeholder carries it instead, and the label
   stays in the markup for screen readers. */
.tcp-pdp-reviews .comment-form-comment > label,
.tcp-pdp-reviews .comment-form-author > label{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}
.tcp-pdp-reviews .woocommerce-noreviews,
.tcp-pdp-reviews p.woocommerce-noreviews:empty{display:none!important}
/* ==================================================================
   Comments, finished
   ================================================================== */
.tcp-pdp-reviews{max-width:760px}

/* initial avatar in place of the grey silhouette */
.tcp-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;flex:0 0 auto;
  background:var(--tcp-red-tint);color:var(--tcp-red);
  font-family:var(--tcp-display);font-weight:700;
  font-size:19px;line-height:1;letter-spacing:-.01em;
  user-select:none;
}

/* the thread */
.tcp-pdp-reviews .commentlist,
.tcp-pdp-reviews .comment-list{list-style:none;margin:0 0 28px;padding:0;text-align:left}
.tcp-pdp-reviews .commentlist li,
.tcp-pdp-reviews .comment-list li{list-style:none;margin:0}
.tcp-pdp-reviews .comment_container,
.tcp-pdp-reviews .comment-body{
  display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--tcp-line);
  position:static;
}
.tcp-pdp-reviews .comment-text,
.tcp-pdp-reviews .comment-content{min-width:0;margin:0}

/* byline: name leads, date recedes */
.tcp-pdp-reviews .meta,
.tcp-pdp-reviews .comment-author{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px;
  font-size:13px;color:var(--tcp-muted);
}
.tcp-pdp-reviews .meta strong,
.tcp-pdp-reviews .comment-author .fn{
  font-family:var(--tcp-display);font-weight:700;font-size:15.5px;
  color:var(--tcp-ink);font-style:normal;
}
.tcp-pdp-reviews .meta time,
.tcp-pdp-reviews .comment-meta{font-size:12.5px;color:var(--tcp-muted)}
.tcp-pdp-reviews .description p,
.tcp-pdp-reviews .comment-content p{
  margin:0;font-size:14.5px;line-height:1.7;color:var(--tcp-muted);
}

/* the form card */
.tcp-pdp-reviews .comment-respond{
  border:1px solid var(--tcp-line);border-radius:var(--tcp-card);
  padding:clamp(20px,2.6vw,28px);background:var(--tcp-bg-alt);
  text-align:left;
}
.tcp-pdp-reviews .comment-reply-title{
  font-family:var(--tcp-display);font-weight:700;font-size:17px;
  color:var(--tcp-ink);margin:0 0 14px;
}
.tcp-pdp-reviews .comment-form{margin:0;display:grid;gap:14px}
.tcp-pdp-reviews .comment-form textarea{
  min-height:118px;padding:14px 16px;
  border:1px solid var(--tcp-line);border-radius:12px;
  background:var(--tcp-bg);font-family:var(--tcp-body);font-size:14.5px;
  line-height:1.6;color:var(--tcp-ink);resize:vertical;width:100%;
}
.tcp-pdp-reviews .comment-form textarea:focus{
  outline:none;border-color:var(--tcp-red);
  box-shadow:0 0 0 3px var(--tcp-red-tint);
}
.tcp-pdp-reviews .form-submit{margin:0}
.tcp-pdp-reviews .form-submit input[type=submit]{
  padding:13px 30px;font-size:14px;letter-spacing:.04em;
}
/* badge removed: the heading now leads, so it takes the top space */
.tcp-pdp-tool h3{margin-top:24px}
.tcp-pdp-toolnum{display:none}

/* ---------- section dividers removed ----------
   The hairline between blocks was doing the same job the vertical
   spacing already does. Space separates them now. */
.tcp-pdp-sec{border-top:0!important}
.tcp-pdp-installwrap{border-top:0}