/* Material Guide v1: product-only additions, loaded after the shared material guide. */
.material-variant .p-intro { font-size: clamp(18px, 1.32vw, 19px); }
.material-variant .p-material-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.material-variant .p-material-scene img { width: 100%; height: 100%; object-fit: contain; }
.material-variant .p-toolbar { gap: 12px; }
.material-variant .p-views { width: 100%; }
.material-variant .p-views button:disabled { opacity: 0.45; cursor: not-allowed; }
.material-variant .p-views button:disabled:hover { background: var(--surface); }
.material-variant .p-views button:disabled:active { transform: none; }
.material-variant #image-note { line-height: 1.5; }
.material-variant .p-material-explanation { display: grid; gap: 10px; margin-top: 12px; padding: 18px 20px; background: var(--ocean); }
.material-variant .p-material-explanation p { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.material-variant .p-material-explanation strong { font-weight: 700; }
.material-variant .p-material-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; }
.material-variant .p-material-actions .p-link { display: inline-flex; align-items: center; min-height: 44px; text-align: left; font-size: 1rem; }

@media (max-width: 760px) {
  .material-variant .p-views { gap: 6px; }
  .material-variant .p-views button { padding-inline: 14px; }
  .material-variant .p-material-explanation { padding: 16px; }
}