/* PinkyDolly V2 · pd-v2-craft
 * 从定稿原型抽出,参数已实测。⚠️ 图片/视频路径需换成 SHOPLINE CDN 地址。
 * 不要修改数值 —— 见 docs/pd-v2-brief.md
 */

/* ══ F CRAFT ══ */
.care{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,20px)}
@media (max-width:1000px){.care{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.care{grid-template-columns:1fr}}
.care__i{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.care__n{font-family:var(--disp);font-variation-settings:var(--fx);font-weight:700;font-size:15px;
  color:var(--act);letter-spacing:.04em}
.care__i h4{margin-top:7px}
.care__i p{font-size:13.5px;color:var(--tx-dim);margin-top:7px}
.care__i b{color:var(--tx)}
/* 2026-10-10 mobile audit (390x844): missing from this file entirely — the
   prototype's own styles.css has this exact breakpoint, confirmed by
   comparison. Without it, 4 columns squeeze into ~90px each at mobile
   widths, cramming the card content down to the point Yimei's audit read it
   as "the cards never appear" rather than "the cards are unreadably tiny". */
.craft{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px)}
@media (max-width:900px){.craft{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.craft{grid-template-columns:repeat(2,1fr)}}
.craft__i .m{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  position:relative;background:var(--surface);display:block;width:100%;object-fit:cover}
/* 2026-10-13(反馈 #12): 占位块样式从 public/js/pd-v2-craft.js 的内联 style
   搬过来——block 的 image 设置留空时用这个,不是空白。真实照片上传后 .m
   是 <img> 本身,这条只对占位的 <div class="m m--ph"> 生效。 */
.craft__i .m--ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--surface),var(--raise));
  color:var(--tx-dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* Same dark-mode swap as .head .cap in pd-v2-header.css — see that comment.
   --act2 alone measured 2.91:1 against this section's dark-ink background. */
.craft__i .n{margin-top:12px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--act2);font-weight:800}
html[data-mode="dark"] .craft__i .n{color:var(--main1)}
.craft__i h4{margin-top:5px}
.craft__i p{font-size:13.5px;color:var(--tx-dim);margin-top:5px}
/* Was a style="color:var(--act);font-weight:800" inline attribute — inline styles
   can't respond to html[data-mode], so in dark mode this placeholder warning note
   measured 2.81:1 against --act alone. Same dark-mode swap pattern, moved to a
   real class so it can actually be mode-aware (--main2 passes dark-mode's dark-ink
   background at 8.3+:1; --act already passed light mode's at 5.35+). */
.head__note--warn{font-weight:800;color:var(--act)}
html[data-mode="dark"] .head__note--warn{color:var(--main2)}