/* =====================================================================
   PRODUCT PAGES — SHARED — public/assets/css/pages/product.css (step 11.5)
   Rules that are identical across the five product previews (design/product-*-preview.html),
   plus the screenshot placeholder of the shared partial products/_shot.blade.php.
   Loaded by products/_product.blade.php after product-skins.css and before css/pages/product-<name>.css.
   Only --fv-* tokens and --pd-* skin variables; every class starts with "pd-"; fv- components only scoped under .pd-page.
   ===================================================================== */
.pd-page .fv-eyebrow{color:var(--pd-accent)}
.pd-page .fv-h1 em,.pd-page .fv-h2 em{color:var(--pd-accent)}
.pd-page .fv-section--ink .fv-eyebrow,.pd-page .fv-section--ink .fv-h2 em{color:var(--pd-accent-on-ink)}
.pd-page .fv-h2{margin-block:22px 16px}
.pd-list{list-style:none;border-top:1px solid var(--fv-line)}
.pd-list li{position:relative;padding-block:13px;padding-inline-start:30px;border-bottom:1px solid var(--fv-line);font-size:var(--fv-fs-small)}
.pd-list li::before{content:"";position:absolute;inset-inline-start:3px;top:18px;width:11px;height:6px;border-inline-start:1.8px solid var(--pd-accent);border-bottom:1.8px solid var(--pd-accent);transform:rotate(-45deg)}
[dir=rtl] .pd-list li::before{transform:rotate(45deg)}
.pd-list--no li::before{width:12px;height:0;border:0;border-top:1.8px solid var(--fv-muted);top:23px;transform:none}
.pd-shot{margin:0;background:var(--fv-white);border:1px solid var(--fv-line);box-shadow:var(--fv-shadow)}
.pd-shot__bar{display:flex;gap:6px;align-items:center;height:30px;padding-inline:12px;border-bottom:1px solid var(--fv-line);background:var(--fv-paper)}
.pd-shot__bar i{width:8px;height:8px;border-radius:50%;background:var(--fv-line)}
.pd-shot__bar i:first-child{background:var(--pd-accent)}
.pd-shot img{display:block;width:100%;height:auto}
.pd-shot__todo{display:grid;place-content:center;gap:8px;text-align:center;aspect-ratio:16/10;padding:24px;margin:12px;border:1.5px dashed var(--pd-accent);background:var(--pd-accent-soft);color:var(--pd-accent)}
.pd-shot__todo b{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
[dir=rtl] .pd-shot__todo b{letter-spacing:0}
.pd-shot__todo code{font-family:var(--fv-font-body);font-size:13px;color:var(--fv-ink);direction:ltr;unicode-bidi:isolate;word-break:break-all}
.pd-shot__todo span{font-size:13px;color:var(--fv-muted);max-width:40ch;margin-inline:auto}
.pd-hero{background:var(--pd-accent-soft);padding-block:56px 96px}
.pd-crumb{display:flex;gap:10px;font-size:13px;color:var(--fv-muted);margin-bottom:56px}
.pd-crumb a:hover{color:var(--fv-ink)}
[dir=rtl] .pd-hero .fv-h1{font-size:clamp(30px,3.2vw,46px)}
.pd-hero__act{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:36px}
.pd-fit__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.pd-fit__grid > div > p{color:var(--fv-muted)}
.pd-fit__col h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
[dir=rtl] .pd-fit__col h3{letter-spacing:0;font-size:14px}
.pd-fit__col + .pd-fit__col{margin-top:40px}
.pd-cta__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end}
.pd-cta__grid > div > p{color:var(--fv-muted);max-width:56ch}
.pd-cta__own{margin-top:40px;padding-top:20px;border-top:1px solid var(--fv-line);font-size:13px;color:var(--fv-muted)}
@media (max-width:1080px){
  .pd-cta__grid,.pd-fit__grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:600px){
  .pd-hero{padding-block:32px 64px}
  .pd-crumb{margin-bottom:36px}
  .pd-shot__todo{margin:8px;padding:16px}
  .pd-cta__act,.pd-cta__act .fv-btn,.pd-hero__act .fv-btn{width:100%}
}