/* Product page (Batch 6, docs/REDESIGN_PLAN.md 2.4 + owner layout notes 2026-10-01): paid, coloring,
   free and bundle variants. Markup: woocommerce/single-product.php (+ the identical root copy).
   Tokens only (assets/tokens.css).
   Phone/tablet: one column: head, gallery, thumbnail strip, buy box, bundle sections, description.
   Desktop (1024+): a centred 2-column block, gallery with a vertical thumbnail rail on the left,
   head + buy box on the right (sticky while it fits the screen). */

.pp { padding-top: var(--s-5); padding-bottom: var(--s-7); }
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.pp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Head: category, grades, H1 ---------- */
.pp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.pp-cat { flex: none; display: inline-flex; align-items: center; min-height: 32px; margin-right: var(--s-1); color: var(--link); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; text-decoration: none; text-underline-offset: 3px; }
.pp-cat:hover { text-decoration: underline; }
.pp-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: border-color var(--duration), background-color var(--duration); }
a.pp-chip:hover { border-color: var(--link); background: var(--active); }
.pp-chip--more { border-style: dashed; color: var(--text-muted); }
.pp-title { margin: 0; color: var(--text); font-size: var(--fs-pp-title); font-weight: 800; line-height: var(--lh-h1); }
.pp-title__main { display: block; }
.pp-title__sub { display: block; margin-top: var(--s-2); color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-pp-sub); font-weight: 600; line-height: var(--lh-sm); letter-spacing: 0; text-wrap: pretty; }
/* The "|" separators stay in the H1 text (the full product name) but are drawn as a dot or not at all. */
.pp-title__cut, .pp-title__dot { font-size: 0; }
.pp-title__cut { display: block; height: 0; overflow: hidden; }
.pp-title__dot::before { content: "\00B7" / ""; margin: 0 0.4em; font-size: var(--fs-pp-sub); font-weight: 800; }

/* ---------- Gallery: main image + thumbnails ---------- */
.pp-media { min-width: 0; }
.pp-gallery { position: relative; min-width: 0; }
.pp-gallery__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); background: var(--gallery-bg); }
.pp-gallery__track::-webkit-scrollbar { display: none; }
.pp-slide { position: relative; flex: 0 0 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; background: var(--gallery-bg); scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; overflow: hidden; }
.pp-slide.is-static { cursor: default; }
.pp-slide img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* Sample pages are A4 portrait: the whole page inside the same square frame as the cover, never clipped. */
.pp-slide:not(.is-cover) img { padding: var(--s-4); }
.pp-slide:focus-visible { outline-offset: -3px !important; }
.pp-cover-fallback { padding: var(--s-5); color: var(--text-muted); font-weight: 700; text-align: center; }
.pp-zoom-hint, .pp-count { position: absolute; bottom: var(--s-3); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--pal-sky-900-a72); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 700; pointer-events: none; }
.pp-zoom-hint { right: var(--s-3); }
.pp-zoom-hint .icon { width: 16px; height: 16px; }
.pp-count { left: var(--s-3); font-variant-numeric: tabular-nums; }

.pp-strip { min-width: 0; }
.pp-strip__list { display: flex; gap: var(--s-2); margin: 0; padding: 3px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.pp-thumb { --th: 72px; position: relative; display: block; width: var(--th); height: var(--th); padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; cursor: pointer; transition: border-color var(--duration), box-shadow var(--duration); }
.pp-thumb:hover { border-color: var(--line-strong); }
.pp-thumb.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A sample page keeps its real A4 portrait shape (same height as the cover thumbnail, narrower). */
.pp-thumb--page { width: calc(var(--th) * 0.707); background: var(--gallery-bg); }
.pp-thumb--page img { object-fit: contain; }
.pp-strip__list li { display: flex; justify-content: center; align-items: center; }
.pp-thumb--more { display: grid; place-items: center; background: var(--surface-2); cursor: zoom-in; }
.pp-thumb__more { color: var(--text); font-size: var(--fs-lg); font-weight: 800; }

/* ---------- Buy box ---------- */
.pp-buy { display: flex; flex-direction: column; min-width: 0; }
.pp-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.pp-price__now { color: var(--text); font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-price__now.is-free { color: var(--free); }
.pp-cents { position: relative; top: -0.05em; margin-left: 1px; font-size: 0.55em; vertical-align: super; line-height: 0; }
.pp-price__was { color: var(--strike); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-price__was del { color: inherit; }
.pp-price__save { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border-radius: 999px; background: var(--sale-solid); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 800; }
.pp-deal { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.pp-deal .icon { flex: none; width: 18px; height: 18px; color: var(--sale); }
.pp-deal__time { font-variant-numeric: tabular-nums; }
.pp-counts { margin: 0 0 var(--s-3); color: var(--text-body); font-size: var(--fs-sm); font-weight: 700; }
.pp-summary { margin: 0 0 var(--s-4); color: var(--text-body); font-size: var(--fs-base); line-height: var(--lh-body); }
.pp-summary p { margin: 0; }

/* One big Buy now, then Add to cart + Add to wishlist sharing the row. */
.pp-actions { display: grid; gap: var(--s-3); }
.pp-actions__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pp-actions__row.is-single { grid-template-columns: minmax(0, 1fr); }
.pp-actions form { margin: 0; min-width: 0; }
.pp-actions a.edu-buy-now.pp-buy-now { min-height: 56px; padding: 12px var(--s-4); border-radius: var(--r-sm); background: var(--cta); box-shadow: var(--shadow-sm); font-size: var(--fs-lg); }
.pp-actions a.edu-buy-now.pp-buy-now:hover { background: var(--cta-hover); box-shadow: var(--shadow); }
.pp-actions a.edu-buy-now .icon { width: 20px; height: 20px; }
:is(#edu-lg, html) .pp-actions .single_add_to_cart_button { width: 100%; min-height: 48px !important; padding: 10px var(--s-3) !important; gap: var(--s-2); }
.pp-actions .single_add_to_cart_button .icon { width: 18px; height: 18px; flex: none; }
.pp-actions .cart-direct-link { display: none; }
.pp-wish { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 48px; padding: 10px var(--s-3); border: 1.5px solid var(--text); border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color var(--duration), color var(--duration); }
.pp-wish:hover { background: var(--active); }
.pp-wish .icon { flex: none; width: 18px; height: 18px; }
.pp-wish[aria-pressed="true"] .icon { color: var(--sale); fill: currentColor; }

.pp-trust { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.pp-trust li { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--text-body); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.pp-trust .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--success); }
.pp-trust p { margin: 0; }
.pp-trust a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* Details and files boxes under the buttons */
.pp-details, .pp-files { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pp-box-head, .pp-section > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.pp-box-head { margin: 0 0 var(--s-2); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; }
.pp-box-head span, .pp-section > h2 span { color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.pp-details__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); margin: 0; }
.pp-details__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.pp-details__list dt { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.pp-details__list dd { margin: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 800; text-align: right; }
.pp-files__list { margin: 0; padding: 0; list-style: none; }
.pp-files__list li { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.pp-files__list li:last-child { border-bottom: 0; }
.pp-ext { flex: none; padding: 3px 6px; border-radius: 6px; background: var(--action); color: var(--on-action); font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; }
.pp-files__name { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-sm); }
.pp-files__list small { flex: none; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-files__list.has-more-6:not(.is-open) li:nth-child(n+7) { display: none; }
.pp-more { display: inline-flex; align-items: center; min-height: var(--tap); margin: 0; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-more:hover { text-decoration-thickness: 2px; }

/* ---------- Main column sections ---------- */
.pp-section { margin-top: var(--s-7); min-width: 0; }
.pp-section > h2 { margin: 0 0 var(--s-4); color: var(--text); font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* Bundle: What's included */
.pp-included__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.pp-item { display: flex; align-items: center; gap: var(--s-3); height: 100%; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--duration), box-shadow var(--duration); }
.pp-item:hover { border-color: var(--link); box-shadow: var(--shadow-sm); }
.pp-item__img { flex: none; display: block; width: 120px; height: 120px; border-radius: var(--r-sm); background: var(--wash); object-fit: cover; }
.pp-item__body { display: grid; gap: var(--s-1); min-width: 0; }
.pp-item__title { display: -webkit-box; overflow: hidden; color: var(--text); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-sm); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pp-item__meta { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pp-reveal > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-top: var(--s-2); color: var(--link); font-size: var(--fs-sm); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; list-style: none; cursor: pointer; }
.pp-reveal > summary::-webkit-details-marker { display: none; }
.pp-reveal .pp-when-open, .pp-reveal[open] .pp-when-closed { display: none; }
.pp-reveal[open] .pp-when-open { display: inline; }
.pp-reveal[open] > .pp-included__grid { margin-top: var(--s-2); }
.pp-reveal > .pp-group:first-of-type { border-top: 0; }

/* Bundle: files grouped by resource */
.pp-group { border-bottom: 1px solid var(--line); }
.pp-group:first-of-type { border-top: 1px solid var(--line); }
.pp-group > summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; list-style: none; cursor: pointer; }
.pp-group > summary::-webkit-details-marker { display: none; }
.pp-group > summary::after, .pp-faq > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 var(--s-1) 4px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--text-muted); transform: rotate(45deg); transition: transform var(--duration) var(--ease-out); }
.pp-group[open] > summary::after, .pp-faq[open] > summary::after { margin-bottom: -4px; transform: rotate(225deg); }
.pp-group__title { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-sm); }
.pp-group__meta { flex: none; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-group .pp-files__list { padding: 0 0 var(--s-3) var(--s-4); }
.pp-group .pp-files__list li { justify-content: space-between; min-height: 40px; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

/* Description: comfortable measure; its own spacing rules stay in base.css (.product-description-text). */
.pp-desc__inner { max-width: 72ch; font-size: var(--fs-base); line-height: var(--lh-body); }
.pp-desc__inner h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pp-desc__inner h3 { font-size: var(--fs-lg); line-height: var(--lh-h3); }
.pp-desc.is-clamped:not(.is-open) .pp-desc__inner { max-height: 600px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--pal-black) 70%, transparent); mask-image: linear-gradient(to bottom, var(--pal-black) 70%, transparent); }
.pp-desc__toggle { margin-top: var(--s-2); }
/* Description FAQ as disclosures (same questions and answers inc/faq-schema.php reads). */
.pp-faq { border-bottom: 1px solid var(--line); }
.pp-faq > summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-3) 0; color: var(--text); font-weight: 700; line-height: var(--lh-sm); list-style: none; cursor: pointer; }
.pp-faq > summary::-webkit-details-marker { display: none; }
.pp-faq > p { margin: 0 0 var(--s-4); }

/* ---------- You may also like ---------- */
.pp-related { margin-top: var(--s-8); padding-inline: 0; }
.pp-related > h2 { margin: 0 0 var(--s-5); color: var(--text); font-size: var(--fs-h2); line-height: var(--lh-h2); }

/* ---------- Phone/tablet sticky bar: price + Buy now ---------- */
.pp-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 64px; padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -6px 20px var(--pal-black-a10); transform: translateY(110%); visibility: hidden; transition: transform 220ms var(--ease-out), visibility 0s linear 220ms; }
.pp-bar.is-visible { transform: none; visibility: visible; transition: transform 220ms var(--ease-out); }
.pp-bar__price { color: var(--text); font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-bar__buy { display: inline-flex; flex: 0 1 60%; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-sm); background: var(--cta); color: var(--on-cta) !important; font-weight: 800; text-decoration: none !important; }
.pp-bar__buy:hover { background: var(--cta-hover); }
/* Never on top of a dialog: lightbox, menu, search, Gumroad payment window. */
body:has(dialog[open]) .pp-bar, body:has(.edu-pay-backdrop.is-open) .pp-bar { visibility: hidden; transform: translateY(110%); }

/* ---------- Phone and tablet: one column, thumbnails under the image ---------- */
@media (max-width: 1023px) {
  .pp { padding-bottom: calc(64px + var(--s-5)); }
  .pp-bar { bottom: var(--pp-bar-lift, 0px); }
  /* The toast sits above the buy bar, never on top of it. */
  .toast { bottom: calc(64px + var(--s-3) + var(--pp-bar-lift, 0px) + env(safe-area-inset-bottom, 0px)); }
  .pp-side, .pp-main, .pp-media { display: contents; }
  .pp-head { order: 1; }
  .pp-gallery { order: 2; }
  .pp-strip { order: 3; margin-top: calc(-1 * var(--s-2)); }
  .pp-buy { order: 4; }
  .pp-included { order: 5; }
  .pp-groups { order: 6; }
  .pp-body { order: 7; }
  .pp-cat, .pp-chip { min-height: var(--tap); }
  .pp-thumb { --th: 64px; }
  .pp-section { margin-top: var(--s-5); }
  .pp-buy { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pp-thumb { --th: 72px; }
  .pp-gallery, .pp-strip { justify-self: center; width: 100%; max-width: 560px; }
}
@media (max-width: 767px) {
  .pp { padding-top: var(--s-4); }
  .pp-tags { flex-wrap: nowrap; margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .pp-tags::-webkit-scrollbar { display: none; }
  .pp-buy { padding: 0; background: none; }
  .pp-summary { order: 1; margin: var(--s-4) 0 0; }
  .pp-trust { order: 1; }
  .pp-details { order: 2; }
  .pp-files { order: 3; }
  .pp-actions__row { gap: var(--s-2); }
  .pp-details__list { grid-template-columns: minmax(0, 1fr); }
  .pp-files__list.has-more-3:not(.is-open) li:nth-child(n+4) { display: none; }
  .pp-item__img { width: 88px; height: 88px; }
  .pp-included__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-zoom-hint { display: none; }
}
@media (min-width: 768px) {
  .pp-more[data-pp-files-toggle]:not(.has-more-6) { display: none; }
}
@media (max-width: 359px) {
  .pp-actions__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Desktop: centred block, rail | image on the left, buy box on the right ---------- */
@media (min-width: 1024px) {
  .pp { padding-top: var(--s-6); }
  .pp-top, .pp-related { max-width: 1200px; margin-inline: auto; }
  .pp-top { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: var(--s-7); align-items: start; }
  .pp-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .pp-side { grid-column: 2; grid-row: 1; min-width: 0; }
  .pp-side.is-sticky { position: sticky; top: 88px; }
  .pp-media.has-rail { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-4); }
  .pp-media.has-rail .pp-gallery { grid-column: 2; grid-row: 1; }
  .pp-media.has-rail .pp-strip { position: relative; grid-column: 1; grid-row: 1; }
  .pp-media.has-rail .pp-strip__list { position: absolute; inset: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .pp-media.has-rail .pp-strip__list::-webkit-scrollbar { display: none; }
  .pp-strip__list li { flex: none; }
  .pp-thumb { --th: 70px; }
  .pp-gallery__track { overflow: hidden; scroll-snap-type: none; }
  .pp-count { display: none; }
  .pp-head { margin-bottom: var(--s-4); }
  .pp-buy { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
  .pp-body .pp-section:first-child { margin-top: var(--s-7); }
  .pp-bar { display: none !important; }
}
@media (min-width: 1200px) {
  .pp-side.is-sticky { top: 100px; }
  .pp-media.has-rail { grid-template-columns: 88px minmax(0, 1fr); }
  .pp-thumb { --th: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-bar, .pp-bar.is-visible, .pp-thumb, .pp-group > summary::after, .pp-faq > summary::after { transition: none; }
  .pp-gallery__track { scroll-behavior: auto; }
}
.pp-sample-link { justify-self: center; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--action); font-size: var(--fs-sm); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }