/* Products: /products/ and /products/{slug}/. From the approved prototype (v10 cards). */
/* ── v10: Products cards ──────────────────────────────────────────────── */
.prod-filter { margin: calc(var(--space-2) * -1) 0 var(--space-6); }
.prod-filter .chip { display: inline-flex; align-items: center; gap: 8px; }
.prod-filter .chip svg { width: 18px; height: 18px; }
.prod-filter .chip .n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 2px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); font: 600 13px/1 var(--font-body); }
.prod-filter .chip[aria-pressed="true"] .n { background: var(--on-ink); color: var(--ink); opacity: 1; }
.account-cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.account-cta h2 { margin: 0; font: 700 24px/32px var(--font-body); }
.account-cta p { margin-top: 4px; color: var(--ink-2); }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcards > .pcard:nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pcards { grid-template-columns: minmax(0, 1fr); } }
.pcard { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); min-width: 0; }
.pcard-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.pcard-icon { width: 72px; height: 72px; display: block; object-fit: contain; }
.pcard-icon svg { width: 38px; height: 38px; }
.pcard-icon .glyph { font: 600 38px/1 "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; }
.pcard-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.pcard-title h2 { margin: 0; font: 700 24px/30px var(--font-body); }
.pcard-head p.tag-line { margin-top: 2px; color: var(--ink-2); font-size: 17px; line-height: 24px; }
.pcard-meta { margin-top: calc(var(--space-1) * -1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pcard-meta .badge { height: 28px; }
.pmeta { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.pmeta svg { width: 15px; height: 15px; }
.pcard > p.desc { color: var(--ink-2); font-size: 17px; line-height: 27px; }
.pcard .checklist li { font-size: 16px; }
.pcard-price { display: flex; align-items: baseline; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--ink-2); font-size: 15px; }
.pcard-price strong { color: var(--ink); font-size: 17px; }
.pcard-actions { margin-top: auto; display: grid; gap: var(--space-3); }
.pcard-actions .btn-primary { justify-content: space-between; min-height: 52px; padding: 0 20px; border-radius: var(--radius-lg); font-size: 17px; }
.pcard-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 15px; font-weight: 600; }
.pcard-links a { color: var(--ink-2); }
.pcard-links a:hover { color: var(--ink); }
.notify { display: flex; gap: var(--space-2); margin: 0; }
.notify .input { min-height: 52px; border-radius: var(--radius-lg); }
.notify .btn { min-height: 52px; border-radius: var(--radius-lg); justify-content: center; }
.notify-done { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--success-soft); color: var(--ink); font-weight: 600; }
.account-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.cta-ico { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink); }
.cta-ico svg { width: 26px; height: 26px; }
.prod-empty { padding: var(--space-6); border: 1px dashed var(--border-control); border-radius: var(--radius-lg); color: var(--ink-2); text-align: center; }
@media (max-width: 640px) {
  .pcard { padding: var(--space-5); }
  .pcard-head { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); }
  .pcard-icon { width: 64px; height: 64px; }
  .pcard-icon svg { width: 30px; height: 30px; }
  .pcard-title h2 { font-size: 22px; line-height: 28px; }
  .notify { flex-direction: column; }
  .account-cta { grid-template-columns: auto minmax(0, 1fr); }
  .account-cta .btn { grid-column: 1 / -1; }
}

/* Product card hover: lift, deeper shadow, icon nudge */
@media (hover: hover) {
  .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--border-control); }
  .pcard-icon { transition: transform .2s ease; }
  .pcard:hover .pcard-icon { transform: scale(1.05) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .pcard:hover, .pcard:hover .pcard-icon { transform: none; } }
@media (max-width: 560px) { .account-cta { padding: var(--space-5); } }

/* Real build */
.prod-filter .chip { text-decoration: none; }
.prod-filter .chip[aria-current] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.prod-filter .chip[aria-current] .n { background: var(--on-ink); color: var(--ink); }
.pcard-title h2 a { color: inherit; text-decoration: none; }
.pcard-title h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pcard-letter { display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--surface-sunken); font: 600 32px/1 var(--font-display); }
.pcard-soon { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--ink-2); font-weight: 600; }
.prod-head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-bottom: var(--space-7); }
.prod-head .pcard-icon { width: 88px; height: 88px; }
.prod-head .lead { margin-top: var(--space-2); }
.prod-head .pcard-meta { margin-top: var(--space-4); }
.prod-facts { display: grid; gap: var(--space-5); align-content: start; }
@media (max-width: 560px) { .prod-head { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); } .prod-head .pcard-icon { width: 64px; height: 64px; } }